butterfly主题设置

准备工作

首先是下载 butterfly 主题，在博客根目录下

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

如果出现克隆失败，把上面的 https 改成 git 即可，克隆完成之后根目录下的 /themes 中就会出现 butterfly 的主题文件夹，然后要把博客根目录下的_config.yml 中的 theme 属性改成 butterfly, 注意要有一个空格缩进，改完之后：

hexo clean
hexo g
hexo s

在本地打开主题，这里很容易出现一大串数字没有界面这种情况需要安装 pug 以及 stylus 的渲染器，回到博客根目录下输入；

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

安装完成之后再次重复上面的那三个操作，启动成功

这里强烈建议把主题下面的配置文件放到根目录下面，即把 /themes/butterfly 下的_config.yml 文件改名为_config.butterfly.yml. 这样主要是为了防止升级以后主题配置文件会被更换，当然如果不升级的话可以忽略，并且当他和博客的主题配置文件都存在时，主题配置文件优先级会更高

配置修改

语言

修改项目配置文件 _config.yml
默认语言是 en

language: zh-CN

导航菜单

修改主题配置文件_config.butterfly.yml：

menu:
  # Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  # Tags: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

必须是 /xxx/，后面 || 分开，然后写图标名支持的图标网。
注意： 导航的文字可自行更改

menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  留言板: /messageboard/ || fa fa-paper-plane
  友情链接: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

关于页

首次使用主题的「关于页」需要手动创建：

hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: 关于
date: 2021-07-18 03:02:04
layout: "about"
---

标签页

在项目根目录下，在命令行输入：

hexo new page tags

你会找到 source/tags/index.md 这个文件, 修改这个文件内容：

---
title: 标签
date: 2021-07-18 02:33:15
type: "tags"
---

分类页

在项目根目录下，在命令行输入：

hexo new page categories

你会找到 source/categories/index.md 这个文件, 修改这个文件内容：

---
title: 分类
date: 2021-07-18 02:35:33
type: "categories"
---

友情链接

在项目根目录下，在命令行输入：

hexo new page link

你会找到 source/link/index.md 这个文件, 修改这个文件内容：

---
title: 友情链接
date: 2021-07-18 02:37:12
type: "link"
---

新增友情链接

在 Hexo 项目目录中的 source/_data，创建一个文件 link.yml, 并写入如下内容：

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/image/avatar.png
      descr: 今日事,今日毕
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架
- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

可以按自己的友链修改
class_name 和 class_desc 支持 html 格式书写，如不需要，也可以留空。
友情链接界面也可以由用户自己自定义，只需要在友情链接的 md 档设置就行，以普通的 Markdown 格式书写。

浏览器地址栏输入：http://localhost:4000/link/就可会出现如下效果

留言板

在项目根目录下，在命令行输入：

hexo new page messageboard

你会找到 source/categories/index.md 这个文件, 修改这个文件内容：

---
title: 留言板
date: 2021-07-18 03:02:04
layout: "messageboard"
---

404页面

主题内置了一个简单的 404 页面，可在设置中开启

本地预览时，访问出错的网站是不会跳到 404 页面的。如需本地预览，请访问 http://localhost:4000/404.html

修改配置文件_config.butterfly.yml:

# A simple 404 page
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

代码复制

Butterfly主题支持代码复制功能。
修改主题配置文件_config.butterfly.yml：

highlight_copy: true

代码展开/关闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击 > 可展开代码

true 全部代码框不展开，需点击 > 打开
false 代码狂展开，有 > 点击按钮
none 不显示 > 按钮
修改主题配置文件_config.butterfly.yml：

highlight_shrink: true #代码框不展开，需点击 '>' 打开

代码换行

在默认情况下，hexo-highlight 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。
修改主题配置文件_config.butterfly.yml：

code_word_wrap: true

然后找到 Hexo 配置文件_config.yml，将 line_number 改成 false:

highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

社交图标

社交图标即主页上个性标签下的各种社交账号关联。

书写格式：图标名：url || 描述性文字

修改主题配置文件_config.butterfly.yml：

social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

图标名可在这寻找: https://fontawesome.com/icons?from=io

文章页相关配置

这个选项是用来显示文章的相关信息的。
修改主题配置文件_config.butterfly.yml：

post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: true # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

文章版权

为你的博客文章展示文章版权和许可协议。
修改主题配置文件_config.butterfly.yml：

post_copyright:
  enable: true
  decode: false
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。对于没有提供二维码的，可配置一张软件的 icon 图片，然后在 link 上添加相应的打赏链接。用户点击图片就会跳转到链接去。link 可以不写，会默认为图片的链接。
修改主题配置文件_config.butterfly.yml：

reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付宝

文章锚点

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题 ID 进行替换
(注意：每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。)
修改主题配置文件_config.butterfly.yml：

anchor: true

复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

copy:
  enable: true # 是否开启网站复制权限
  copyright: # 复制的内容后面加上版权信息
    enable: true # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息

since 是一个来展示你站点起始时间的选项。它位于页面的最底部。
修改主题配置文件_config.butterfly.yml：

footer:
  owner:
    enable: true
    since: 2021
  custom_text:
  copyright: true # 主题和框架的版权

页脚自定义文本

custom_text 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。
修改主题配置文件_config.butterfly.yml：

custom_text: Hi, welcome to my <a href="https://百度.me/">blog</a>! # 也叫自定义文本

footer 的背景会与 top_img 的一致，当设置 false 时，将与主题色一致。

修改主题配置文件_config.butterfly.yml：

# footer是否显示图片背景(与top_img一致)
footer_bg: true

右下角按钮

简繁转换

简体繁体互换, 右下角会有简繁转换按钮。
修改主题配置文件_config.butterfly.yml：

translate:
  enable: true
  # The text of a button
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  defaultEncoding: 2
  # Time delay
  translateDelay: 0
  # The text of the button when the language is Simplified Chinese
  msgToTraditionalChinese: '繁'
  # The text of the button when the language is Traditional Chinese
  msgToSimplifiedChinese: '簡'

夜间模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有阅读模式按钮。
修改主题配置文件_config.butterfly.yml：

readmode: true

访问人数

访问 busuanzi 的官方网站查看更多的介绍。
修改主题配置文件_config.butterfly.yml：

# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

网页已运行时间
修改主题配置文件_config.butterfly.yml：

runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

图片设置

头像

修改主题配置文件_config.butterfly.yml：

avatar:
  img: /img/avatar.png
  effect: false # 头像会一直转圈

站点图标

站点图标又称站点icon(favicon.ico)
修改主题配置文件_config.butterfly.yml：

favicon: /img/favicon.png # 将图片放入 themes -> Butterfly -> source -> img 里

主页封面图片

在访问系统首页时，出现的封面图片
修改主题配置文件_config.butterfly.yml：

index_img: https://gitee.com/dulily/cdn/raw/master/img/214707-1543326427a764.jpg

文章详情页的顶部图片

当没有在front-matter设置top_img和cover的情况下会显示该图
修改主题配置文件_config.butterfly.yml：

default_top_img: http://pic1.win4000.com/wallpaper/2020-08-21/5f3f3d10b054e.jpg

归档页顶部的图片

修改主题配置文件_config.butterfly.yml：

archive_img: http://pic1.win4000.com/wallpaper/2020-07-24/5f1a7c9533901.jpg

标签页顶部的图片

修改主题配置文件_config.butterfly.yml：

tag_img: http://pic1.win4000.com/wallpaper/2020-07-24/5f1a7c9533901.jpg

分类页顶部的图片

修改主题配置文件_config.butterfly.yml：

category_img: https://pic.imgdb.cn/item/60eb2b9e5132923bf83c8e45.png

字数统计

要为 Butterfly 配上字数统计特性，你需要如下几个步骤:

打开 hexo 工作目录

npm install hexo-wordcount --save or yarn add hexo-wordcount

修改主题配置文件_config.butterfly.yml：

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

网站背景

默认显示白色，可设置图片或者颜色
修改主题配置文件_config.butterfly.yml：

background:

留意: 如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog, 引用一张 img/xx.png 图片，则设置 background 为 url (/blog/img/xx.png)
background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

打字效果

修改主题配置文件_config.butterfly.yml：

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)

鼠标点击效果

烟花

修改主题配置文件_config.butterfly.yml：

# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: true # 手机页面

页面美化

会改变 ol、ul、h1-h5 的样式
field 配置生效的区域

post 只在文章页生效
site 在全站生效

修改主题配置文件_config.butterfly.yml：

# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

未开启美化

开启美化

网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭。
修改主题配置文件_config.butterfly.yml：

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: false
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 已无岁月可回首 且以深情共白头
    - 无人问我粥可暖 无人与我立黄昏

会先显示 source 里的内容，然后再展示 sub 中自己编辑的内容

页面加载动画

当进入网页时，因为加载速度的问题，可能会导致 top_img 图片出现断层显示，或者网页加载不全而出现等待时间，开启 preloader 后，会显示加载动画，等页面加载完，加载动画会消失。
修改主题配置文件_config.butterfly.yml：

preloader: true

图片大图查看模式

fancybox

修改主题配置文件_config.butterfly.yml：

# fancybox http://fancyapps.com/fancybox/3/
fancybox: true

效果：

medium_zoom

修改主题配置文件_config.butterfly.yml：

medium_zoom: true

效果：

Snackbar 弹窗

Snackbar 弹窗，根据自己爱好开启
修改主题配置文件_config.butterfly.yml：

# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#121212' # The background color of Toast Notification in dark mode

未开启 :

已经开启 :

本地搜索

根目录下输入 npm install hexo-generator-search下载需要的插件

修改主题配置文件：

local_search:
  enable: true

准备工作

配置修改

语言

导航菜单

关于页

标签页

分类页

友情链接

新增友情链接

留言板

404页面

代码复制

代码展开/关闭

代码换行

社交图标

文章页相关配置

文章版权

文章打赏

文章锚点

复制相关配置

Footer 设置

页脚自定义文本

footer 背景

右下角按钮

简繁转换

夜间模式

访问人数

运行时间

图片设置

头像

站点图标

主页封面图片

文章详情页的顶部图片

归档页顶部的图片

标签页顶部的图片

分类页顶部的图片

字数统计

网站背景

打字效果

鼠标点击效果

页面美化

网站副标题

页面加载动画

图片大图查看模式

fancybox

medium_zoom

Snackbar 弹窗

本地搜索