再次换主题，一个月前（2020/7/20）看到了 Butterfly 主题，十分心动，知道前两天才开始换从 next 换到 Butterfly。Butterfly 主题真的太美了，现在看唯一的缺点就是不支持 <!-- more --> 标签。

一不小心又把 blog 文件夹删了，我吐了，正好写一下重新步骤

  1. 安装 Hexo 并上传到 git 上 这里超详细
  2. 拉取源代码
  3. npm install 更新依赖（配置国内镜像：npm config set registry https://registry.npm.taobao.org）
  4. 使用方案 2 修改 node_modules/nunjucks，并且 搜索、RSS 插件，hexo-generator-random 插件同步修改, scaffolds/ 也要修改！。
  5. mathjax 和 Hexo 的完美冲突解决方案 (目前任然不建议使用 Katex)
  6. 拉取自己 fork 的主题 Butterfly，并复制 _config.yml 到 source/_data/ 进行主题配置：官方配置方法

以下内容仅需配置一次（与主题无关，最多是在主题配置文件中填写一点数值）：

  1. LeanCloud 管理数据 并配置 Valine（已关闭） 和 Utterances（也是基于 Github Issue 的，但是很好用，虽然不能在回复下回复，但是可以 @） Gitalk 双评论系统，Gitalk 配置， 注意事项，每一篇都要初始化一次。
  2. 添加文章加密功能，增加 RSS 功能，RSS 使用说明，文章置顶功能，随机文章
  3. 支持 pdf，支持 B 站视频

Butterfly 主题修改记录

其实直接去 github 看就行了

添加首页加载 mathjax

修改 themes/butterfly/layout/includes/third-party/math/index.pug，进去了就知道该怎么改啦。

增加了底部小鱼游泳

在 themes/butterfly/layout/includes/footer.pug 下面添加

1
2
3
4
style.
  @media only screen and (max-width: 767px){
    #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
  }

并且在 themes/butterfly/source/css/_layout/footer.styl 中修改对应的 footer-warp

1
2
3
4
5
6
7
8
9
#footer-wrap
  position: absolute
  padding: 1.2rem 1rem 1.4rem
  color: $light-grey
  text-align: center
  left: 0
  right: 0
  top:0
  bottom: 0

添加透明度功能

  • 在 source/css/_layout/post.styl 的 .layout_post 下添加一行 opacity: hexo-config('content_opacity.post')
  • 在 source/css/_layout/page.styl 的 .layout_page 下添加一行 opacity: hexo-config('content_opacity.page')
  • 在 source/css/_layout/footer.styl 的 footer 下添加一行 background-color: rgba(73,177,245,hexo-config('footer_transparent'))
  • 在 source/css/_mode/darkmode.styl 的 #footer[data-type=color] 下的内容替换为 background: rgba(13,13,13,hexo-config('footer_transparent'))

然后设置

1
2
3
4
5
# 透明度
content_opacity:
  post: 0.66
  page: 0.77
footer_transparent: 0.5

将横幅 banner 设为透明

source/css/_layout/head.styl 中 #page-header 下的 background-color: 改成 transparent

source/css/_layout/head.styl 中 background-color: 改成 transparent
直接看这里

主要参考 云玩家 和 Paddy

git 回档操作

查看 github 上需要回档的版本号，三种方式

  1. 直接记录下版本号，然后执行 git reset --hard <版本号>
  2. git reflog 查看回档编号，git reflog git reset --hard HEAD@{编号}
  3. git reset –-hard HEAD ^ ( ^ 表示回到上一个版本，^^ 表示回到上上个版本）

最后要 git push -f -u origin master 提交。

VSCode 规范化提交插件：git-commit-plugin

部署到 github

登录 github ，创建 yourname/yourname.github.io 仓库， 进入该仓库 setting，下拉到 Github Page

设置 master branch，Custom domain（可选），Enforce HTTPS

git 命令行进入 blog 目录，执行下面操作：

1
2
ssh-keygen -t rsa -C yourmail@example.com #建议不设置密码，按回车
clip < ~/.ssh/id_rsa.pub # 复制公钥到系统粘贴板

去 github 账号的 setting 中添加 ssh key（复制到 key 就可以了）

检测是否成功： ssh -T git@github.com

设置全局用户信息：

1
2
git config --global user.name yourname
git config --global user.email  yourmail@example.com

在 _config.yml （最后一行）设置：

1
2
3
deploy:
  type: git
  repository: git@github.com:yourname/yourname.github.io.git

执行：npm install hexo-deployer-git --save

然后执行： hexo g -d 就可以去 http(s)://yourname.github.io 看到自己的博客了。

配置 _config.yml

填写 site 信息， 设置 url ， 建议 permalink 改为 ：title/，设置 # Pagination 下的 per_page: 0。

配置主题，配好了修改 _config.yml 的 theme 为当前主题

以下内容被作为源代码保存

  • 源码：./source
  • 环境配置文件：_config.yml, .gitignore, package.json, package-lock.json, README.md
  • 更新源码脚本：updateSourceCode.py

云盘白嫖优雅解决方案

  • iCloud 放 pdf 和 goodnote 和一些杂七杂八但不占空间的东西
  • 坚果云配分 ipad 的照片
  • 各种途径的照片分类整理到 OneDrive
  • OneDrive 存照片和 Windows 默认的设置
  • 用 Coding 存个人文档（2000 文件，300G）
  • 百度网盘其实是最强的

白嫖取之有道，一定要嫖大厂的！有信誉的！
二级域名和虚拟主机（虚拟服务器不可能）就别想着一直白嫖了！

总结

考虑代码的可迁移性，代码规范，多平台是一个好习惯。自己 fork 主题自己用，不把主题当作源码保存也是个好习惯。