2019-07-15

Hexo博客默认主题的修改与美化1

文章目录

1. 自动切换Hexo博客的banner图片
1. 1.1. 改造默认主题landscape

改造默认主题landscape

Hexo自带的landscape主题很好，首先呈现在眼前的是300px的banner,很有美感。一个精美的banner会吸引访客,建立对网站的第一印象。静态一张图片长时间显示会很无趣，要是能够有多张图片滚动播放就好了，比如每十分钟换一张图片，那么如何改造landscape主题呢？下面我将具体介绍

首先添加随机切换图片的脚本，在themes/landscape/layout/_partial/下新建一个ejs文件，将其命名为switch-banner.ejs，其中是用于切换banner图片的Javascript代码，该文件内容如下:

<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的整数，经过运算映射到图片的文件名的编号。
还需要在主题目录下的配置文件中设置图片数量，即可灵活配置图片张数。即在themes/landscape/_config.yml中添加一行banner_count: 6 请根据实际图片的张数来修改这个数字。
然后然后找来6张不同的banner图片，图片像素值最好和默认的一样为1920X1200，大小最好不超过300K。banner图片要放到themes/landscape/source/css/images/目录下，命名为banner*.jpg，其中的星号是一个数字。6张图片必须连续地使用1～6这6个数字。
再修改布局文件来调用这段脚本：在themes/landscape/layout/_partial/header.ejs的最后一行（</header>标记）之前加入代码 <%- partial('switch-banner') %> 即可。
还需要修改主题配置文件才能开启功能，即在themes/landscape/_config.yml中添加代码switch_banner: true 即可
测试发现上述设置后游览器还会请求原来的旧图片，所以还需要修改CSS。打开文件themes/landscape/source/css/_partial/header.styl 找到#banner这一节，将其中的background: url(banner-url) center #000改成background: center #000 即可。
最后对banner图片进行说明，由于图片尺寸较大，会占用较多的网络带宽，对网页的速度带来影响。所以应该设置一个较高的JPEG压缩比，在Photoshop中将质量参数设为5或者6，使图片的大小控制在100KB左右。

做完上述所有设置即可使Hexo博客landscape主题中的banner背景图片每十分钟切换一次，一个小时可以展示6张图片，滚动播放使博客有趣生动。

Scholar’s Blog by scholargeek is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由董仕麟创作并维护的scholargeek博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文永久链接：https://scholargeek.github.io/2019/07/15/Hexo%E5%8D%9A%E5%AE%A2%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%E7%9A%84%E4%BF%AE%E6%94%B9%E4%B8%8E%E7%BE%8E%E5%8C%961/

Scholar's Blog

DO WHAT WE WANT

Hexo博客默认主题的修改与美化1

自动切换Hexo博客的banner图片

改造默认主题landscape

文章目录