Matery模板部分优化

今天早上大物期末考完啦~~~我下午就把模板改回了Matery，主要是因为虽然Matery模板不像Butterfly那样配置了大量的初始设置，但通过使用Matery模板，我可以对很多内容自行配置，我能学到更多有关html、css和js的知识，相较别人做好给我使用，我更倾向于自己动手丰衣足食。

加载动画配置

目的

部分博文由于内含音乐播放器/大量未压缩图片等原因加载速度较慢，为了让大家拥有更好的访问体验，我设置了博文加载动画

后来发现引入加载动画反而会减慢网页加载速度，在2021年1月30日删除，详见博客更新日志

设置方式

这里参考了liu’s blog，文章里写得很清楚，这里就不再赘述。

链接永久化

目的

通过使用hexo-abbrlink插件，引入abbrlink字段确保了我们在修改Front-matter内的博客标题title或创建日期date字段之后，不会改变链接的地址。

设置方式

首先我们在自己的博客目录下使用Git Bush Here插入插件

npm install hexo-abbrlink --save

再在自己的站点配置文件中添加如下配置

注：首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在F:\blog\blog2\LZCblog1下，那么站点配置文件就是F:\blog\blog2\LZCblog1\_config.yml，主题配置文件就是F:\blog\blog2\LZCblog1\themes\hexo-theme-matery\_config.yml。

另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。

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

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

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

生成文章的链接格式就会是如下样例

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

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

自己的探索历程

在建立博客后，一个问题一直迷惑着我：设置了链接永久化之后，abbrlink一行（博文链接.html前的四位字母）是何时插进.md文件里的？经过一番探寻，我发现，该行是在hexo g -d上传博客时自动生成的，你甚至能亲眼看见上传后的瞬间.md文件里多了一行，我们无需在hexo g -d前关闭.md文件等待abbrlink一行的生成

注：之前我一直误解了abbrlink的作用，以为是中文链接转拼音，然而在查看了官方文档后，发现其实是在进行链接永久化。
链接永久化的目的：通过使用hexo-abbrlink插件，引入abbrlink字段确保了我们在修改Front-matter内的博客标题title或创建日期date字段之后，不会改变链接的地址。

中文链接转拼音的目的：如果你的文章名称是中文的，那么Hexo默认生成的永久链接也会有中文，这样不利于SEO，且gitment评论对中文链接也不支持。所以我们可以用hexo-permalink-pinyin Hexo插件使在生成文章时生成中文拼音的永久链接。
这里大量参考了官方文档

不蒜子统计问题

chrome浏览器85版本之后关于不蒜子统计错误的问题

博文中插入视频

目的

之前想要在博客里展示视频全部需要设置一个超链接，访客点击后需要转入其他网站查看，非常不方便，在博文中直接插入视频可以大大节省访客们的时间，也符合我们对博客设计的要求

设置方式

在博文.md文件内，插入以下代码(本代码指向我自己写的自动读取班级打卡情况表格，实际使用时仅需更改src行即可）：

<!-- vlog模块 --> 
<div style="position: relative; padding: 30% 45%;"> 
    <iframe style=" 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0;" 
    src="//player.bilibili.com/player.html?aid=80181162&bvid=BV1Tv411t7m7" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true"> 
    </iframe> 
</div>

视频清晰度问题

在1月12日为明日方舟模块引入三大底部视频后，发现效果并不是很理想，究其原因是视频的清晰度太低导致视频模糊，于是我联系了本方法的创作者itsNekoDeng，他提出若想调整视频默认清晰度，可以在src引入路径最后加上&high_quality=1（480P）或&high_quality=0（360P）

那么上例的代码更改如下：

<!-- vlog模块 --> 
<div style="position: relative; padding: 30% 45%;"> 
    <iframe style=" 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0;" 
    src="//player.bilibili.com/player.html?aid=80181162&bvid=BV1Tv411t7m7&high_quality=1" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true"> 
    </iframe> 
</div>

这里参考了itsNekoDeng的博客

Twikoo评论系统

Live2d

目的

以前看明日方舟主播玩游戏的时候就经常看到他们的Live2d头像，很是羡慕，最近发现Matery模板也可以加Live2d，可以使自己的Live2d头像出现在博客中。

插件冲突问题

hexo中matery主题的个性化定制中提到：安装了live2d之后再运行时报了个错，totalcount is not defined，然后整个页面都不显示了。最后发现只要安装了live2d模块，之前所安装配置的search、wordcount等插件都没有了，就连hexo-deployer-git也没了都要重新下，具体为什么我也不清楚。总之遇到这种情况了比着readme文件重新下一遍就好了。
所以我就先没有安装Live2d模块

这里参考了EYHN/hexo-helper-live2d与hexo中matery主题的个性化定制

图片懒加载

目的

在用手机查看我的博客时，我发现自己的“明日方舟”模块一直在加载无法打开，原来是要一次性完成的图片读取工作过多，要很长时间才能完成，所以我引入了图片懒加载，让访客们获得更舒适的浏览体验。（懒加载对服务器前端有一定的缓解压力作用）

设置方式

参考了Hexo-matery主题性能优化，文章里写得很清楚，这里就不再赘述。

封面图片前置颜色去除

目的

之前由于 Matery 模板自带封面图片前置颜色，不仅十分绕眼，还占用加载资源，加载速度较慢。去除封面颜色后不仅能够清晰显示封面大图，还能加快博客加载速度，一举两得。

设置方式

找到主题文件夹下的source\css文件夹，并找到里面的matery.css文件（我这里的文件路径是F:\blog\blog2\LZCblog1\themes\hexo-theme-matery\source\css），在两处进行修改：
第一处：
修改bg-color栏为

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

第二处：
修改bg-cover:after栏为

/**.bg-cover:after {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        left: 0;
        top: 0;
        content: "";
}**/

就可以清晰显示高清封面大图啦OVO，这里要特别感谢“随性”大佬提供的帮助！
注：在设置该代码后出现了导航栏变红、博文标签栏变为无色等一系列现象，在删除live2d后得到解决

博客标题屏幕自适应

目的

之前由于没有设置标题自适应，由于标题过长，出现了换行的现象，十分影响美观，需要进行修改。

设置方式

这里参考了hexo-theme-matery主题优化。

背景图片加载速度优化

目的

之前一直使用的是Matery原作者提供的图片地址https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/res/site/medias/background.jpg然而该地址指向的图片大小为535.4KB，大大减慢了网页的加载速度。

设置方式

在TinyPNG（一个非常好用的图片压缩网站）对图片进行压缩，减小了13%的图片体积，并将图片转换为webq格式，放在了自己的图床里，大大加快了网页的加载速度。

代码块高亮

目的

[修改前]
[修改后]

设置方式

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了hexo-prism-plugin的Hexo插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下_config.yml文件中highlight.enable的值为false，并新增prism插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

注：可登录prismjs官网预览效果

打赏按钮调节

目的

设置方式

进入themes/matery/layout/_partial/reward.ejs目录，在line 94:118位置，有如下代码：

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title"><%= theme.reward.title %></h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="<%- theme.jsDelivr.url %><%- url_for(theme.reward.alipay) %>" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="<%- theme.jsDelivr.url %><%- url_for(theme.reward.wechat) %>" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

删除第九行的line-height: 38px，并修改第95行代码为:

< a href=" " class="reward-link modal-trigger btn-floating btn-large waves-effect waves-light blue">你想要在打赏位置显示的文字</ a>

（注意这里的btn-medium要改成btn-large，否则只会显示第一个字）
更多的按钮设置可以参考本网站

显示底部总浏览量和访问人数

目的

有时候请求不蒜子的数据比较慢，浏览量和访问人数就会隐藏，可能是默认的。

设置方式

在matery.css中增加以下代码可以让它一直显示

#busuanzi_container_site_pv,
#busuanzi_value_site_pv,
#busuanzi_container_site_uv{
   display: inline !important;
}

删除标签页

目的

随着博文的逐渐增加，自己经常把“标签”和“分类”这两者混淆，所以我需要舍其一以达到更好的分类效果

设置方式

在博客文件夹里找到themes\matery\layout\_partial\navigation.ejs，将menuMap.set("Tags", "标签");直接删去即可；删除其他标题页同理