修改 banner 图和文章特色图

banner里的图片命名必须是0.jpg | 1.jpg | 2.jpg

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在/layout/_partial/bg-cover-content.ejs 文件的代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在/source/medias/featureimages文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

里面的图片必须是jpg后缀，不是image没有关系
图片命名必须是0.jpg-6.jpg
在这里插入图片描述

文章生成永久链接

主题默认的文章链接配置是

这种生成的链接地址很长，文章版权的链接地址会出现一大串字符编码，一点也不好看。因此需要修改文章生成链接的格式。
GitHub项目地址 hexo-abbrlink
首先再根目录下执行下面的命令：

cnpm install hexo-abbrlink --save

然后再站点配置文件下添加如下配置：

abbrlink: 
    alg: crc16 #算法： 
    crc16(default) and crc32 rep: hex #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

再将站点配置文件的permalink的值修改为：

permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink

生成完后，原md文件的Front-matter 内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址.

动态标签栏

在这里插入图片描述
打开theme/matery/layout/layout.ejs

<script type="text/javascript"> var OriginTitile = document.title, st; 
document.addEventListener("visibilitychange", function () { document.hidden ? (document.title = "Σ(っ °Д °;)っ喔哟，崩溃啦！", clearTimeout(st)) : (document.title = "φ(゜▽゜*)♪咦，又好了！", st = setTimeout(function () { document.title = OriginTitile }, 3e3)) }) </script>

标题栏透明效果

打开主题文件中的source/css/matery/css文件
主要修改如下代码，颜色可以随意更换

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
    opacity: 0.8  /* 透明效果 */
}

在这里插入图片描述

音乐播放器的Bug修复

在这里插入图片描述

博客源文件备份

所有源文件我备份在了另一个GitHub仓库：地址

meteorsh

发布了245 篇原创文章 · 获赞 89 · 访问量 10万+

私信关注

hexo博客matery主题个性化配置

文章目录