Hexo-Matery主题美化

网上教程都过于老旧，因此本人决定写一篇2022年的美化教程，所有美化都由本人测试过，可以正常使用。

注意：

首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在F:\blog下，那么站点配置文件就是F:\blog_config.yml，主题配置文件就是F:\blog\themes\matery_config.yml。

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

添加 emoji 表情支持

需要安装插件 hexo-filter-github-emojis

1	npm install hexo-filter-github-emojis --save

然后在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。

效果：:smile::heartbeat::sparkling_heart::cupid::v::whale2::dromedary_camel::dragon_face::crocodile::leopard::poodle::herb:

在网址 🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more (webfx.com) 中可以找到你想要的表情，然后点击即可复制。

代码高亮

原本的代码显示行号和内容分开了，不美观。代码美化需要安装hexo-prism-plugin 插件

1	npm i -S hexo-prism-plugin

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

highlight:            #代码块的设置
  enable: false            #设置代码块高亮，默认为true，我们改成false
  line_number: true        #如果未指定语言，则启用自动检测
    auto_detect: false        #显示行数
  tab_replace: ''        #用n个空格替换tabs；如果值为空，则不会替换tabs
  wrap: true
  hljs: false
  
  
# 关闭原有的代码高亮，使用自己的
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

参数KEY	可选值
mode	realtime (Parse code on browser in real time) preprocess (Preprocess code in node)
theme	default coy dark funky okaidia solarizedlight tomorrow twilight
line_number	true (Show line numbers) false (Default, Hide line numbers) true（显示行号）false（默认情况下，隐藏行号）
no_assets	true (Stop loading asset files) false (Default, load script and stylesheets files)

主题的搜索功能

需要安装hexo-generator-search插件

1	npm install hexo-generator-search --save

在Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3

search:
  path: search.xml
  field: post

文章字数统计插件

需要安装 hexo-wordcount 插件

1	npm i --save hexo-wordcount

主题下的 _config.yml 文件中，激活以下配置项即可：

wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

中文链接转拼音

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

安装命令如下：

1	npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

**注：**除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

添加 RSS 订阅支持

安装命令如下：

1	npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

修改社交链接

在主题的 config.yml文件中，默认支持 QQ、GitHub 和邮箱等的配置。

你可以在主题文件的/layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

Facebook: fab fa-facebook
Twitter: fab fa-twitter
Google-plus: fab fa-google-plus
Linkedin: fab fa-linkedin
Tumblr: fab fa-tumblr
Medium: fab fa-medium
Slack: fab fa-slack
Sina Weibo: fab fa-weibo
Wechat: fab fa-weixin
QQ: fab fa-qq
Zhihu: fab fa-zhihu

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

配置音乐播放器

支持接入第三方音乐，如 QQ 音乐，网易云音乐，酷狗音乐等等

主题的 _config.yml 配置文件中激活 music 配置即可：

# Whether to display the musics.
# 是否在首页显示音乐.
music:
  enable: true
  title: #非吸底模式有效
    enable: true
    show: 听听音乐
  autoHide: true    # hide automaticaly
  server: netease   #require	music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 2888085740     #require	song id / playlist id / album id / search keyword
  fixed: true       # 开启吸底模式
  autoplay: true   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠
  hideLrc: true     # 隐藏歌词

server 可选 netease（网易云音乐），tencent（QQ 音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。

type 可选 song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

id 获取示例：浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist 的 id 即为这串数字。

文章 Front-matter 介绍

Front-matter 选项中的所有内容均为非必填的。但原作者建议至少填写 title 和 date 的值。

配置选项	默认值	描述
title	Markdown 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 _config.yml 中的 author	文章作者
img	featureImages 中的某个值	文章特征图，推荐使用图床
top	true	推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover	false	v1.0.2 版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	v1.0.2 版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc	true	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax	false	是否开启数学公式支持，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
reprintPolicy	cc_by	文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:
如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
您可以在文章 md 文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

首先为了新建文章方便，我们可以修改一下文章模板，可以将/scaffolds/post.md修改为如下代码：

---
title: {{ title }}
date: {{ date }}
author: 
img: 
coverImg: 
top: false
cover: false
toc: true
mathjax: false
password:
summary:
keywords:
tags:
categories:
---

这样新建文章后一些Front-matter参数不用你自己补充了，修改对应信息就可以了。

最简示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

最全示例

---
title: typora-vue-theme主题介绍
date: 2022-09-07 09:25:00
author: 赵XX
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

博客自定义修改

修改主题颜色

在主题文件的 /source/css/matery.css 文件中修改

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}
@keyframes rainbow {
    /* 动态切换背景颜色. */
}

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

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

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

如果想改为每小时或者每分钟切换 banner 图的话，需要将 getDay() 改为 getHours() 或者 getMinutes() 即可。

修改网站相关信息

1.网站信息的修改

# 这是根目录下的配置文件信息
title: CrazyYu's Blog  #这是网站标题
subtitle: 'Smile Life' #这是网站副标题subtitler
# 下面两个description,keywords，需要填上，如果想让搜索引擎收录，这个做SEO优化必不可忽视的两个属性
description: '个人博客'  #网站描述
keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等]  #网站的关键词
author: Crazy Yuchi #作者，文章版权所显示的
language: zh-cn #网站语言，不填写，默认为英文
timezone: '' #时区，可以不填写

# 这是主题配置文件的相关信息
# 配置网站favicon和网站LOGO
# 可以用的CDN，也可以使用本地文件
favicon: /favicon.png
logo: /medias/logo.png

# 网站副标题，打字效果
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle: 
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub1: 从来没有真正的绝境, 只有心灵的迷途
  sub2: Never really desperate, only the lost of the soul

注意：

网站打字效果副标题默认有两个，即sub1和sub2，如果想写多个，则需要修改两处地方，首先修改配置文件，如上面所示，在sub1和sub2后面继续添加即可，然后在去主题目录下的layout文件夹下的_partial文件夹，修改bg-cover-content.ejs文件，大约在12行左右，如下面所示：

 <div class="description center-align">
     <% if (theme.subtitle.enable) { %>
         <span id="subtitle"></span>
         <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
        <script>
            var typed = new Typed("#subtitle", {
                strings: ['<%= theme.subtitle.sub1 %>',
                          '<%= theme.subtitle.sub2 %>',
                          '<%= theme.subtitle.sub3 %>',
                          '<%= theme.subtitle.sub4 %>',
                          '<%= theme.subtitle.sub5 %>',
                          '<%= theme.subtitle.sub6 %>'],
                 startDelay: <%= theme.subtitle.startDelay %>,
                 typeSpeed: <%= theme.subtitle.typeSpeed %>,
                 loop: <%= theme.subtitle.loop %>,   
                 backSpeed: <%= theme.subtitle.backSpeed %>,
                 showCursor: <%= theme.subtitle.showCursor %>
              });
          </script>
      <% } else { %>
            <%= config.description %>
      <% } %>
</div>

2.社交链接的修改
默认的配置信息为：

# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  github:  https://github.com/CrazyYuchi
  email: 358106450@qq.com
  facebook: # https://www.facebook.com/profile.php?id=100080256978101
  twitter: # https://twitter.com/
  qq: 358106450
  weibo: # https://weibo.com//u/5629150839
  zhihu: # https://www.zhihu.com/
  rss: true # true、false

如果想添加简书，CSDN，掘金，博客园等等，需要在主题配置文件添加相关配置，可以进行如下配置(例如)：

socialLink:
  qq: 358106450
  weixin: ***.png
  github: https://github.com/CrazyYuchi
  email: mailto:358106450@qq.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  zhihu: https://www.zhihu.com/people/xuan-tian-40-64/activities
  juejin: https://juejin.im/user/5a902053f265da4e7527ae71/activities
  csdn: https://blog.csdn.net/victoryxa
  jianshu: https://www.jianshu.com/u/3b3856869772
  cnblogs: https://www.cnblogs.com/yafine/
  rss: true # true、false

其中的weixin我是用的图片链接，会跳转到一个新的标签页，之后还需要修改ejs文件，文件在主题目录下的layout文件夹下的_partial文件夹，修改social-link.ejs，添加相关的配置，个人添加的配置如下(例如)：

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="关注我的简书: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-jianshu">简</i>
    </a>
<% } %>

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="关注我的CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</i>
    </a>
<% } %>
<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="关注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">掘</i>
    </a>
<% } %>

<% if (theme.socialLink.cnblogs) { %>
    <a href="<%= theme.socialLink.cnblogs %>" class="tooltipped" target="_blank" data-tooltip="关注我的博客园: <%= theme.socialLink.cnblogs %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">博</i>
    </a>
<% } %>
<% if (theme.socialLink.weixin) { %>
    <a href="<%= theme.socialLink.weixin %>" class="tooltipped" target="_blank" data-tooltip="微信联系我: <%= theme.socialLink.weixin %>" data-position="top" data-delay="50">
        <i class="fab fa-weixin"></i>
    </a>
<% } %>

动态标题

实现方法，直接在themes/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="(Ő∀Ő3)ノ好哦！",st=setTimeout(function(){document.title=OriginTitile},3e3))
    })
</script>

修改导航栏颜色以及透明效果

打开themes/matery/source/css/matery.css文件，大约在250行，有一个.bg-color属性，修改其属性值即可，代码如下：

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值
    opacity: 0.8;  //透明效果 值范围 0~1，看情况自己修改
}

鼠标点击文字特效

实现方法，引入js文件，在主题文件下的/source/js/下新建click_show_text.js，其代码如下：

var a_idx = 0;
jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            3000,
            function () {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

修改网站背景图

主题配置文件_config.yml

1
2
3

background:
  enable: true
  url: "https://gitee.com/marmalade0/images/blob/master/www.marmalade.vip/24.jpg"

外链跳转插件

hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。比如设置target=’_blank’, rel=’external nofollow noopener noreferrer’ 告诉搜索引擎这是外部链接,不要将该链接计入权重。同时自动生成外链跳转页面,默认在根目录下 go.html;

使用 npm 安装

1 2	## npm 安装 npm install hexo-external-link --save

之后再hexo博客站点根目录下添加如下配置：

hexo_external_link:
  enable: true
  enable_base64_encode: true
  url_param_name: 'u'
  html_file_name: 'go.html'
  target_blank: true
  link_rel: 'external nofollow noopener noreferrer'
  domain: 'your_domain' # 如果开启了防盗链
  safety_chain: true

enable - 是否开启hexo_external_link插件 - 默认 false
enable_base64_encode - 是否对跳转url使用base64编码 - 默认 fasle
url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’
html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
target_blank - 是否为外链的a标签添加target='_blank' - 默认 true
link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’
domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false

添加动态科技线条背景

在themes/matery/layout/layout.ejs文件中添加如下代码：

<!--动态线条背景-->
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

其中：

**color：**表示线条颜色，三个数字分别为(R,G,B)，默认：（0,0,0）
**opacity：**表示线条透明度（0~1），默认：0.5
**count：**表示线条的总数量，默认：150
**zIndex：**表示背景的z-index属性，css属性用于控制所在层的位置，默认：-1

添加鼠标点击烟花爆炸效果

首先在themes/matery/source/js目录下新建fireworks.js文件，打开这个网址连接，将内容复制粘贴到fireworks.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容：

1
2
3

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

然后hexo clean && hexo g && hexo s即可，就可以看到效果了。

添加樱花飘落效果

在themes/matery/source/js目录下新建sakura.js文件，打开这个网址连接，将内容复制粘贴到sakura.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容：

<script type="text/javascript">
        //只在桌面版网页启用特效
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
        }
        </script>

添加雪花飘落效果

跟樱花类似
在themes/matery/source/js目录下新建snow.js文件，打开这个网址，将内容复制粘贴到cursor.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容：

1	<script src="/js/snow.js"></script>

添加鼠标彩虹星星掉落跟随效果

在themes/matery/source/js目录下新建cursor.js文件，打开这个网址，将内容复制粘贴到cursor.js即可。

然后再themes/matery/layout/layout.ejs文件内添加下面的内容：

1	<script src="/js/cursor.js"></script>

添加自定义页面

首先在站点目录下的source文件夹下新建aboutme文件，文件名可自定义，然后编写一个index.html放入aboutme文件夹下，然后在主题配置文件下的导航配置信息添加下面的配置：

About:
    url: /
    icon: fas fa-address-card
    children:
      - name: 关于我
        url: /about
        icon: fas fa-user-circle
      - name: Another    #这是新添加的，在原有配置基础上添加
        url: /aboutme
        icon: fa fa-user-secret

然后在站点配置文件下，找到skip_render，在后面添加属性，如下：

1	skip_render: aboutme/** # 其意思为在对文件进行渲染时跳过aboutme文件下的所有文件

知道方法后，你可以添加你自己想要添加的页面，让你的博客内容更加充实。

文章生成永久链接

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

1	premalink: :year/:month/:day/:title

这种生成的链接地址很长，文章版权的链接地址会出现一大串字符编码，一点也不好看。因此需要修改文章生成链接的格式。

首先在根目录下执行下面的命令：

1	npm install hexo-abbrlink --save

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

1
2
3

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

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

1	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 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

看板娘模块的安装和使用

模块安装：

1	cnpm install --save hexo-helper-live2d

下载完成后，可以在node_modules文件夹中找到自己安装的插件。

然后下载你想要的看板娘模块（可以自己到网上找哪个合心意的），执行命令：

cnpm install {packagename}
# 将packagename换成喜欢的模型即可，模型链接如下：
# live2d-widget-model-chitose                   校园男
# live2d-widget-model-epsilon2_1                少女
# live2d-widget-model-hibiki                    校园女
# live2d-widget-model-koharu                    小女孩
# live2d-widget-model-miku                      初音未来
# live2d-widget-model-shizuku                   课桌少女
# live2d-widget-model-z16                       少女

最后，打开hexo根目录下的 _config.yml 添加如下代码

live2d:
	enable: true
	scriptFrom: local
	model:
		use: live2d-widget-model-koharu #模型选择
	display:
		position: left #模型位置
		width: 150 #模型宽度
		height: 300 #模型高度
	mobile:
		show: false #是否在手机端显示

这样在左下角有看板娘啦！

优化网站加载速度

1.修改轮播图图片格式为Webp

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。默认的图片格式为Jpg，为了加快网站加载速度，可以将jpg格式修改为webp从而加快网站加载。

在/layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中进行以下修改：

//修改前
var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg';
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

//修改后
var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.webp';
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.webp)');

2.修改文章封面图片格式为Webp

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

打开主题配置文件themes\hexo-theme-matery\_config.yml中的_config.yml文件，之后在文本编辑器内搜索featureimages，将图片后缀的jpg文件替换成Webp即可!

添加ICP/公网安备案号

打开hexo/themes/matery/layout/_partial路径下的footer.ejs文件，在合适的未知插入如下代码：

<img src="https://gitee.com/marmalade0/images/blob/master/www.marmalade.vip/beian.png"> <a href="http://www.beian.miit.gov.cn/" style="color:#f72b07" target="_blank">你自己的备案号，如鲁公网安备xxxxxx号</a>

自定义字体

全局字体自定义

1.博客站点根目录下的 source 文件夹内创建一个名为 font 的文件夹，即文件夹路径为 /source/font/ ，用来统一存放你要用到的字体。

2.将你要用到的字体放入上述创建的文件夹内，字体名称最好为英文，如 /source/font/myFont.ttf

3.找到主题文件夹下的 my.css 文件，路径为 /themes/matery/source/css/my.css ，填入下面的代码：


@font-face{
    font-family: 'myFont';
    src: url('../font/myFont.ttf');
}

body{
    font-family: 'myFont';
}

将上面的 myFont 改成你自己的字体名称即可

局部字体自定义

如果你不想全局字体自定义的话，就可以尝试一下局部字体自定义。

1.与全局字体自定义一样，我们需要创建 font 文件夹，将需要的字体放入，与上面的第 1、2 步一样，可以参考一下

2.找到主题文件夹下的 my.css 文件，路径为 /themes/matery/source/css/my.css ，并将下面的代码填入文件中。


@font-face{
    font-family: 'myFont';
    src: url('../font/myFont.ttf');
}

.diyFont{
    font-family: 'myFont';
}

**注意：**这里是创建了一个 diyFont 的类，注意与全局字体自定义相区别

当想要指定某个地方的字体自定义时候，可以通过右键审查元素找到那个字体的类，给于类或者在原有的类下面给于属性即可。

例子：

找到你要自定义的区域，如我要自定义博客主页的标题字体，那么就要找到相应的文件，也就是 /themes/matery/layout/_partial/bg-cover-content.ejs ，在相应的地方加入我刚刚自定义的 diyFont 类。如将下面的：

<div class="title center-align">
      <% if (config.subtitle && config.subtitle.length > 0) { %>
               <%= config.subtitle %>
      <% } else { %>
              subtitle
      <% } %> 
</div>

改为

<div class="title center-align diy-font">
    <% if (config.subtitle && config.subtitle.length > 0) { %>
        <%= config.subtitle %>
     <% } else { %>
            subtitle
     <% } %>
</div>

修改方法也就是在 <div class="title center-align"> 中增加自己定义的 CSS 类名，什么是类名，有些小伙伴也许不知道其含义，自行百度吧，也就是在 class="" 中添加自己自定义的名称。

之后的方法跟全局自定义字体一样，只不过需要将原本直接给 body 的属性变成给你设置的类，比如：

@font-face{
    font-family: '字体名字';
    src: url('../font/你的字体.ttf');
}

.diy-font{
    font-family: '字体名字';
}

然后执行命令，查看本地效果即可。

给卡片区添加背景

进入主题文件的 /source/css/matery.css文件中，有个 body 选择器，加了中间两行之后长这样：

body {
    background-color: #eaeaea;
    background: linear-gradient(60deg, rgba(224,255,125, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover;
    background-attachment: fixed;
    margin: 0;      
    color: #34495e;    
}

也可以加 url 用图片做背景：

body {
    background-color: #eaeaea;
    background: url('/medias/cover.webp');
    background-attachment: fixed;
    margin: 0;      
    color: #34495e;    
}

添加天气小插件

首先打开和风天气插件网站，注册完成后，配置自己的插件，选择自定义插件 ——> 自定义样式 ——> 生成代码，然后会生成一段代码，复制粘贴到 themes/matery/layout/layout.ejs 即可。

Hexo-Matery主题美化

添加 emoji 表情支持

代码高亮

主题的搜索功能

文章字数统计插件

中文链接转拼音

添加 RSS 订阅支持

修改页脚

修改社交链接

修改打赏的二维码图片

配置音乐播放器

文章 Front-matter 介绍

最简示例

最全示例

博客自定义修改

修改主题颜色

修改 banner 图和文章特色图

修改网站相关信息

动态标题

修改导航栏颜色以及透明效果

鼠标点击文字特效

修改网站背景图

外链跳转插件

添加动态科技线条背景

添加鼠标点击烟花爆炸效果

添加樱花飘落效果

添加雪花飘落效果

添加鼠标彩虹星星掉落跟随效果

添加自定义页面

文章生成永久链接

看板娘模块的安装和使用

优化网站加载速度

1.修改轮播图图片格式为Webp

2.修改文章封面图片格式为Webp

添加ICP/公网安备案号

自定义字体

全局字体自定义

局部字体自定义

给卡片区添加背景

添加天气小插件