Matery主题搭建与优化教程超详细解析

并非主流优化，主流优化请百度，这里介绍一些百度不到的，详细搭建过程请参考过客大佬

优化修改

优化搜索

主题自带搜索，但是只支持英文，所以我们需要拓展搜索功能，先安装插件，在主目录下

1	npm install hexo-generator-search --save

紧接着在博客站点目录的配置文件_config.yml下，添加如下配置：

# 中文搜索功能
search:
  path: search.xml
  field: post

添加豆瓣和Bilibili页面

豆瓣

首先在博客站点目录执行下面的命令安装豆瓣插件：

1	npm install hexo-douban --save

紧接着在博客站点目录的配置文件_config.yml下，添加如下配置：

douban: 
  user: 252345665    #这个需要修改为你个人的id  
  builtin: false   #如果想生成豆瓣页面，这个需要设置为true
  book: 
      title: 'This is my book title' 
      quote: 'This is my book quote' 
  movie: 
      title: 'This is my movie title' 
      quote: 'This is my movie quote' 
  game: 
      title: 'This is my game title' 
      quote: 'This is my game quote' 
  timeout: 10000

user：你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的个人ID了。
builtin：是否将生成页面的功能嵌入 hexo s 和 hexo g 中，默认是 false ，另一可选项为 true。
title：该页面的标题。
quote：写在页面开头的一段话,支持html语法。
timeout：爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

然后再主题配置文件_config.yml中添加关于此页面的菜单：(下面是我的配置)

menu:
    媒体:
       url: /
       icon: fas fa-list
       children:
         - name: 电影
           url: /movies
           icon: fas fa-film
         - name: 书单
           url: /books
           icon: fas fa-book
         - name: 游戏
           url: /games
           icon: fas fa-gamepad

适配Matery主题：在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs的文件，并将下面的内容复制进去：

<%- partial('_partial/post-cover') %> 
<style> 
    .hexo-douban-picture img {
        width: 100%; 
    } 
</style>
<main class="content"> 
    <div id="contact" class="container chip-container"> 
        <div class="card"> 
            <div class="card-content" style="padding: 30px"> 
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                <%- page.content %> 
            </div> 
        </div> 
        <div class="card"> 
            <div class="card-content" style="text-align: center"> 
                <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> 
            </div> 
        </div> 
        <div class="card"> 
            <% if (theme.gitalk && theme.gitalk.enable) { %>
                <%- partial('_partial/gitalk') %>
            <% } %> 
            <% if (theme.gitment.enable) { %> 
                <%- partial('_partial/gitment') %> 
            <% } %> 
            <% if (theme.disqus.enable) { %> 
                <%- partial('_partial/disqus') %> 
            <% } %> 
            <% if (theme.livere && theme.livere.enable) { %> 
                <%- partial('_partial/livere') %> 
            <% } %> 
            <% if (theme.valine && theme.valine.enable) { %> 
                <%- partial('_partial/valine') %> 
            <% } %> 
        </div> 
    </div> 
</main>

然后在博客站点目录下的node_modules文件夹下找到hexo-douban/lib，我的是C:\Users\user\Desktop\lovelijunyi\node_modules\hexo-douban\lib文件夹下有三个js文件，分别为：books-generator.js 、games-generator.js 、movies-generator.js，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为一下内容：

1 2	/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/ layout: [`page`, `douban`]

最后就是使用并生成相应的页面，执行命令如下:

1	hexo douban

需要注意的是，通常大家都喜欢用 hexo d 来作为 hexo deploy 命令的简化，但是当安装了 hexo douban 之后，就不能用 hexo d 了，因为 hexo douban 跟 hexo deploy 的前缀都是 hexo d ，你以后执行的 hexo d 将不再是 Hexo 页面的生成，而是豆瓣页面的生成。

以下是可选的命令参数：

-h, --help    # 帮助页面
-b, --books   # 只生成书单页面
-g, --games   # 只生成游戏页面
-m, --movies  # 只生成电影页面

重要提醒：

出现编译时无法载入豆瓣数据

当站点配置文件的builtin的值为true时，生成页面的功能会嵌入到hexo g和hexo s中，在进行部署生成操作，会自动生成相应的页面。但我并不推荐这里写true，建议填写false，原因是因为该插件是通过爬虫机制获取到douban的信息，如果多次部署，则会触发反扒，ip被封锁(最好的解决办法：1. 等待一天自动解封。2. 电脑换一个接入源，也就是换一个ip)，最明显的反应就是使用hexo douban命令编译时，载入的book，movies和games为0，所以如果豆瓣有较大更新时，再单独使用hexo douban命令编译。

无法载入豆瓣页面

如果我们不能载入豆瓣页面，这是因为，例如我的C:\Users\user\Desktop\lovelijunyi\source文件夹下新建对应的movies，books和games目录，并在内部新建index.md文件，这会导致网页会指向这个index.md文件。正确的做法是，置空。

Bilibili

拉取个人bilibili番剧页面所有番剧

安装插件

1	npm install hexo-bilibili-bangumi --save

更新插件

1	npm install hexo-bilibili-bangumi --update --save

配置

将下面的配置写入站点的配置文件_config.yml里 (不是主题的配置文件)。

bangumi:
  enable: true
  vmid: 1234567
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  loading: '/img/bangumi-loading.gif'

配置介绍

enable: 是否启用
vmid: 哔哩哔哩番剧页面的 vmid(uid)
title: 该页面的标题
quote: 写在页面开头的一段话，支持 html 语法
show: 初始显示页面：0: 想看 , 1: 在看 , 2: 看过，默认为 1
loading: 图片加载完成前的 loading 图片

获取 uid：登录哔哩哔哩后前往 https://space.bilibili.com/ 页面，网址最后的一串数字就是 uid

使用

前往你的 Hexo 博客的根目录，输入如下命令

1	hexo new page bangumis

找到source/bangumis/index.md这个文件，修改这个文件，添加 type: "bangumis"：

---
title: bangumis
date: 2020-01-05 00:00:00
type: "bangumis"
---

防止请求次数过多插件不再自动获取番剧数据，所以请根据自己的需要在 hexo generate 或 hexo deploy 之前使用hexo bangumi -u 命令更新番剧数据！

例如

1	hexo clean && hexo g && hexo bangumi -u && hexo s

删除数据命令:

1	hexo bangumi -d

最后注意一下，和豆瓣不同，不要每次都执行hexo bangumi -u，只有你自己番剧更新时才需要执行更新指令，之前的番剧数据会一直保留，直到被你删除

页面获取标题

之前比如我们打开例如相册，留言板等最上方是没有标题的，看起来不是很舒服，加完标题如下

修改themes\matery\layout\_partial中的bg-cover-content.ejs文件，其中原主题中这个文件的代码为(大约在第4行)：

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

修改过后的代码为：

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

这个有一点bug，归档页面标题无法显示，解决办法目前还没有

然后保存，执行hexo cl && hexo g && hexo s查看效果即可。

注意： 获取的title标题在md文档中的fromt-matter属性中title的值，可自定义，你只需要去本地找到页面所在的md文档中，将其值修改为中文或者英文即可。

例如：友情链接这一块，你去博客文件的F:\blog\source\friends（这是我的本地路径）目录，打开目录下的index.md文档，将title后面的值由原来的friends值修改为中文的友情链接或者友人帐或者其他（自定义），然后保存，执行命令，查看效果即可，如没有问题，再部署！

添加看板动画

这个动画能一直看着你哦，会跟随你的鼠标，这里直接上图

首先检查博客主目录下面的 package.json里是否有
"hexo-helper-live2d": "^3.0.3",依赖，有的话可以先卸载
使用命令

1	npm uninstall hexo-helper-live2d

之后再安装：

1	npm install --save hexo-helper-live2d

注意： 命令都是在你的博客主目录执行，如果没有安装成功可以直接去其他网站下载，文件夹名为live2d-widget，然后放到主目录的node_modules的文件夹下

安装完成之后检查主目录下package.json是否有安装的model，我这里是"hexo-helper-live2d": "^3.1.1"，如果是文件夹安装的自行添加即可

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.2.0"
  },
  "dependencies": {
    "cheerio": "^0.22.0",
    "hexo": "^4.0.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-external-link": "^1.0.7",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-search": "^2.4.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-helper-live2d": "^3.1.1",
    "hexo-lazyload-image": "^1.0.6",
    "hexo-neat": "^1.0.4",
    "hexo-permalink-pinyin": "^1.1.0",
    "hexo-prism-plugin": "^2.3.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-tag-mmedia": "^0.1.2",
    "hexo-wordcount": "^6.0.1"
  }
}

下载模型
地址：https://github.com/xiazeyu/live2d-widget-models.git

然后放到主目录的node_modules的文件夹下即可

这里我进行了排雷，选出以下好看的模型，目前发现只有作业妹能发出叫声和讲话

live2d-widget-model-chitose-站街男
live2d-widget-model-epsilon2_1-站街女
live2d-widget-model-haruto-小男生
live2d-widget-model-hibiki-御姐
live2d-widget-model-hijiki-黑猫
live2d-widget-model-izumi-小姐姐
live2d-widget-model-koharu-小女生
live2d-widget-model-miku-初音未来
live2d-widget-model-shizuku-作业妹
live2d-widget-model-tororo-白猫
live2d-widget-model-tsumiki-绿头女
live2d-widget-model-unitychan-黄头卡通女
live2d-widget-model-wanko-小狗狗
live2d-widget-model-z16-小护士

注意： 不懂为啥，但是每次安装完hexo插件，模型就会消失，这点要注意需要重新放入文件夹

配置博客主目录配置文件，_config.yml

live2d:
  # 是否开启
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-epsilon2_1  # 模板目录，在node_modules里
  # 显示位置和大小
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  # 是否在手机进行显示

解决live2d和busuanzi不蒜子计数冲突

首先是将不蒜子的js插件保存到本地，我的主题中位于\themes\hexo-theme-matery\source\libs\others\busuanzi.pure.mini.js。如果使用的是来自外网的js文件，也请下载到本地。
将js文件更改为如下：

var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};

操作其实就是把其中的b.style.display="none"中none去掉。

自定义相册

修改原因

matery主题原有的相册效果不佳，原因在于全部采用平铺式，完全没有分类，这个对比一下你自己的相册就知道，这里我们的目的是要做出类似QQ相册的感觉，可以进行分类

注意： 本教程的图片全部为图床，非本地，图床采用gitee

新建相册目录

执行下面的命令：

1	hexo new page galleries

然后到站点根目录的source目录下找名称为 galleries 的目录，打开目录下的 **index.md ** 文档，在原有基础上添加一下配置：

1 2	type: "galleries" layout: "galleries"

紧接着，在主题配置文件的menu属性添加关于相册的菜单

1
2
3

相册:
  url: /galleries 
  icon: fas fa-image

如果需要添加到二级菜单，添加格式为：

1
2
3

- name: 相册
  url: /galleries 
  icon: fas fa-image

添加ejs文件和css文件

首先新建gallery.css，填写的代码内容如下：

.gallery-wrapper{
  padding-top: 30px;
}
.gallery-wrapper .gallery-box{
  padding: 5px !important;
}

.gallery-wrapper .gallery-item {
  display: block;
  overflow: hidden;
  background-color: #fff;
  padding: 5px;
  padding-bottom: 0;
  position: relative;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}

.gallery-cover-box{
  width: 100%;
  padding-top: 60%;
  text-align: center;
  overflow: hidden;
  position: relative;
  background: center center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.gallery-cover-box .gallery-cover-img {
  display: inline-block;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.gallery-item .gallery-name{
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #666;
  margin: 0;
}

.waterfall {
  column-count: 3;
  column-gap: 1em;
}
.photo-wrapper{
  padding-top: 20px;
}
.photo-item {
  display: block;
  padding: 10px;
  padding-bottom: 0;
  margin-bottom: 14px;
  font-size: 0;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  background: white;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}
.photo-item img {
  width: 100%;
}
.photo-item .photo-name{
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #dddddd;
}

/*适配移动端布局*/
@media only screen and (max-width: 601px) {
  .waterfall {
    column-count: 2;
    column-gap: 1em;
  }
}

然后保存，将此文件放在主题目录下，路径为 matery/source/css。

自定义修改

主要需要增加 galleries.ejs 和 gallery.ejs 文件并修改几处地方，新建galleries.ejs文件，添加以下代码：

galleries.ejs这个文件主要修改，相册背景目录地址的

<link rel="stylesheet" href="/css/gallery.css">

<%- partial('_partial/bg-cover') %>

<main class="content">
    <div class="container">
        <% if (site.data && site.data.galleries) { %>
        <% var galleries = site.data.galleries; %>
        <div class="gallery-wrapper row">
            <% for (var i = 0, len = galleries.length; i < len; i++) { %>
            <% var gallery = galleries[i]; %>
            <div class="col s6 m4 l4 xl3 gallery-box">
                <a href="./<%- gallery.name %>" class="gallery-item" data-aos="zoom-in-up">
                     <div class="gallery-cover-box" style="background-image: url(你的链接<%- gallery.cover%>);">
                    </div>
                    <p class="gallery-name">
                        <%- gallery.name %>
                    </p>
                </a>
            </div>
            <% } %>
        </div>
        <% } %>
    </div>
</main>

注意：在你的链接这填写你相册图床的根网址，解释一下什么叫根网址，例如gitee一张图片的网址如下：https://gitee.com/abcdfg/images/raw/master/xxx.jpg，其实建立图床的时候是建立在 images 仓库下的，那后面的 /raw/master/ 是分支，就不算根网址，具体要自己去试试，这里仅以gitee为例，所以这里你的链接要填：

https://gitee.com/abcdfg/images/

将此文件放在 matery/layout 目录下，同时再此目录下接着新建gallery.ejs文件，添加以下代码：

galleries.ejs

<link rel="stylesheet" href="/css/gallery.css">
<link type="text/css" href="/libs/fancybox/jquery.fancybox.css" rel="stylesheet">
<link type="text/css" href="/libs/justifiedGallery/justifiedGallery.min.css" rel="stylesheet">

<%- partial('_partial/post-cover') %>
<%
let galleries = [];
if (site.data && site.data.galleries) {
    galleries = site.data.galleries;
}
var pageTitle = page.title;
function getCurrentGallery(galleries, pageTitle) {
    for (let i = 0; i < galleries.length; i++) {
        if (galleries[i]['name'] == pageTitle) {
            return galleries[i];
        }
    }
}
var currentGallery = getCurrentGallery(galleries, pageTitle)

var photos = currentGallery.photos;

let imageStr = ''

for (var i = 0, len = photos.length; i < len; i++) {
    var photo = photos[i];

     imageStr += "<a href=\"你的链接" + photo + "\"" +
            "     class=\"photo-item\" rel=\"example_group\"" +
            "     data-fancybox=\"images\">" +
            "      <img src=\"你的链接" + photo + "\"" +
            "       alt=" + photo + ">\n" +
            "    </a>"

}
%>

<div class="container">
    <div class="photo-wrapper">
        <% if (page.password ) { %>

            <script src="/js/crypto-js.js"></script>
            <script src="/js/gallery-encrypt.js"></script>
            <div id="hbe-security">
                <div class="hbe-input-container">
                    <input type="password" class="hbe-form-control" id="pass"  placeholder="请输入密码查看内容"/>
                    <a href="javascript:;" class="btn-decrypt" id="btn_decrypt">解密</a>
                </div>
            </div>
            <div  id="mygallery">
                <div class="waterfall" id="encrypt-blog" style="display:none">
                    <%- aes(imageStr, page.password) %>
                </div>
            </div>
        <% } else { %>
            <div class="waterfall" id="encrypt-blog">
                <%- imageStr %>
            </div>
        <% } %>
    </div>
</div>

<script src="/libs/fancybox/fancybox.js"></script>
<script src="/libs/justifiedGallery/justifiedGallery.min.js"></script>
<script>

  $("a[rel=example_group]").fancybox();
  $("#encrypt-blog").justifiedGallery({margins: 5, rowHeight: 150});

</script>

同样需要在你的链接填写根网址，根网址见上，这里要修改两处

添加相册json配置文件

在根目录urces/_data/下新建一个 galleries.json 的文件，json 代码如下：

[
  {
    "name": "相册名字",
    "cover": "raw/master/图片名字",
    "description": "相片描述",
    "photos": [
      "raw/master/p1.png",
      "raw/master/p2.png",
      "raw/master/p3.png",
      "raw/master/p4.png"
    ]
  }
]

这里目录需要跟上分支，例如raw/master/(仅限码云)，其他没测试过

字段含义：

name是相册标题
cover是封面图片
description是相册介绍
photos是图片列表

配置文件建好了之后还没完，只剩最后一个步骤了，在galleries目录下建立对应的相册名称目录和文件，比如我这个相册需要新建名称为 2020 目录，然后下面再分别新建index.md文件，文件内容为：

---
title: 2020
date: 2020-02-19 10:51:50
type: "gallery"
layout: "gallery"
---

安装插件(巨坑)

到以上步骤，其实编译一下，图片应该可以显示了，但是布局丑陋，也没法放大，是因为还差了两个插件，这也是最蛋疼的步骤，就是这个相册的显示效果依赖jquery插件，分别是fancybox和justifiedGallery，一个是保证图片按照自身比例布局，一个是实现点击放大效果。

两个插件版本会发生冲突，所以网上的一些教程你复制过来不能用，报错，多半这个原因，经过大量测试，fancybox插件用v1.4.3版本，justifiedGallery可以用最新版本，我用的v4.0.0

然后把这两个插件文件放到主题\source\libs文件夹下，例如我的：C:\Users\user\Desktop\lovelijunyi\themes\hexo-theme-matery\source\libs

注意：另外这两个插件都有普通和min两个版本，必须选择min的版本

加密相册

首先在站点配置文件下添加下面的配置：

1
2
3

#博文加密  npm install --save hexo-blog-encrypt
encrypt: 
  enable: true

在主题目录下新建一下目录和文件，scripts/helpers/encrypt.js，encrypt.js内代码如下：

/* global hexo */
'use strict';
const CryptoJS = require('crypto-js');
hexo.extend.helper.register('aes', function(content,password){
  content = escape(content);
  content = CryptoJS.enc.Utf8.parse(content);
  content = CryptoJS.enc.Base64.stringify(content);
  content = CryptoJS.AES.encrypt(content, String(password)).toString();

  return content;
});

然后再主题目录的 source/css.my.css 内添加以下代码：

.hbe-input-container  .btn-decrypt{
  display: inline-block;
  vertical-align: top;
  width: 120px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  color: #ffffff;
  background-color: #3f90ff;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

这里同样需要插件，如下两个，新建放到对应文件夹即可

matery/source/js/crypto-js.js：

https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.1/source/js/crypto-js.js
matery/source/js/gallery-encrypt.js：

https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.1/source/js/gallery-encrypt.js

在新建的 index.md 文章内添加 password属性，后面写上你的密码即可，然后执行命令，查看本地效果即可

注意事项

加密相册需要用到 crypto-js.js 文件，这个文件是安装 hexo-blog-encrypt 插件，然后发布后才会生成的，如果不想安装这个插件，则需要手动安装，命令如下：

1	npm install crypto-js

然后在插件目录下找到 crypto-js.js 文件，复制出来放到主题目录下的 source/js 目录下，引用路径也要改一下。

当然你也可以用我的，这些加密所需的文件在搭建相册页面时，我已经集成到文件里了。都在上面提到了。

增加载入动画

转跳页面增加加载动画

主目录下新建一个文件夹，名为scripts，紧接着在新建的文件夹下新建一个名为loading-pages的js文件，然后再这个js文件填入下面的代码：

/* global hexo */
"use strict";
hexo.extend.filter.register('after_render:html', function (htmlContent) {
     const injectHead =
 `<style type="text/css" lang="css">
    #loading-container{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
        text-align: center;
        /* loader页面消失采用渐隐的方式*/
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        -o-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }
    .loading-image{
        width: 120px;
        height: 50px;
        transform: translate(-50%);
    }

    .loading-image div:nth-child(2) {
        -webkit-animation: pacman-balls 1s linear 0s infinite;
        animation: pacman-balls 1s linear 0s infinite
    }

    .loading-image div:nth-child(3) {
        -webkit-animation: pacman-balls 1s linear .33s infinite;
        animation: pacman-balls 1s linear .33s infinite
    }

    .loading-image div:nth-child(4) {
        -webkit-animation: pacman-balls 1s linear .66s infinite;
        animation: pacman-balls 1s linear .66s infinite
    }

    .loading-image div:nth-child(5) {
        -webkit-animation: pacman-balls 1s linear .99s infinite;
        animation: pacman-balls 1s linear .99s infinite
    }

   .loading-image div:first-of-type {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
        animation: rotate_pacman_half_up .5s 0s infinite;
    }
    .loading-image div:nth-child(2) {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
        animation: rotate_pacman_half_down .5s 0s infinite;
        margin-top: -50px;
    }
    @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

    @keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}


    .loading-image div:nth-child(3),
    .loading-image div:nth-child(4),
    .loading-image div:nth-child(5),
    .loading-image div:nth-child(6){
        background-color: #49b1f5;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        transform: translateY(-6.25px);
        top: 25px;
        left: 100px;
    }
    .loading-text{
        margin-bottom: 20vh;
        text-align: center;
        color: #2c3e50;
        font-size: 2rem;
        box-sizing: border-box;
        padding: 0 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    @media only screen and (max-width: 500px) {
         .loading-text{
            font-size: 1.5rem;
         }
    }
    .fadeout {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /* logo出现动画 */
    @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
    @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
 </style>
 <script>
(function () {
    const loaded = function(){
       setTimeout(function(){
            const loader = document.getElementById("loading-container");
            loader.className="fadeout" ;//使用渐隐的方法淡出loading page
            // document.getElementById("body-wrap").style.display="flex";
            setTimeout(function(){
                loader.style.display="none";
            },1000); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
 </script>`;
     const injectBody = `
 <div id="loading-container">
     <p class="loading-text">玩命加载中 . . . </p> 
     <div class="loading-image">
         <div></div>
         <div></div>
         <div></div>
         <div></div> 
         <div></div>
     </div>
 </div>`;
     if (/<\/head>/gi.test(htmlContent)) {
         let lastIndex = htmlContent.lastIndexOf('</head>');
         htmlContent = htmlContent.substring(0, lastIndex) + injectHead + htmlContent.substring(lastIndex, htmlContent.length);
     }
     if (/<body>/gi.test(htmlContent)) {
         let index = htmlContent.indexOf('<body>');
         htmlContent = htmlContent.substring(0, index) + injectBody + htmlContent.substring(index, htmlContent.length);
     }
     return htmlContent;
 }, 1);

图片增加加载动画(懒加载)

安装

1	npm install hexo-lazyload-image --save

之后在站点配置文件config下添加下面的代码，同时需要在images文件夹下放一张loading.gif的图片

# 图片懒加载
lazyload:
  enable: true # 是否开启图片懒加载
  onlypost: false # 是否只对文章的图片做懒加载
  loadingImg: /images/loading.gif

如果在 markdown 或 html 中指定 img 标记的属性，也可以禁用延迟进程

1	<img no-lazy src="abc.png" />

优化冲突

查看大图，发现全部为loading加载图，原因是因为懒加载插件与其他插件发生了冲突。

解决办法：修改主题文件下的matery.js，在108行左右添加以下代码：

1
2
3

$(document).find('img[data-original]').each(function(){
    $(this).parent().attr("href", $(this).attr("data-original"));
});

加完后如下

。。。        
$('#articleContent, #myGallery').lightGallery({
            selector: '.img-item',
            // 启用字幕
            subHtmlSelectorRelative: true
        });

        // 懒加载防止插件冲突
        $(document).find('img[data-original]').each(function(){
        $(this).parent().attr("href", $(this).attr("data-original"));
        });

        // progress bar init
        const progressElement = window.document.querySelector('.progress-bar');
        if (progressElement) {
            new ScrollProgress((x, y) => {
                progressElement.st
。。。

修复主页logo

点击首页logo不是跳转到首页，而是查看logo图片，解决办法如下：

修改主题文件夹下layout/_partial/header.ejs文件，原代码为：

<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
         <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
         <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
         <% } %>
         <span class="logo-span"><%- config.title %></span>
    </a>
</div>

修改为：

<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
        <div>
            <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
            <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
            <% } %>
            <span class="logo-span"><%- config.title %></span>
        </div>
    </a>
</div>

优化缓存

其实第一次加载后本地都是有缓存的，如果每次都把loading显示出来就不那么好看
所以我们需要对插件进行魔改，让图片稍微提前加载，避开加载动画
打开 Hexo根目录>node_modules > hexo-lazyload-image > lib > simple-lazyload.js 文件

第9行修改为：

1 2	// 懒加载优化 && rect.top <= (window.innerHeight +240 \|\| document.documentElement.clientHeight +240)

作用：提前240个像素加载图片；当然这个值也可以根据自己情况修改

参考：https://blog.sky03.cn/posts/42790.html#toc-heading-5

关闭音乐的歌词显示

默认音乐播放器会显示歌词，影响观感，这里说明如何关闭

找到，主题下的一个css文件，APlayer.min.css，例如我的是在这个目录下：C:\Users\user\Desktop\我的博客\lovelijunyi\themes\hexo-theme-matery\source\libs\aplayer
打开后搜索.aplayer-lrc{display:block}
将block改为none，即为.aplayer-lrc{display:none}

让博客支持脑图 (思维导图)

需要先安装插件

1	npm install hexo-simple-mindmap

mindmap 是思维导图渲染的标志，画板尺寸有三种规格：

mindmap-sm 小号尺寸的画板
mindmap-md 中号尺寸的画板
mindmap-lg 大号尺寸的画板

思维导图的内容和层级关系通过无序列表表示，支持基本的文字和超链接。

示例代码如下

{% pullquote mindmap mindmap-md %}

- [在 Hexo 中使用思维导图](https://hunterx.xyz/use-mindmap-in-hexo.html)
  - 前言
  - 操作指南
    - 准备需要的文件
    - 为主题添加 CSS/JS 文件
  - 使用方法

{% endpullquote %}

最终的效果

在 Hexo 中使用思维导图

前言

操作指南

准备需要的文件

为主题添加 CSS/JS 文件

使用方法

优化文章永久链接

先解释一下什么叫文章永久链接，就是当时转发你网站的文章时会生成的一个链接。例如

1	https://xxxxx.gitee.io/posts/f295.html

目前hexo主要采用以下两种文章永久链接

年月和拼音生成永久链接

采用年月和文章拼音组合，这种好处是易读，缺点很明显，太长

先看看效果

1	https://lovelijunyi.gitee.io/2020/04/10/photoshop/ps-xuan-qu-yu-kou-tu-pian/

安装插件

1	npm i hexo-permalink-pinyin --save

然后在站点根目录config中设置两处，一个是修改permalink

1	permalink: :year/:month/:day/:title/

另外一个是添加配置permalink_pinyin

1
2
3

permalink_pinyin:
  enable: true #是否开启
  separator: '-'   # default: '-'链接符

使用编码生成永久链接

采用编码形式，这种缺点是可读性差，优点很明显，链接很短

先看看效果

1	https://lovelijunyi.gitee.io/posts/f295.html

安装插件

1	npm install hexo-abbrlink --save

然后在站点根目录config中设置两处，一个是修改permalink

1	permalink: posts/:abbrlink.html

在根目录config添加如下配置

1
2
3

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

不同算法组成的链接有如下几种，挑选自己喜欢的

crc16 & hex
https://lovelijunyi.gitee.io/posts/66c8.html

crc16 & dec
https://lovelijunyi.gitee.io/posts/65535.html

crc32 & hex
https://lovelijunyi.gitee.io/posts/8ddf18fb.html

crc32 & dec
https://lovelijunyi.gitee.io/posts/1690090958.html

修改文章发布统计图的时间区间

主要是修改这个图的时间区间，默认区间是一年(开始时间就是当前年月往前一年)，我要修改为3个月

主要修改themes/matery/layout/_widget/post-charts.ejs，大约在39行左右，源文件的代码为：

1	var startDate = moment().subtract(1, 'years').startOf('month');

说明：

startDate变量为开始时间，也就是文章发布统计图中X轴中的开始时间
subtract(Number, String)，这里表示一年
startOf(‘month’)，这里表示当月

简单说明：这串代码的意思就是，起始时间当前时间往前推1年，假设现在是2020的4月，往前推一年就是2019的4月，那么统计区间就等是[2019.4，2020.4]

修改方法：

一般来说可以把时间区间改成3个月，假设现在是2020的4月，往前推2个月就是2019的2月，先要把，years改成months，再改数字，如下

1	var startDate = moment().subtract(1, 'years').startOf('month');

改为：

1	var startDate = moment().subtract(2, 'months').startOf('month');

这样区间就是[2020.2，2020.4]，当然这串代码会一直统计进三个月的文章数量，推广一下就是

文章的统计区间就是[2020.2+n，2020.4+n]，n是月数。

自定义鼠标样式

建议大家下载鼠标指针样式的格式为ico格式，大小为16 * 16，或者24 * 24的。

首先将鼠标样式下载到本地，推荐大家一个网站，可以免费下载，不过需要登录一下：网址为：https://www.easyicon.net/

以我的为例，我将鼠标指针样式放在了主题文件夹下的medias目录下，然后打开主题文件夹下的my.css文件，添加内容如下：

*{
    cursor: url("/medias/cursor1.ico"),auto!important;
}
:active{
    cursor: url("/medias/cursor2.ico"),auto!important;
}

然后在本地运行查看效果即可

附录1 目录结构详解

我将详细介绍hexo+matery主题的每个文件夹和文件的作用，未来不断更新，对目录结构和文件不熟悉的可以参考。

主目录

我的hexo根目录位置：C:\Users\user\Desktop\我的博客\lovelijunyi

目录部分

deploy_git，与git是git相关内容，如果无法git到仓库，需要检查git文件夹中配置
scaffolds，存放的是默认生成md文件的配置，其中post.md是默认生成文章的配置
scripts，扩展脚本目录，这里可以自定义一些javascript脚本存放的是页面加载脚本(非默认)
source，hexo源码目录，是核心目录，下面详解
themes，是主题目录，下面详解
packages，是存放看板动画模型的(非默认)
public，是通过hexo g编译出来的最终网页文件，也是部署到github上的文件，输出的静态网页内容目录
node_modules，是hexo的一些库文件

文件部分

_config.yml，是hexo的全局配置文件(核心配置文件)，一些插件安装后都需在此文件开启
CNAME，可配置个人域名
package.json，应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮
main.py，个人快速执行脚本(非默认)

source目录

├── _data              # 存放友链的friends.json和相册的json
├── _posts             # 所有文章就在这里
├── 404                # 404相关
├── categories         # 归档页面
├── contact            # 关于页面
├── friends            # 友联页面
├── galleries          # 相册页面
├── images             # 图片页面，其他图，懒加载图存放位置
├── media              # 多媒体
├── tags               # 标签页
├── 404.md             # 404崩溃页面
└── CANME

themes目录

hexo-theme-matery主题为例，_config.yml是主题配置文件，非常重要

├── languages          # 多语言
|   ├── default.yml    # 默认语言
|   └── zh-CN.yml      # 中文语言
├── layout             # 布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _partial       # 局部的布局，此目录下的*.ejs是对头尾等局部的控制
|   └── _widget        # 小挂件的布局，页面下方小挂件的控制
├── source             # 源码
|   ├── css            # css源码 
|   |   ├── _base      # *.styl基础css
|   |   ├── _partial   # *.styl局部css
|   |   ├── fonts      # 字体
|   |   ├── images     # 图片
|   |   └── style.styl # *.styl引入需要的css源码
|   ├── fancybox       # fancybox效果源码
|   └── js             # javascript源代码
├── _config.yml        # 主题配置文件
└── README.md          # 用GitHub的都知道

layout目录

目录部分

_partial主要修改文件

1
2
3

bg-cover-content.ejs       # 主页背景图相关，banner图切换，打字机效果加字等
footer.ejs				  # 页脚配置
social-link.ejs            # 修改社交链接，微信，qq，微博等

文件

404.ejs                 # 404页面
about.ejs               # 关于我页面，个人简历
archive.ejs
categories.ejs
category.ejs
contact.ejs
douban.ejs				# 豆瓣插件
friends.ejs
galleries.ejs			# 自定义相册
gallery.ejs				# 自定义相册
index.ejs
layout.ejs				# 比较重要，我的天气，动态标签，鼠标点击特效等都在这开启
post.ejs
tag.ejs
tags.ejs

重点是这个layout.ejs，几乎所有自定义特效都在这个文件开启

source目录

存放主题源码

├── css            #css源码 
|   ├── gallery.css      # 相册css
|   ├── gitment.css   
|   ├── matery.css     	 # 主页的css相关调整，字体调整，主题色修改
|   ├── my-gitalk.css      
|   └── my.css           # hexo-filter-github-emojis
├── js             	  	# javascript源代码，自定义js
|   ├── click.js      	# 鼠标点击特效
|   ├── crypto-js.js  	# 加密相关
|   ├── cursor.js     	# 雪花背景特效
|   ├── fireworks.js    # 鼠标点击烟花特效
|   └── gallery-encrypt.js          # 相册加密
├── libs         # 库文件，fancybox效果等插件需在这里打开
├── medias       # 主题内用到的背景图，图标，打赏图等都在这里
└── favicon.png            # 网页标签图

js目录比较重要，所有自定特效，鼠标点击特效，背景特效在这里定义

附录2 hexo基础命令

本文参考部署 Hexo，主要说明hexo的相关命令，方便查看

编译指令

这里用了合并写法

1	hexo clean && hexo g

本地部署

部署好可以在http://localhost:4000调试查看，这是本地的

hexo s

上传部署

这里要说一下的原因是因为，上面的指令很多采用了简写，会发生冲突，尤其hexo deploy会和豆瓣部署冲突，所以建议这里不要简写

1	hexo deploy

简写

hexo d

安装插件

1	npm install 插件名 --save

卸载插件

1	npm uninstall 插件名