主题安装

运行以下代码安装butterfly主题

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

启用主题

修改 Hexo 根目录下的 _config.yml,把主题改为 butterfly

1
theme: butterfly

减少升级带来的不便(建议,此步骤可选)

.\themes\butterfly\_config.yml文件复制一份,重命名为_config.butterfly.yml并移动到Hexo根目录下
以后只需要在_config.butterfly.yml进行配置就行, 配置主题的_config.yml将不会有效果。

基础配置

以下只推荐几处修改的地方,其余部分大家可自行参考详细的官方文档修改

设置主题语言(此步骤可选,想要用原生英文版本的请忽略这一步)

修改主题语言为 简体中文

默认语言是 en
butterfly主题支持
- default(en)
- zh-CN (简体中文)
- zh-TW (台湾繁体中文)
- zh-HK (香港繁体中文)
- ja (日语)
- ko (韩语)

1
language: zh-CN

将配置文件替换为带中文注释的版本(此步骤可选,想要用原生英文版本的请忽略这一步)

打开https://butterfly.js.org/posts/4aa8abbe/这个链接,将配置文件速读的内容复制到_config.butterfly.yml对应的位置
补两张图

网站资料

修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改 Hexo 的_config.yml
补图

导航

目录
Q:只显示图标,不显示文字应该怎么写呢?
待补充

代码块高度

可选

其他个性化
社交图标

右下角按钮

怎么搞让切换简体繁体 和黑夜模式等按钮默认显示呢

字数统计

开启字数统计功能,需要安装hexo-wordcount插件

在 hexo 工作目录下运行 npm install hexo-wordcount --save or yarn add hexo-wordcount

开启本地搜索功能

运行安装脚本npm install hexo-generator-searchdb --save

本次部署到评论系统 选Valine 和gitalk
最终选择了Twikoo云函数部署-Netlify部署

  1. post模板配置 加了注释 对应教程里的 Post Front-matter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
code_blocks:
# Code block theme: darker / pale night / light / ocean / false
theme: light
macStyle: false
# Code block height limit (unit: px)
height_limit: false
word_wrap: false

# Toolbar
copy: true
language: true
# true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button
shrink: false
fullpage: false