Hexo
前言
建一个简洁的 hexo 真的非常简单快捷，但是加入一个一个插件的时候，就感觉有太多的坑，途中只解决了小部分问题，都在下面列出来了，还有很多问题，你所见博客中很多奇怪的页面，很多我都已经注意到了，但是就是无法解决，如果你恰巧看到我的博客的一些不合理之处，又知道如何解决，欢迎邮我评我issue我，感激不尽。
关于环境、插件
建博客的时候，都已经知道需要Node.js、Hexo、git、梯子、github帐号，但是使用 npm 安装插件时，即使使用了梯子加淘宝镜像 cnpm 加 yarn ，仍然有部分插件经常安装错误。直到我使用了 github 的 codespace ，我才发现原来使用 npm 安装插件没那么难， codespace 使用本地 VS Code 打开，与打开本地仓库几乎一样流畅，甚至不用配置ssh密钥，而且执行 hexo deploy 时，几乎不会因为连接不上报错，极力推荐。
PWA
让 Hexo 支持 PWA 非常简单，但稍有不慎，真的可以采坑无数。
看了很多很多帖子，讲得最多的就是使用 hexo-pwa 插件，但是这个插件很久没更新了，仅支持 hexo@4.1.1 ，使用新版 hexo 请直接放弃 hexo-pwa
hexo-workbox 插件，这个中途试过一次没成功，不知道是不是版本问题。
hexo-offline 插件，这个插件是最简单的，安装成功后零配置使用，我在 hexo@6.3.0 上是成功使用的，但是在本地 hexo s 后浏览 http://localhost:4000/ 并不成功，前后尝试了好几天，才发现，原来就本地无效，在 hexo deploy 后在浏览器中打开 github 博客主页是有效的。
只需要在 git bash 中执行 npm install hexo-offline ，然后 hexo cl&&hexo g&&hexo deploy 三联就行了。
参考的部分教程：
让PWA支持HEXO
基于 Hexo GitHub 从零开始搭建个人博客（四）：让你的博客完美支持 PWA
升级插件
配置域名
域名申请，以我为例，打开腾讯云申请注册页面 ，按提示步骤输入意向域名并申请，期间需要实名认证，需要支付一定费用。
打开我的域名管理页面 ，移到最下面找到自己的域名并点进去
点击快速添加解析
选择网站解析、域名映射（CNAME），输入自己的 github 博客地址并确认。
打开博客仓库，依次点击 Settings 、 Pages ，找到 Custom domain ，输入自己的域名
jupeiqi.top，保存
查看自己的仓库，根目录下新出现一个 CNAME 文件就成啦。如果没有，可以直接在跟目录里添加一个 CNAME ，注意没有后缀名，内容改为自己的域名
jupeiqi.top。
接下来就可以直接使用新的域名来访问自己的博客了
配置腾讯云cdn
修改主页和菜单头部背景
- 打开 themes\hexo-theme-matery\source\medias\banner 文件夹，替换其中图片后，既可以更改主页头部背景图片，放入多张图片可以每日自动更换。
大菜单
豆瓣
参考自https://blog.csdn.net/qq_38157825/article/details/112783187
安装 hexo-douban 插件，在博客目录的 Git Bash 中执行
npm install hexo-douban --save打开博客根目录下 _config.yml 文件，在最下面添加如下代码
# hexo-douban
douban:
id: 162448367 # 自己的豆瓣id号
book:
path: books/index.html
title: '那些年，我翻阅过的书'
quote: '思想和身体，总有一个在路上'
movie:
path: movies/index.html
title: '那些年，我追过的电影'
quote: '过去、现在、和未来'
game:
path: games/index.html
title: '那些年，我玩过的游戏'
quote: '还记得你曾经的游戏角色吗'
timeout: 10000
卸载豆瓣，执行
npm uninstall --save hexo-douban在matery主题中，豆瓣有些问题，头部 在读 想读 已读 和底部翻页按钮点击时总是会跳转到一个空白页面，可以在 hexo-douban 插件目录中找到move.ejs、book.ejs、game、game.ejs、pagination.ejs，删除其中
href="javascript:;，重新执行hexo douban即可。在 books-generator.js 文件中，更改layout: ['page', 'post']，可以重新选择一个自定义的模板来加载豆瓣数据。
文章
修改博文头部背景
打开 themes\hexo-theme-matery\source\medias\featureimages 文件夹，替换其中图片后，既可以更改博文头部背景图片，放入多张图片后，每个博文随机用其中一张。
也可以在文章头部 Front-matter 中,修改 img 值为指定图片的地址。（ coverImg 是设定文章在首页轮播时的背景图片）
文章加密
首先在主题的配置文件 themes\hexo-theme-matery_config.yml 中修改 verifyPassword 项， enable 值更改为 ture
verifyPassword: enable: true promptMessage: 请输入访问本文章的密码 errorMessage: 密码错误，将返回主页！然后准备好自己的密码，比如 123 ，使用 sha256 加密解密工具，将 123 转换为对应的 sha256 值： a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3 备用。
打开自己的博文.md 文件，在文章头部 Front-matter 中,修改 passward 值为上一步准备的 sha256 值： a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3 。保存博文。
在构建到服务器后，在网站打开博文时，需要输入密码 123 才能查看。
思维导图
安装 hexo-simple-mindmap 插件，在博客目录的 Git Bash 中执行
npm install hexo-simple-mindmap在文章.md文件中，按以下格式写入内容
{% pullquote mindmap mindmap-md %}
- [Hexo 的思维导图插件](https://hunterx.xyz/hexo-simple-mindmap-plugin-intro.html)
- 前言
- 使用方法
- 一
- 二
- 三
- 太长不看
- 参考资料
{% endpullquote %}- 在构建到服务器后，在网站打开博文时，就可以看到思维导图了。
- 如无法正确显示，看看是不是前面的空格少了
流程图
- 安装 hexo-filter-flowchart 插件，在博客目录的 Git Bash 中执行
npm install --save hexo-filter-flowchart - 安装好插件后就可以直接在文章.md文件中用代码块写流程图，并且在语言标识处写
flow,
st=>start: 开始节点
in=>inputoutput: 输入
e=>end: 结束节点
op=>operation: 操作节点
cond=>condition: 条件节点
sub=>subroutine: 子例程
out=>inputoutput: 输出
st(right)->in->op->cond
cond(yes,right)->out->e
cond(no)->subst=>start: 开始语句:>https://www.baidu.com
in=>inputoutput: 输入值
e=>end: 结束语句
op=>operation: 执行操作
cond=>condition: 是否成立？
out=>inputoutput: 输出值
st->in->op->cond
cond(yes)->out
cond(no)->op
out->e 其中分为两个部分
- 第一部分为指定缩写、节点内容， st in e op cond out 为指代缩写，冒号后中文为节点内填充内容（可以用 :>https://www.baidu.com 来填入超链接），冒号和填充内容之间必须要有空格。
- 第二部分为连接节点，用 -> 连接，可以连续连接，条件节点需要换行写入两个连接，可以在括号内填入 top 、 bottom 、 left 、 right 指定上下左右的输出方向
效果如下
豆瓣卡片
安装 hexo-douban-card 插件，在博客目录的 Git Bash 中执行
npm install hexo-douban-card --save在文章中插入如下代码
{% douban movie 24745500 %}
{% douban book 30376420 %}
{% douban music 35099703 %}
效果如下
