再次换主题,一个月前(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 插件同步修改。
  5. mathjax 和 Hexo 的完美冲突解决方案 (目前任然不建议使用 Katex)
  6. 拉取自己 fork 的主题 Butterfly,并复制 _config.ymlsource/_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.stylfooter 下添加一行 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.stylbackground-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 提交。

部署到 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 主题自己用,不把主题当作源码保存也是个好习惯。