[三万字教程]基于Hexo的matery主题搭建博客并深度优化一站式完全教程_

All in one 一站式Hexo配置优化教程！

• 本文很长，特别长，如果你遇到了什么问题，可以尝试搜索本文，你很可能有收获！ CtRL + F
• 欢迎光临博主的独立博客 夜法之书
• 本文就教你搭建一个美观实用的博客系统，步骤极尽详细！
• 本文中提到的大量特性，已经被博主提交到matery主题develop分支，提交记录见Commit。所以下面很多特性已经不用自己修改了，可以直接使用。
• 参考列表放到了最后一篇末尾，去找找看，里面能发现一些好东西。

最终效果如下图所示！

• 支持离线访问。
• 支持浅色/深色模式。
• 支持文章RSS订阅，并支持文章分类订阅。
• 看板娘文字功能提示。
• 支持新博文订阅通知，右下角小铃铛点击订阅！ chrome用户可能由于网络原因链接不到Google的服务器而看不到这个小铃铛。edge 和 Firefox 用户可以正常订阅。

service worker 实现的渐进式App，不仅可以离线浏览，还可以加速缓存访问！

深色模式，夜晚保护您的视力！

RSS Hub 和 TTRSS 私有部署实现订阅。

配合浏览器扩展 RSSHub Radar (opens new window)和 移动端辅助 App RSSBud (opens new window)(iOS) 与 RSSAid (opens new window)(Android) 食用。

• 对所有菜单和常用按钮做了文字功能提示。
• 支持看板娘模型切换，服装切换，某些模型还有语音互动！
• 看板娘还可以自定义时间提示，特殊节日提示等等。参考 Hexo博客个性定制篇中来完成吧。

经过多次优化，新版看板娘资源异步加载体积大拖累的性能分数。其它几乎都是满分了！

大量使用本地缓存，牺牲了第一次加载的体积，保证了第二次打开几乎都是使用缓存，异步加载对第一次渲染速度影响不大，但可以极大的提高第二次来自后续的访问速度！

Hexo系列 HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

• Hexo Docker环境与Hexo基础配置篇

• hexo博客自定义修改篇

• hexo博客网络优化篇

• hexo博客增强部署篇

• hexo博客个性定制篇

• hexo博客常见问题篇

• Hexo Markdown以及各种插件功能测试

• markdown 各种其它语法插件
• latex公式支持
• mermaid图表
• plant uml图表
• URL卡片
• bilibili卡片
• github卡片
• 豆瓣卡片
• 插入音乐和视频
• 插入脑图

Hexo Docker环境使用篇

Docker 简介：

Docker 是一种轻量级的虚拟机环境，可以隔离主机的运行环境，内核公用主机的，运行库和环境是 Docker 私有的。运行 Docker 程序只比主机直接运行程序性能损失微乎其微。使用 Docker 你可以同时运行各种各样运行库环境而不用担心搞乱你的主机运行库环境！

Docker 运行负载远小于 Vmware 这类虚拟机， Vmware 需要模拟对应的CPU指令，再虚机运行一个虚拟机自己的内核，再这个虚拟机内核之上，再运行虚拟机的运行库和程序。比 Docker 多了一个内核模拟和运行，Cpu 和内存开销大增！

Docker 版 hexo 环境一键部署

博主开源定制，推荐使用！省去您大量环境配置时间。

使用Hexo Docker之前需要Docker 环境，请参阅后文Docker安装方法

• docker-hub
• Github-hexo

使用推荐Docker来搭配本文，阅读使用，将更省事，方便，快捷。hexo环境一键搞定！

Docker一键安装

docker create --name=hexo \
-e HEXO_SERVER_PORT=4000 \
-e GIT_USER="17lai" \
-e GIT_EMAIL="[email protected]" \
-v /mnt/blog.17lai.site:/app \
-p 4000:4000 \
bloodstar/hexo

hexo web 后台写作

基于 hexo-admin 实现，具体配置实现方法见后文。

最终效果如下图所示。blog.17lai.fun 访问blog， 添加后缀 admin 访问 hexo 后台。

使用前面提到的 hexo docker ，启动运行 hexo docker 后，非自动安装 hexo-admin 以及常用插件，你也可以自定义安装你虚幻的插件， vi /app/useRun.sh。

配置 hexo-admin 根目录下_config.yml:

admin:
  username: myfavoritename #用户名
  password_hash: be121740bf988b2225a313fa1f107ca1 #密码
  secret: a secret something # secret is used to make the cookies secure
  deployCommand: '/app/tools/cide.sh'  # 自定义的部署脚本，在 hexo admin 的 deploy 标签页 deploy 按钮点击调用

配置 post metadata 根目录下_config.yml:

# add and edit your own post metadata with the admin interface
metadata:
  author_id: defaultAuthorId
  language:

ssh key 部署

Docker会自动随机生成ssh key 在 /app/.ssh 目录下面。自动部署请把ssh key添加到github 等平台。

Github详细教程

1. 将SSH 公钥复制到剪贴板。 ...
2. 在任何页面的右上角，单击您的个人资料照片，然后单击Settings（设置）。
3. 在用户设置侧边栏中，单击SSH and GPG keys（SSH 和GPG 密钥）。
4. 单击New SSH key（新SSH 密钥）或Add SSH key（添加SSH 密钥）。

SSH 进入docker

docker exec -it hexo /bin/bash

然后就可以正常运行hexo的各种命令了，是不是非常简单？ 快来试试吧。

远程 SSH 访问Docker

推荐使用SecurtCRT 来远程访问你的Docker。

自定义用户自动运行脚本

用户可以在这里添加自动配置，自动安装插件，等各种启动docker运行的命令。

它将在Docker启动完成后自动调用运行！

vi /app/useRun.sh

反向代理 Hexo Docker

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。

• 一些测试可能需要ssl支持，那么用nginx来反向代理一下，就可以在本地愉快的测试ssl加密功能了。

• 访问docker，需要 192.168.0.100:4000这样数字ip + 端口号的方式不觉得很丑陋，而且需要开大量的端口，使用nginx反向代理，可以直接使用域名访问。

• 如果你想使用blog.17lai.fun这样的域名访问你的 docker 里面运行的博客，请参考下文。

Nginx也使用docker来运行，blog.17lai.fun为本地域名，修改本地hosts dns信息来访问。

docker compose 配置

nginxweb:
  image: bloodstar/nginx-purge
  container_name: "nginxweb"
  hostname: nginxweb
  ports:
    - "80:80"
    - "443:443"
  restart: always
  volumes:
    # ${USERDIR}为你docker运行目录
    - ${USERDIR}/nginx/conf.d:/etc/nginx/conf.d:ro
    - ${USERDIR}/nginxproxy/certs:/etc/nginx/certs:ro
    - ${USERDIR}/nginx/nginx.conf:/etc/nginx/nginx.conf:ro

• bloodstar/nginx-purge

nginx配置

文件 blog.conf ，配置文件放到${USERDIR}/nginx/conf.d目录中

upstream blog {
    server hexo:4000;
}

server {
    listen 80;
    listen 443 ssl http2;
    server_name  blog.17lai.fun;

    ssl_certificate /etc/nginx/certs/17lai.pem;
    ssl_certificate_key /etc/nginx/certs/17lai.key;

    ssl_session_cache shared:aria2SSL:10m;
    ssl_session_timeout  30m;
    #ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    
    access_log /var/log/nginx/blog.17lai.fun_access.log combined;
    error_log  /var/log/nginx/blog.17lai.fun_error.log;
    
    keepalive_requests 10000;
    
    location / {
        #proxy_redirect off;
        proxy_pass http://blog;

        proxy_buffering off;
        
        add_header X-Cache-Status $upstream_cache_status;
        proxy_set_header Host $http_host;

        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Ssl     on;
        proxy_set_header  X-Forwarded-For     $proxy_add_x_forwarded_for;      
        proxy_set_header  X-Frame-Options     SAMEORIGIN;
        
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    } 
}

Windows DNS修改

windows hosts文件路径为： C:\Windows\System32\drivers\etc\HOSTS

管理员权限用文本编辑器打开这个文件并添加 192.168.0.100 blog.17lai.fun，然后，你就可以在本地浏览器中使用域名访问你的blog了！

Linux DNS 修改

Linux hosts 文件路径为： /etc/hosts

用文本编辑器或者命令行工具vim打开这个文件并添加 192.168.0.100 blog.17lai.fun，然后，你就可以在本地浏览器中使用域名访问你的blog了！

# root用户一条指令搞定
echo "192.168.0.100 blog.17lai.fun" >> /etc/hosts

#或者使用 vi 或者 vim
vi /etc/hosts

获取 SSL 证书

• 如果你购买了域名，可以在域名服务商获得免费的ssl证书。
• 自己生成私有证书，使用时需要给本地计算机，浏览器添加你自己的根证书，才能使你的ssl 证书在你自己的浏览器中生效。

使用Hexo Docker之前需要Docker 环境，下面是Docker 环境安装方法。

Centos 安装Docker

X86（一键安装脚本）：

curl -sSL https://get.docker.com/ | sh

Arm：

步骤1

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

步骤2

添加仓库

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

步骤3

安装Docker

sudo yum install docker-ce docker-ce-cli containerd.io

完成安装

步骤4

启动Docker

sudo systemctl start docker

QNAP 安装Docker

在系统应用的AppCenter中找到 Container Station，可以直接点击安装即可。

群晖 安装 Docker

首先要说的是，x86 平台的群晖才能用的上 Docker 套件，因此，ARM 架构平台的群晖只能说非常遗憾了。
　　打开套件中心，在 “所有套件” 中找到 Docker 并安装：

Hexo入门篇

Hexo 通用简明教程

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

前提

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

• Node.js (Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)
• Git
• nmp

安装

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

安装以后，可以使用以下两种方式执行 Hexo：

1. npx hexo
2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用： hexo

echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

升级

后期需要升级的化，进入 blog 目录，先检查更新:

$ npm outdated
Package                  Current  Wanted  Latest  Location
hexo                       3.9.0   3.9.0   4.2.0  hexo-site
hexo-deployer-git          1.0.0   1.0.0   2.1.0  hexo-site
hexo-generator-archive     0.1.5   0.1.5   1.0.0  hexo-site
hexo-generator-category    0.1.3   0.1.3   1.0.0  hexo-site
hexo-generator-feed        1.2.2   1.2.2   2.2.0  hexo-site
hexo-generator-index       0.2.1   0.2.1   1.0.0  hexo-site
hexo-generator-tag         0.2.0   0.2.0   1.0.0  hexo-site
hexo-renderer-ejs          0.3.1   0.3.1   1.0.0  hexo-site
hexo-renderer-marked       0.3.2   0.3.2   2.0.0  hexo-site
hexo-renderer-stylus       0.3.3   0.3.3   1.1.0  hexo-site
hexo-server                0.3.3   0.3.3   1.0.0  hexo-site

修改 package.json 文件，基于 Latest 列内容更新版本号，然后更新并检查版本号：

$ npm install --save

# 检查版本号
$ hexo -v
hexo: 4.2.0
hexo-cli: 3.1.0
......

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

启动网页服务

此时，通过 hexo s 命令即可在本地启动您的博客站点了。

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

接下来将安装主题，配置博客托管平台，实现一键发布并刷新 CDN 缓存。

npm下载加速

安装淘宝镜像， 加NPM

npm config set registry https://registry.npm.taobao.org

安装CNPM

npm install -g cnpm --registry=https://registry.npm.taobao.org

Hexo 日常操作命令

# 进入hexo docker 环境。需要你已经安装了docker环境，并安装了上文提到的hexo docker
docker exec -it hexo /bin/bash
# 运行完这条命令后，你就发现命令提示符变了，你此时进入了一个独立于你的主机运行环境的新的 node + hexo 开发环境了。

# 生成新页面 404
hexo new page 404

# 新增新文章 2022-03-26-blog.17lai.site
hexo new post 2022-03-26-blog.17lai.site

# 清理上次生成的静态网页，可以不运行，但你修改了一些源码后，很可能有各种不生效或错误
hexo clean

# 生成静态网页
hexo g

# gulp调用gulpfile.js压缩静态网页相关代码，减小网页体积
gulp 

# 调用根目录中 _config.yml 文件的deploy配置的参数来部署你的静态网页
hexo d

hexo 目录结构说明

在执行过Hexo deploy命令之后，目录结构新增了.deploy_git，public，.gitignore，如下：

 $ tree -L 2
.
├── .deploy_git
├── node_modules
├── public
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   ├── _posts
│   ├── _drafts
├── themes
├── _config.yml
├── db.json
├── package.json
└── package-lock.json

_config.yml

用来配置博客相关的参数，初始化时自动创建。具体参数设置，可参照 Hexo 配置 文档。

node_modules 和 package.json

都是在初始化时自动创建。

• node_modules用来存储已安装的各类依赖包。
• package.json用来查看 Hexo 的版本以及相关依赖包的版本。

Hexo 会默认安装：

• hexo：主程序
• hexo-deployer-git：实现 git 部署方式
• hexo-generator-archive：存档页面生成器
• hexo-generator-category：分类页面生成器
• hexo-generator-index：index 生成器
• hexo-generator-tag：标签页面生成器
• hexo-renderer-ejs：支持 EJS 渲染
• hexo-renderer-marked：Markdown 引擎
• hexo-renderer-stylus：支持 stylus 渲染
• hexo-server：支持本地预览，默认地址 localhost:4000

新安装的依赖包，也会保存在node_module文件夹下。

scaffold

模板文件夹，初始化时自动创建。包含page，post，draft三种模板，分别对应 页面、要发布的文章、草稿。

themes

主题文件夹，初始化时自动创建。每一个主题，都有一个单独的文件夹。默认主题为 landscape。

source ， public 和 .deploy_git

• source：资源文件夹。用来存放图片、Markdown 文档（文章、草稿）、各种页面（分类、关于页面等）。
• public：将 source 文件夹里的 Markdown 文档，转换成 index.html。再结合主题进行渲染，就是我们最终看到的博客。
• .deploy_git：将 public 文件夹的内容提交到 Github 后生成，内容与 public 文件夹基本一致。

这三者的关系大致是：source -> public -> .deploy_git

• 执行hexo generate，根据 source，更新 public。
• 执行hexo deploy，根据 public，更新 .deploy_git。

常用命令

指令说明

• hexo server #启动本地服务器，用于预览主题。Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。
• hexo server -s #以静态模式启动
• hexo server -p 5000 #更改访问端口 (默认端口为 4000，’ctrl + c’关闭 server)
• hexo server -i IP地址 #自定义 IP
• hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的 public 文件夹
• hexo g #生成静态网页 (执行 $ hexo g后会在站点根目录下生成 public 文件夹, hexo 会将”/blog/source/“ 下面的.md 后缀的文件编译为.html 后缀的文件,存放在”/blog/public/ “ 路径下)
• hexo d #自动生成网站静态文件，并将本地数据部署到设定的仓库(如 github)
• hexo init 文件夹名称 #初始化 XX 文件夹名称
• npm update hexo -g#升级
• npm install hexo -g #安装
• node-v #查看 node.js 版本号
• npm -v #查看 npm 版本号
• git --version #查看 git 版本号
• hexo -v #查看 hexo 版本号
• hexo new page "music" #新增页面music
• hexo new post "文章名称" #新增文章

简写指令

hexo n "我的第一篇文章"` 等价于 `hexo new "我的第一篇文章"` 还等价于 `hexo new post "我的第一篇文章"
hexo p` 等价于 `hexo publish
hexo g` 等价于 `hexo generate
hexo s`等价于 `hexo server
hexo d` 等价于 `hexo deploy
hexo g -d`等价于`hexo generate --deploy

注: hexo clean 没有 简写, git --version 没有简写

Hexo基础配置篇

下载主题

hexo-theme-matery 是一个采用 Material Design 和响应式设计的 Hexo 博客主题，点击 这里 可以查看示例效果。点击 这里 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到 Hexo 的 themes 文件夹中即可。

Docker环境命令

git clone https://github.com/blinkfox/hexo-theme-matery.git /app/themes/matery; 

切换主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

_config.yml 文件的其它修改建议

• 请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。
• 建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
• 如果是中文用户，则建议修改 language 的值为 zh-CN。

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

• 菜单
• 我的梦想
• 首页的音乐播放器和视频播放器配置
• 是否显示推荐文章名称和按钮配置
• favicon 和 Logo
• 个人信息
• TOC 目录
• 文章打赏信息
• 复制文章内容时追加版权信息
• MathJax
• 文章字数统计、阅读时长
• 点击页面的’爱心’效果
• 我的项目
• 我的技能
• 我的相册
• Gitalk、Gitment、Valine 和 disqus 评论配置
• 不蒜子统计和谷歌分析（Google Analytics）
• 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

新建主题必备about、tags、404等页面

新建分类 categories 页

categories 页是用来展示所有分类的页面，如果 source 目录下还没有 categories/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

tags 页是用来展示所有标签的页面，如果 source 目录下还没有 tags/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "tags"

编辑刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

新建留言板 contact 页

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。

新建友情链接 friends 页

friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "https://blog.17lai.site/favicon.png",
    "name": "夜法之书的Blog",
    "introduction": "嵌入式，Linux Kernel&Driver, PT, Docker, Nas等等",
    "url": "https://blog.17lai.site",
    "title": "前去学习"
},{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "https://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果 source 目录下还没有 about/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "about"

编辑刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建404页

新建一个404.md文件

在hexo的souce文件夹下创建一个404.md，之后输入如下内容：

---
title: 404
date: 2019-11-23 21:10:10
type: "404"
layout: "404"
---

然后hexo g生成页面中就有404。只是页面较丑。

404页面美化

下载404特效

点击下载代码:点我去代码出处

移植

放入js文件到主题中

将下载的压缩包解压，会发现里面有两个js文件和一个html页面，重要的就是js文件，将文件移植到主题的source文件的libs文件夹下，需要自己创建一个文件夹，我给文件夹取的名字叫做404。

导入404 js

因为该主题的js文件都是写_config.yml文件里面的，为了规范，也需要将文件的路径写到该文件夹下

如下，之后导入js文件的时候就可以使用404bodymovin和404data来代替了

编辑404.esj

<style type="text/css">
    /* don't remove. */
    .page404-cover {
        /* height: 75vh; */
        height: 88vh;
    }
 
    #svgContainer {
      width: 100%;
      height: 100%;
      background-color: white;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
</style>
 
 
<script src="<%- theme.libs.js.my404bodymovin %>"></script>
<script src="<%- theme.libs.js.my404data %>"></script>
 
<div class="bg-cover pd-header page404-cover">
    <div id="svgContainer"></div>
 
    <script type="text/javascript">
        var svgContainer = document.getElementById('svgContainer');
        var animItem = bodymovin.loadAnimation({
          wrapper: svgContainer,
          animType: 'svg',
          loop: true,
          animationData: JSON.parse(animationData)
        });
    </script>
</div>

现在就移植成功了，使用下面命令上传，之后输入一个错误的页面就可以查看到了

hexo cl && hexo g -d

Tips: 不要再本地试验，本地的时候输入错误的页面不会显示404页面的。

新建友情连接 friends 页（可选的）

friends 页是用来展示友情连接信息的页面，如果 source 目录下还没有 friends/index.md 文件，那么就需要新建一个，命令如下：

hexo new page "friends"

编辑刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[
  {
    "avatar": "https://www.lixl.cn/medias/avatar.jpg",
    "name": "悟尘记",
    "introduction": "人生就是一场修行，上善若水，厚德载物。",
    "url": "https://www.lixl.cn/",
    "title": "前去参观"
  },
  {
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2",
    "name": "Fabric",
    "introduction": "A Blockchain Platform for the Enterprise",
    "url": "https://hyperledger-fabric.readthedocs.io/en/master/",
    "title": "前去学习"
  },
  {
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg",
    "name": "BootCDN",
    "introduction": "稳定、快速、免费的前端开源项目 CDN 加速服务。",
    "url": "https://www.bootcdn.cn/",
    "title": "前去加速"
  }
]

菜单导航配置

配置基本菜单导航的名称、路径url和图标icon.

• 1.菜单导航名称可以是中文也可以是英文(如：Index或主页)
• 2.图标icon 可以在Font Awesome 中查找

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Friends:
    url: /friends
    icon: fas fa-address-book

二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作

1. 在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
2. 在children下创建二级菜单的 名称name,路径url和图标icon.
3. 注意每个二级菜单模块前要加 -.
4. 注意缩进格式

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Music
        url: /music
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image

文章 Front-matter 介绍

Front-matter 选项详解

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

配置选项	默认值	描述
title	Markdown 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 _config.yml 中的 author	文章作者
img	featureImages 中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top	true	推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
hide	false	隐藏文章，如果hide值为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	无	文章标签，一篇文章可以多个标签
keywords	文章标题	文章关键字，SEO 时需要
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 中的一个

注意:

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

以下为文章的 Front-matter 示例。

最简示例

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-10-03 14:25:00
---

最全示例

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-12-30 09:25:00
author: 17lai.site
img: /medias/cover/hexo.jpg
top: true
cover: true
coverImg: /medias/cover/hexo.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Hexo
keywords: Hexo GitHub blog
tags:
  - Hexo
  - Blog
  - GitHub
---

新建文章模板修改

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

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

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

代码高亮

由于 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:

添加文章搜索功能

• 这个插件比广大教程提到的hexo-generator-search插件更加强大和好用！

• matery目前只支持search.xml xml格式的搜索文件！

本主题中还使用到了 hexo-generator-searchdb 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-searchdb --save

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

search:
  path: search.xml
  field: post
  content: true
  format: html

参数含义

• path - file path. By default is search.xml. If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.

• field

  • the search scope you want to search, you can chose:

  • post (Default) - will only cover all the posts of your blog.

  • page - will only cover all the pages of your blog.

  • all - will cover all the posts and pages of your blog.

• content - whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.

• format

  • the form of the page contents, options are:

  • html (Default) - original html string being minified.

  • striptags - original html string being minified, and remove all the tags.

  • raw - markdown text of each posts or pages.

修改页脚

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

修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱的配置，可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改需要的社交链接地址，增加链接可参考如下代码：

<a
  href="https://github.com/blinkfox"
  class="tooltipped"
  target="_blank"
  data-tooltip="访问我的GitHub"
  data-position="top"
  data-delay="50"
>
  <i class="fa fa-github"></i>
</a>

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

• Facebook: fa-facebook
• Twitter: fa-twitter
• Google-plus: fa-google-plus
• Linkedin: fa-linkedin
• Tumblr: fa-tumblr
• Medium: fa-medium
• Slack: fa-slack
• 新浪微博: fa-weibo
• 微信: fa-wechat
• QQ: fa-qq

修改打赏的二维码图片

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

配置文章基本信息

new_post_name: :title.md   # 新文章的文件名称
default_layout: post       # 预设布局
auto_spacing: false        # 在中文和英文之间加入空格
titlecase: false           # 把标题转换为 title case
external_link:             # 在新标签中打开链接
  enable: true             # 在新标签中打开链接
  field:                   # 对整个网站（site）生效或仅对文章（post）生效
  exclude:                 # 需要排除的域名。主域名和子域名如 www 需分别配置	[]
filename_case: 0           # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false       # 显示草稿，默认为：false
post_asset_folder: true    # 启动 Asset 文件夹
relative_link: false       # 把链接改为与根目录的相对位址
future: true               # 显示未来的文章
highlight:                 # 代码块的设置
  enable: false            # 开启代码块高亮
  line_number: false       # 显示行数
  auto_detect: false       # 如果未指定语言，则启用自动检测
  tab_replace:             # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs

配置代码高亮及样式

highlight:                      # 代码块的设置
  enable: false                 # 开启代码块高亮
  line_number: true             # 显示行数
  auto_detect: false            # 如果未指定语言，则启用自动检测
  tab_replace: ''               # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

配置代码的样式

code:
  lang: true     # 代码块是否显示名称
  copy: true     # 代码块是否可复制
  shrink: false  # 代码块是否可以收缩
  break: false   # 代码是否折行

配置是否启用转载限制模块

reprint:
  enable: false   #是否启用“转载规则限定模块”
  default: cc_by

文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

配置文章阅读密码功能

阅读文章的密码验证功能，如要使用此功能请激活该配置项，并在对应文章的 Front-matter 中写上 password 的键和加密后的密文即可。

请注意：为了保证密码原文不会被泄露到网页中，文章的密码必须是通过 SHA256 加密的，这样就不会被破解。

verifyPassword:
  enable: true
  promptMessage: 请输入访问本文章的密码
  errorMessage:  密码错误，将返回主页！

如何一键部署hexo

通过 hexo-deployer-git 插件可以实现一键将博客同时部署到多个 git 仓库中。如同时发布到 github 及 gitee 提供的 pages 服务。安装：

npm install hexo-deployer-git --save

修改 Hexo 根目录下的 _config.yml 文件中的如下内容:

## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: git
    repo: https://gitee.com/lxl80/lxl80.git
    branch: master
    ignore_hidden: false

也可以如本站一样，采用 hexo-deployer-cos-enhanced 插件将静态内容部署到腾讯云对象存储服务中，在 DNS 配置中将境内线路解析到腾讯云 CDN 地址，实现加速。部署完成后会自动刷新被更新文件的 CDN 缓存。

安装：

npm install hexo-deployer-cos-enhanced --save

_config.yml 配置如下:

deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: cos
    bucket: lxl80-130****
    region: ap-beijing
    secretId: AKIDh9****F8FvL
    secretKey: Z3IGiur****QZR3PgjXmlVg
    cdnConfig:
      enable: true
      cdnUrl: https://static.lixl.cn
      bucket: static-130****
      region: ap-beijing
      folder: static
      secretId: AKIDh9****F8FvL
      secretKey: Z3IGiur****QZR3PgjXmlVg

然后通过 hexo g -d 即可实现一键发布，并更新 CDN 缓存。

文章链接转静态短地址（可选的）

如果文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件生成文章时生成中文拼音的永久链接，或者用hexo-abbrlink 生成静态文章链接。以下结合 hexo-abbrlink 生成类似 /yyyy/mmdd+随机数.html 的文章链接地址。

安装命令如下：

npm install hexo-abbrlink --save

• npm下载太慢怎么办？ 修改国内淘宝源加速，戳

在 Hexo 根目录下的 _config.yml 文件中，修改 permalink: ，并在文件末尾新增 abbrlink:配置项：

permalink: :year/:month:day:abbrlink.html

abbrlink:
  alg: crc16 #算法选项：crc16丨crc32
  rep: dec #输出进制：dec为十进制，hex为十六进制

添加 emoji 表情支持（可选的）

Matery主题新增了对 emoji 表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji 表情的生成，把对应的 markdown emoji 语法（::, 例如：:smile:）转变成会跳跃的 emoji 表情，安装命令如下

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

• npm下载太慢怎么办？ 修改国内淘宝源加速，戳

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

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

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

文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：

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

添加 RSS 订阅支持

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

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 文件，说明已经安装成功了。

增加百度统计功能

首先注册百度统计站长版，登陆后点击 新增网站，然后直接输入你的博客地址例如： https://blog.17lai.site，网站域名 和 网站首页 都写这个，网站名称 可以填 我的博客，
行业类别： 博客—空间周边。

然后点击左侧菜单的 代码获取，找到

hm.src = "https://hm.baidu.com/hm.js?……"

问号后的这一段十六进制代码
复制下来，粘贴到 主题配置文件 中的baidu_analytics:后面，注意冒号和值之间要有一个空格，然后将该字段前面的#号删除代表启用此功能。保存后即可

# Add baidu analytics configuration
# 添加 baidu Analytics 配置
baiduAnalytics:
  enable: false
  id: f614xxxxxxxxxxxxxxxx05d25e

Leancloud+Valine打造Hexo个人博客极简评论系统

Leancloud配置

首先访问Leancloud官网https://leancloud.cn/
有Github账号的小伙伴可以用Github账号进行登陆然后绑定邮箱就可以啦！
进入之后点击创建应用

这样我们就创建好啦！

接着点击应用右上角的设置进入设置界面

选择应用key，这样就可以看到我们接下来需要使用到的key

接着进入应用中心绑定你的个人博客域名

Valine配置

然后我们去主题配置文件中进行修改
主题配置文件路径：matery_config.yml
找到以下参数进行修改

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true //打开valine评论功能
  appid: 你的leancloud appid 
  appkey: 你的leancloud appkey 
  notify: false //邮件提醒
  verify: true //评论时是否有验证码，需要在Leancloud 设置->安全中心 中打开
  placeholder: 说点什么吧！ //评论框默认显示
  avatar: hide //评论者的头像,我这里设置的不显示
  guest_info: nick # custom comment header
  pageSize: 10 # pagination size

PS：评论者头像可以进行如下设置

到此，一个极简评论系统就完成啦！

系列教程

全部文章RSS订阅

Hexo系列 HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

• Hexo Docker环境与Hexo基础配置篇

• hexo博客自定义修改篇

• hexo博客网络优化篇

• hexo博客增强部署篇

• hexo博客个性定制篇

• hexo博客常见问题篇

• Hexo Markdown以及各种插件功能测试

• markdown 各种其它语法插件
• latex公式支持
• mermaid图表
• plant uml图表
• URL卡片
• bilibili卡片
• github卡片
• 豆瓣卡片
• 插入音乐和视频
• 插入脑图

Docker系列 Docker 分类 RSS 订阅

• Docker使用简明教程
• 使用jeckett,sonarr,iyuu,qt,emby打造全自动追剧流程
• 为知笔记私有化Docker部署
• Earthly 一个更加强大的镜像构建工具
• 使用 Shell 脚本实现一个简单 Docker
• 如何使用Traefik V2 在Ubuntu20.04 上面来做 Dockers
• 通过IPV6访问Qnap NAS中Docker的服务

笔记系列 Note分类RSS订阅

• 完美笔记进化论

经历了很长时间，使用了各种各样的方案，最终选择了一种相对完美的方式。docker私有部署运行的joplin，使用markdown语法，github作为图床，picgo作为图像自动上传后端，pypora作为MD编辑器，Snipaste作为截图工具。后备gitlab ee selfhost备份，自建图床VPS多线负载均衡。cloudflare partner cdn加速，jsdelivr加速。

• pigo图床搭建与配置
• Joplin教程
• Snipaste截图工具
• Typora 作为Markdown编辑器最强

• Joplin入门指南&实践方案

• Joplin和使用
• Joplin同步与备份
• Joplin导入与导出

• 替代Evernote免费开源笔记Joplin-网盘同步笔记历史版本Markdown可视化

• Joplin安装使用，调用外部编辑器，网盘同步等等

• Joplin 插件以及其Markdown语法。All in One!

• Joplin简明教程
• markdown语法简明教程

• Joplin 插件使用推荐

• 教你用各种插件打造一个强大的笔记工具。

• 为知笔记私有化Docker部署

• 如何部署自己私有的为知笔记。
• 其实博主更推荐私有部署joplin

Gitbook使用系列 Gitbook分类RSS订阅

• GitBook+GitLab撰写发布技术文档-Part1:GitBook篇

• GitBook+GitLab撰写发布技术文档-Part2:GitLab篇

• 自己动手制作电子书的最佳方式（支持PDF、ePub、mobi等格式）

Gitlab 使用系列 Gitlab RSS 分类订阅

• Gitlab的安装及使用教程完全版
• 破解Gitlab EE
• Gitlab的安装及使用
• CI/CD与Git Flow与GitLab