Matery模板部分优化


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

加载动画配置

目的

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

加载动画效果

后来发现引入加载动画反而会减慢网页加载速度,在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-live2dhexo中matery主题的个性化定制

图片懒加载

目的

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

设置方式

参考了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", "标签");直接删去即可;删除其他标题页同理


文章作者: Heart-of-engine
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Heart-of-engine !
打赏
  目录