【持续更新 | 2022最新】基于 hexo 的 butterfly 优化教程
写在前面
博主 2018/06/07 配置了一个基于 hexo + next 的博客：月小水长的个人博客，维护几年有余后，源码或配置暂时丢失，于 2022/01/16 新开了 BuyiXiao’s Blog ，算是新的博客旅程，兴许日后会在 月小水长的个人博客 继续更新…
本站点基于 hexo 6.0 + butterfly 4.0.1，本文记述了新博客配置过程的点点滴滴，就如文章摘要所述，不是臃肿的流水教程，但是小而精的查漏补缺，以及记录常见易错点。有问题欢迎留言
hexo 基础配置及 butterfly 基础美化
官方 quick-start
博主第一次搭建博客时，收藏了很多 hexo + next 的教程，但是由于站点或主题的不断迭代升级，很多教程都失效了，所以建议基础部分直接看官方最新的教程。
hexo 常见命令
1、 hexo init
创建一个 buyixiao 文件夹并初始化为 hexo 目录
hexo init buyixiao
cd buyixiao
2、hexo generate
hexo generate 命令用于生成静态文件，一般可以简写为 hexo g
-d 选项，指定生成后部署，与 hexo d -g 等价
3、hexo server
hexo server 命令用于启动本地服务器，一般可以简写为 hexo s
-p 选项，指定服务器端口，默认为 4000
-i 选项，指定服务器 IP 地址，默认为 0.0.0.0
-s 选项，静态模式 ，仅提供 public 文件夹中的文件并禁用文件监视
本地运行服务器前需要安装 hexo-server 插件
npm install hexo-server –save
4、hexo deploy
hexo deploy 命令用于部署网站，一般可以简写为 hexo d
-g 选项，指定生成后部署，与 hexo g -d 等价
5、hexo clean
hexo clean 命令用于清理缓存文件，是一个比较常用的命令
6、hexo –safe
hexo –safe 表示安全模式，用于禁用加载插件和脚本
7、hexo 新建文章
hexo new “这里填入文章的标题”
一些 Tips
valine 的 placeholder 和 requiredFields 无效
应该是看了很早的教程，最新的 butterfly 这两个字段应该放在 option 下一级而不是和 option 平级。
1 | option: |
删除 valine 垃圾评论
很简单，直接去 LeanCloud 后台数据库界面删除对应评论即可。
删除文章
很简单，直接去站点根目录 source/_posts 文件夹中删除文章 md 再 再 hexo clean &hexo g -d。
文章配置多个 tag
1 | tags: [butterfly,hexo,beauty] |
或者
1 | tags: |
文章自定义 url
如何像 https://buyixiao.github.io/blog/butterfly-beauty-quick-start.html 一样，加一个前缀 blog？
在 站点配置文件中搜 permalink
原来的是这样的，
permalink: :year/:month/:day/:title/
我们改成
permalink: blog/:title_en/
然后在写文章的 md 中加入
title_en: my-defined-url
就能在浏览器通过以下地址访问了
{username}.github.io/blog/my-defined-url
文章修改预设 formats
打开站点根目录下的 scaffolds 文件夹，修改里面的 post.md 即可，page formates 同理
配置美化过程中那些拦路虎
记录填坑之路，标题是错误，正文是解决办法。
OpenSSL SSL_read: Connection was reset, errno 10054
在站点配置 git 仓库地址时使用 ssh 地址，不要使用 https 地址。
本地和 github.io 访问不一致
可能是浏览器有缓存，使用 ctrl + f5 刷新试试。
如果是本次部署没有任何文章更新，github page 没有识别到文章相关更新，也有可能导致这个问题，建议新建或修改文章时间。
clone 主题时超时
原因是 github 的 dns 被污染了，打开 C:\Windows\System32\drivers\etc 下的 hosts 文件，配置 github 的 dns 解析。格式如下：
140.82.113.3 github.com git
199.232.69.194 github.global.ssl.fastly.net
185.199.108.153 assets-cdn.github.com
前面的 dns 地址可能需要更换，详情可以参考 github 打开很慢的解决办法
butterfly 主题报错 extends includes/layout.pug block content include…
错误具体信息如下
extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug
解决办法是输入命令
npm install –save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive
再 hexo clean &hexo g -d 就好了。
butterfly 主题报错 if theme.newest_comments.enable xxx read
if theme.newest_comments.enable xxx read…
Cannot read property ‘0’ of null…
原因是，没有配置 comment 就把 newset_comment 开关打开了。
列表页 newset 评论无法显示，文章内评论可以
情况发生于 Valine 评论系统，解决办法是配置下 serverURLs 为 LeanCloud 提供的 RestAPI 地址。
配置了但是 addtothis 分享系统无效
应该是没有在 addtothis 后台新建 share_button，选择相应的分享平台并激活按钮。
声明
本文链接：https://buyixiao.github.io/blog/butterfly-beauty-quick-start.html
转载或引用需要注明来源。
wechat- alipay
