还在用看板娘、知乎风登录背景、飘带装饰你的hexo博客吗？本篇将带来不一样的博客美化！🤞并详细教你从hexo init到奢华博客！
点击上方目录方便跳转想看的部分！
字数实在太多了，请走公众号👉三分钟快速搭建个性化博客。包含git配置、hexo安装、新博客的建立，十分详细。
完成博客搭建和主题选取后，开始我们的魔改之路吧！
在文件夹下，配置你的博客的基本信息。
hexo主题选择
在下，大约39行的位置，选择你喜欢的主题，有四种内置的主题可供我们选择，后续的美化就在此主题的基础上进行。
目前官方已经支持darkmode，但这里设置darkmode: true只能激活夜间模式，无法动态切换，因此博主在下面会给出其他的引入方式。
网站图标
在这里可以设置你的网站图标，不用改名字直接替换对文件即可。
开启版权声明
下面则是版权声明的设置，你可以设置在侧边栏和每个post的底部开启，language不设置的话自动跟随网页的整体设置。
菜单栏、侧边栏、网站链接设置
在往下是网站的链接设置，想要哪一页取消注释即可，我这里开启了home、tags、archives、guestbooks。
可以在font awesome上面找你喜欢的图标作为链接的图标，默认是这样的，选中后修改对应like的fa-archive的文字即可.
在下面几行，你可以仔细微调侧标栏的位置、宽度等设置。
在大概184行的位置，还可以调整侧栏的目录。
头像设置、社交外链
在这里，你可以设置你头像的图床的外部链接/本地图像文件。
头像这里推荐可以上传到gravatar上，用邮箱登录唯一标识，很方便，也有国内镜像。
rounded：是否圆形
rotated：hover是否旋转
在下面设置社交网站等的外链。
博文设置（摘要、阅读更多、字数统计等）
直接搜索# Post Settings就可以看到了。
其中使用symbols_count_time需要安装：
打赏
取消设置，在对应的文件夹加入图片。
返回顶部按钮、阅读进度条、gitbanner
line:383，全部设置enable为true
github_banner启用则是在右上角显示你的GitHub跳转方式。
自定义字体
设置，host改为的镜像，然后即可在https://fonts.googleapis.com挑选一款你喜欢的字体啦！
配置搜索功能
你可以安装插件配置搜索功能，也可以启用local search，其可以帮助搜索引擎检索你的内容，使用Algolia Search需要安装插件，并配置密钥。
建议使用第二种。
然后配置
先在本节挑选一款你的动态背景吧！
知乎风格动态背景
- 将目录更改为 Hexo 目录。必须有 scaffolds 、 source 、 themes 等目录：
- 创建 footer.swig
在 hexo/source/_data 目录中创建名为 footer.swig 的文件（如果 _data 目录不存在，则创建该文件）。编辑该文件并添加以下内容，可以修改其内容：
- 在 NexT _config.yml 中，取消 custom_file_path 部分下的 footer 注释。
添加网格地球、飞鸟等动态主题背景
用到：vantajs
添加自定义夜间模式
你可以选择darkmode插件，也可以选择直接引入darkmodeJS，以实现自定义的夜间模式切换按控件，并实现更高的自定义、配合动态主题。
- darkmode-next插件
我个人建议直接引入darkmodeJS，这样可以实现切换按钮的自定义和网站背景的配合等。
这里的options中，mixcolor最好为transparent，不然darkmodeJS会直接根据颜色的差值为你的网站制定夜间模式，丑+简陋，不过省事儿~看个人选择啦。
更高级的，可以配合动态背景和自定义按钮，可例如下面这样的示例，通过界面上一个checkbox元素实现切换：
文件中
彩带
设置：
size ：功能区的大小，默认： 90 。
alpha ：线条的不透明度 (0 ~ 1)，默认： 0.6 。
zIndex ：默认： -1 。
添加点击爱心效果
对应的文件：
添加点击烟花效果
- 参考代码：Anime.js Fireworks canvas demo
在布局中引入(animatejs库已经引入过了)：
/js/firework.js文件：
取消的注释，并在对应的文件中填入，以下效果可以在我的博客看噢a small world of unnamedtat。看css👀都要瞎了，求个三连吧！：
最后是一个好用的颜色生成网站：ColorSpace，生成了好看的颜色填进去就行了🥰🥹🥹
异步加载动态背景、darkmodeJS统一
网上目前有很多教程，外部脚本加载都放在布局文件里面，实际上hexo并不会异步加载，堵塞主进程。而我们如果不想过多地动模板文件（因为hexo和主题更新换代很快，需要考虑到迁移问题），就可以通过自己脚本里面promise异步加载的方式，提高网页的加载速度。
例如，我的网站需要加载darkmodeJS一个自己写好的toggle按钮和一个动态背景，并且需要调用一些第三方库。因此我们在promise加载脚本完成之后再执行需要的操作。
这样我们只用在模板文件里面引入对于的div元素和该脚本即可。
你可能已经注意到了，在这两个元素的加载事件还额外添加了 。这是因为博主观察到hexo的各个元素在加载完成时都不是直接出现的，而是有一个渐变。我们自己的元素直接直愣愣地出现，给人感觉很突兀。因此，我们可以在自定义的 文件中添加对于自定义元素的默认隐藏和渐变出现效果：
而在 事件中，添加 这样其出现就会带有过渡效果了。
或者使用 库（已经引入过），像这样，也是一样的效果！
点击waline部署，部署一个你自己的waline评论系统。
把waline后端和你的blogs项目都扔到vercel上部署，取得Leancloud凭证，配置好 。
想要让你的网站能够在拆哪直连，首先你要拥有一个域名，国内域名要备案就没写出来了：
- namesilo域名。
- eu.org域名的申请流程
然后在blog项目的 配置一级域名 解析，再配置好 的重定向。
这里vercel会自动recommend这个方案，按照它上面的方式配置就好了，注意域名解析的时候的 值要写 ，以避免dns污染！
与之相对的把二级域名 解析到后端评论系统，值同上。
最后的效果要是这样的。
其他改善访问速度的方法：
-
切换fonts.googleapis.com为镜像fonts.loli.net
-
avatar镜像源：学习笔记|简单分享一下自建Gravatar镜像 这里我也用的loli的镜像，十分感谢大佬们：前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务
-
搞完字体、头像后发现还是很缓慢，于是检查发现darkmode.js和canvas-nest在jsDeliver上，国内访问非常缓慢，可参考：教你解决由于jsdeliver导致wordpress后台变慢的终极办法、换cdn厂商。最后我换了cdnjs的url。
-
顺带一提我引用cdnjs的darkmodejs后，发现移动端的切换按钮选中整个方形的会有蓝色高亮的效果，还会使得文字可以选中，不好看，于是参考取消按钮在移动端点击时的背景颜色这篇文章，可以这样设置：
-
其余可以换的镜像：waline.libUrl、waline.css
以下是参考教程：
- 使用Hexo+NexT8+Waline搭建评论系统
- Waline-next插件
- 一招解决Vercel站点在国内无法访问的问题
你需要安装、、等插件。
- 【Hexo】配置主流搜索引擎收录流程记录
- Hexo Next 站点地图配置（sitemap）
- Hexo 博客提交百度、谷歌搜索引擎收录
- Hexo博客进阶：为 Next 主题添加 Waline 评论系统
- 推送插件：hexo-submit-urls-to-search-engine
- Hexo做SEO优化遇到的坑
安装hexo-abbrlink插件，生成唯一的永久链接。
修改 config.yml 文件中的永久链接：
设置：
由于没找到next主题的切换博文功能，参考landscape主题的写了一个。
放在，在next主题里面config文件取消该路径的注释就可以了。🥰
然后设置
以及文字，效果在这里。🥰
还可以引入别人写好的美观自定义404页面html，但是我喜欢简约就自己弄了一个啦。
参考大佬源码，我进行了魔改: Digital Pet-luke lincoln
可以直接在要加入宠物的页面的md文档中添加,以免过多修改源码
或者自己定制对应页面模板/html.
文章太长的话，html爬虫软件会爬不到内容~博主也是才知道这个教训，由此我们通过生成目录、使用阅读全文按钮的方式，仅在博客首页展示大纲方便阅读，有效减少网页首页内容！
使用阅读更多（摘要）
官方推荐使用这种方式，可以让你在觉得适合的地方终止。
安装插件
生成目录需要插件，因此我们需要卸载掉原本用于渲染的插件，并安装hexo-renderer-markdown-it-plus，它支持很多插件拓展并支持目录生成。
在中填入配置：
然后在你想要插入目录的地方使用即可！
你同样可以在vscode里安装插件生成，道理是一样的。
这个插件支持很多功能，包括emoji渲染和katex渲染等，都挺不错的！
katex渲染
启用katex渲染需要在中设置：
Math Equations
在md中使用emoji，你需要对应的表情列表:emoji表情列表
首页标题跳转
但是这样就会产生一个问题，如果我们在首页同时用显示摘要（或部分文字）和插入阅读更多按钮，而md文档自动帮我们生成的TOC目录只会产生一个#锚点，并不会跳转到博文相对应的链接，然后读者就和一动不动的网页干瞪眼啊😅😂官方的helper我个人感觉弄起来非常麻烦，而且我们的md文档转到另一个平台又要重新忧虑插入目录的问题了~
因此博主的思路是，在静态文件生成后修改首页（包括和文件夹下的所有页面），利用库解析页的对应类下的所有标签的链接，同时找到父节点的兄弟节点（就是那个的的），连接到一起，然后重新匹配，替换掉该部分（因为直接写入解析替换后的html会乱码，不敢动），生成后，拉取静态文件到本地，再重新push上去，这里还可以再对逻辑修改下减少下载上传量。
upaload.bat
直接在命令行运行这个bat就可以了。
根据官方说明，在中加入：
下载插件，并在设置：
开发中的 NODE_ENV 可以禁用此插件以增强 ：
作者展示的案例说是增强了7%，我一会试试😄