Landscape-plus 主题修改和优化

jQuery库的优化

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

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

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

替换成

<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行, 将

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

替换成

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

关闭分享按钮

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

<% 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分钟换一张。该文件内容如下：

<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图片

转载请注明来源及作者

本文永久链接是：https://www.bfdz.ink/2016/11/24/31/