Landscape-plus 主题修改和优化

jQuery库的优化

Landscape-plus主题本身针对Landscape做过优化,将谷歌的CDN替换成了CloudFlare的。但目前国内访问CloudFlare的速度十分不理想,所以我选择了换用Bootstrap中文网提供的CDN。

修改 \themes\landscape-plus\layout\_partial\after-footer.ejs 第62行,将原来的

1
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

替换成

1
2
3
4
5
6
7
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.1.4.min.js' type='text/javascript'%3E%3C/script%3E"));}
// ]]>
</script>

BootstrapCDN是支持HTTPS的,所以也方便了博客启用HTTPS。这里不但将CloudFlare的jQuery替换成了Bootstrap的,随后还进行了一个判断,如果获取BootstrapCDN的jQuery失败,则使用本网站自己的jQuery。为了让这段代码有效,我们要去jQuery官方下载合适版本的jQuery并将其放到 \themes\landscape-plus\source\js 目录下。还有一点需要特别注意,那就是jQuery这个文件在Hexo生产博客时会被解析,因此一定要将jQuery文件开头处的 //@ sourceMappingURL=jquery-2.0.3.min.map 这一行代码删去,否则会导致博客无法生成。


完全启用 HTTPS

我的另一篇博文(LNMP配置启用HTTPS)讲了在LNMP环境下为网站配置HTTPS的方法,但博客在启用HTTPS后会遇到了一些资源不能使用HTTPS的问题。

多说头像和表情

我的博客采用的是多说评论系统,第三方登录的帐号,其评论头像往往不支持HTTPS。这样导致了Chrome会出现警告,网站也没有小绿锁。我采用的解决方法是将头像用支持HTTPS的CDN做代理,github上面有个现成项目:duoshuo-https

修改 \themes\landscape-plus\layout\_partial\after-footer.ejs 第11行, 将

1
'//static.duoshuo.com/embed.js'

替换成

1
'//dn-hb0716.qbox.me/duoshuo.js'

关闭分享按钮

主题自带的百度分享同样对HTTPS的支持有问题,在个可在主题配置文件中关闭。关闭后分享按钮又恢复成Hexo默认的了,我感觉这个功能也没啥用,所以关闭之。默认分享按钮在Hexo主配置没有关闭的地方,找到 /landscape-plus/blob/master/layout/_partial/article.ejs , 删除或注视掉26-30行。其内容如下

1
2
3
4
5
<% if (config.baidushare || theme.baidushare){ %>
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link" data-share="baidu" data-title="<%= post.title %>"><%= __('share') %></a>
<% } else { %>
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
<% } %>

自动切换 banner 图片

显示banner和标题透明

首先要让banner显示出来,Landscape-plus主题为了优化速度默认不显示banner。然后去掉博客名的红色背景色,改成透明的,这样防止影响banner图的效果。主要是修改这个文件 themes/landscape-plus/source/css/_partial/header.styl 的第33行,将这一行 // background: url(banner-url) center #000 替换成 background: center #000 ,同时也要注释掉第13、16、32行。第56行修改成 background: rgba(0,0,0,0.2) ,最后一个数字是透明度,可以自己调节。

自动切换 banner 图片的代码和具体方法是另一位博主写的,下面是直接引用他的博文

添加随机切换图片的脚本

首先要在themes/landscape-plus/layout/_partial/下新建一个ejs文件,我将其命名为switch-banner.ejs,其中是用于切换banner图片的Javascript代码,代码会每个小时将6张图片轮换一次,也就相当于每10分钟换一张。该文件内容如下:

1
2
3
4
5
6
7
8
9
10
<script>
<% if (theme.switch_banner){ %>
var d = new Date();
var m = d.getMinutes();
var num = Math.ceil((m + 1) / (60 / <%- theme.banner_count %>));
document.getElementById("banner").style.backgroundImage = "url(/css/images/banner" + num + ".jpg)";
<% } else { %>
document.getElementById("banner").style.backgroundImage = "url(/css/images/banner.jpg)";
<% } %>
</script>

代码也比较简单,通过JavaScript的Date对象的getMinutes()来获取当前时间的分钟数,这是一个0~59的数,然后经过一点小算术映射到图片的文件名的编号,注意处理边界情况。

这里还有一个小修改,就是将图片的张数改成了可配置的,而不是硬编码的。这就需要在Landscape-plus模板的配置文件中设置一个数字。在themes/landscape-plus/_config.yml中添加一行banner_count: 6。请根据实际图片的张数来修改这个数字。

banner图片要放到 themes/landscape/source/css/images/ 目录下,命名为 banner*.jpg ,其中的星号是一个数字。如果是6张图片必须连续地使用1~6这6个数字。

修改模板调用上述脚本

下面要修改布局文件来调用这段脚本。在 themes/landscape-plus/layout/_partial/header.ejs 的最后一行(</header>标记)之前加入一行 <%- partial('switch-banner') %> 即可。

最后,我们需要修改landscape-plus模板的配置文件来开启这个特性。在 themes/landscape-plus/_config.yml 中添加一行 switch_banner: true


参考资料

本站重启多说评论支持HTTPS头像&表情
Hexo Landscape主题的字体和JS库优化
自动随机切换Hexo博客的banner图片