Butterfly是一个界面生动，图文交互性强的Hexo主题，借鉴官方文档和其他博主搭建过程我创作了该教程，希望更多的人使用Butterfly来记录自己的生活。

本教程更新于 2022 年 08 月 20 日，教程的内容针对hexo6.2.0 butterfly4.4.0，并且只介绍基础教程

你愿意花时间看，那我愿意尽我所能帮助你

前提

  1. 你已经安装了Node.js、Git、Typora等工具
  2. 你已经拥有github账号并且可以本地推送代码到远程仓库
  3. 你已经了解Hexo博客框架的使用方法了（使用Typora写博客、hexo部署博客）
  4. 你已经决定好想要优化博客的准备了

更换主题

到hexo根目录打开cmd命令提示符

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

如果超时执行另一个命令：

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

这两个命令的区别是，一个是使用https协议，另一个使用ssh协议，目前国内访问github会被DNS污染导致访问错误，因此拉取代码会超时，可以使用ssh协议代替https协议克隆代码

在博客根目录打开网站配置文件 _config.yml，修改默认主题：

powershell
1
theme: butterfly

在博客根目录下复制主题配置文件blog/themes/butterfly/_config.yml并命名为_config.butterfly.yml，hexo会将_config.butterfly.yml覆盖默认主题配置文件，方便我们进行升级操作

本教程没有修改主题源码的操作，请放心食用

在博客根目录下执行：

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

hexo三连：

powershell
1
hexo clean && hexo g && hexo s

运行效果

我们将博客根目录的配置文件称为_config.yml，将主题配置文件称为_config.butterfly.yml

基础信息

在_config.yml设置网站资料：

yml
1
2
3
4
5
6
7
8
# Site
title: 枫叶 
subtitle: '分享知识，认识世界'
description: '分享知识，认识世界'
keywords: '博客 Linux 算法 服务器'
author: aqcoder
language: zh-CN
timezone: Asia/Shanghai

在_config.butterfly.yml设置网站页脚：

yml
1
2
3
4
5
6
7
8
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2022
  custom_text: Copyright 枫叶 
  copyright: true # Copyright of theme and framework

网站资料

网站页脚

网站资料参数解释

参数描述
title网站标题
subtitle网站副标题
description网站描述
keywords网站的关键词。支持多个关键词。
author您的名字
language网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网站页脚参数解释

参数描述
since建立网站的年份。用于展示站点起始时间，位于页面最底部
custom_text位于页脚的自定义文本，支持HTML
copyrighttrue展示hexo和butterfly的版权信息，false不展示

网站副标题

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 分享知识，认识世界
    - 烟花许诺夜空，洒落繁星一片

导航菜单

在_config.butterfly.yml设置网站导航菜单：

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
menu:
  主页: / || fas fa-home
  站点 || fa fa-sitemap ||hide:
    我的导航: https://aqcoder.cn || fa fa-paper-plane
    必应壁纸: https://bimg.cc|| iconfont icon-Bing
  博文 || fa fa-bookmark:
    分类: /categories/ || fa fa-archive
    标签: /tags/ || fa fa-tags
    归档: /archives/ || fa fa-folder-open
  生活 || fas fa-list:
    分享: /share/ || fa fa-share-alt-square
    音乐: /music/ || fa fa-music
    图库: /gallery/ || fa fa-images
  友链: /links/ || fa fa-link
  开往: https://www.travellings.cn/go.html || fa fa-train
  虫洞: https://foreverblog.cn/go.html || fa fa-circle
  留言板: /comment/ || fa fa-paper-plane
  关于我: /about/ || fas fa-user

必须是 /xxx/，后面||分开，然后写图标名。因为已经内置了fontawesome，可以去图标库选择合适图标，然后复制图标名称即可

如果不希望显示图标，图标名可不写。

效果展示

导航菜单

导航页面

有了导航，后面就是建立页面，首先建立下面三个基本页面

其他页面以此类推，不用加type:”xxx”

在根目录cmd，使用以下命令建立标签页：

powershell
1
hexo new page tags

修改source/tags/index.md：

markdown
1
2
3
title: 标签
date: 2022-08-20 21:13:35
type: "tags"

添加type:”xxx”是为了设置内置的标签页，分类页，友情链接，这些页面butterfly自带有，不需要我们单独设置

在根目录cmd，使用以下命令建立分类页：

powershell
1
hexo new page categories

修改source/categories/index.md：

markdown
1
2
3
title: 分类
date: 2022-08-20 21:15:09
type: "categories"

在根目录cmd，使用以下命令建立友链页：

powershell
1
hexo new page links

修改source/links/index.md：

markdown
1
2
3
title: 友链
date: 2022-08-20 21:15:09
type: "links"

搜索系统

1、安装插件：

yml
1
npm install hexo-generator-search --save

2、修改_config.butterfly.yml：

yml
1
2
3
4
5
# Local search
local_search:
  enable: true #是否启用
  preload: true # 是否预加载
  CDN:

官网注册，创建应用，拿到apikeys

在 hexo 根目录下的_config.yml 配置文件添加以下代码，appId、apiKey、adminApiKey、indexName 根据自己的情况填写

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
plugins:
  - hexo-algoliasearch

algolia:
  appId: "0Z2Q111FG111"
  apiKey: "079e96e1d3e11111116bf59011"
  adminApiKey: "9e2f194f9f28111111199ce53111"
  chunkSize: 5000
  indexName: "hexo_blog"
  fields:
    - content:strip:truncate,0,200
    - tags
    - permalink
    - excerpt:strip
    - title
    - categories

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

yml
1
2
3
4
5
# Algolia search
algolia_search:
  enable: true
  hits:
    per_page: 6

推荐文章：Hexo 的 Butterfly 主题使用 Algolia 搜索

友情链接

在Hexo博客目录中的source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件link.yml

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- class_name: 友情鏈接
  class_desc: 博主
  link_list:
    - name: aqcoder
      link: https://blog.aqcoder.cn
      avatar: https://blog.aqcoder.cn/img/avatar.png
      descr: 分享知识，认识世界

- class_name: 特别鸣谢
  class_desc: 博客框架及主题
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、簡單且強大的網誌框架
    - name: Butterfly
      link: https://butterfly.js.org/
      avatar: https://butterfly.js.org/img/avatar.png
      descr: A Simple and Card UI Design theme for Hexo

# - class_name: 友链
#   class_desc: 同道中人
#   link_list:
    # - name: 
    #   link: 
    #   avatar:
    #   descr:

404页面

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

本地预览时，访问出错的网站是不会跳到404页面的。

如需本地预览，请访问http://localhost:4000/404.html

yml
1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background: /img/404.png

社交图标

Butterfly支持 font-awesome v6图标

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

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

图片设置

yml
1
2
# Favicon（网站图标）
favicon: /img/favicon.png
yml
1
2
3
4
# Avatar (头像)
avatar:
  img: /img/avatar.png
  effect: false #一直旋转头像
yml
1
2
# The banner image of home page
index_img: https://api.bimg.cc/today

可使用我的api接口来生成背景图

yml
1
2
https://api.bimg.cc/today #当天必应壁纸
https://api.bimg.cc/random #随机必应壁纸

主页背景图

yml
1
2
# If the banner of page not setting, it will show the top_img
default_top_img: https://api.aqcoder.cn/random
yml
1
2
3
4
5
6
7
8
9
10
11
12
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当文章Front-matter没有设置封面时，默认的封面显示
  default_cover:
    https://api.aqcoder.cn/random
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

文章封面图

大图查看

yml
1
2
3
4
5
6
7
8
9
10
11
# Lightbox (圖片大圖查看模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)

# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false

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

图片懒加载

安装hexo-lazyload-image模块

powershell
1
npm install hexo-lazyload-image --save

在_config.yml添加：

yml
1
2
3
lazyload:
  enable: true
  loadingImg: /img/loading.gif

_config.butterfly.yml配置也有图片懒加载：

yml
1
2
3
4
5
6
7
# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true
  field: site # site/post #懒加载位置
  placeholder: # 加载图片
  blur: true #开启高斯模糊

而且支持懒加载范围自定义和高斯模糊

网站背景

修改_config.butterfly.yml：

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Background effects (背景特效)
# --------------------------------------

# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: true
  mobile: true

右下角按钮

繁简转换

简体繁体互换，右下角会有简繁转换按钮。修改_config.butterfly.yml：

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Bottom right button (右下角按鈕)
# --------------------------------------

# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
  enable: false
  # 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: '簡'

夜间模式

右下角会有夜间模式按钮：

yml
1
2
3
4
5
6
7
8
9
10
# dark mode
darkmode:
  enable: true
  # Toggle Button to switch dark/light mode
  button: true
  # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
  # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
  # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
  # autoChangeMode: false
  autoChangeMode: 1

autoChangeMode: 1 跟随系统而变化，不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode

autoChangeMode: 2 只按照时间 晚上6点到早上6点之间切换为 dark mode,其余时间为light mode

autoChangeMode: false 取消自动切换

阅读模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有閲读模式按钮。

修改_config.butterfly.yml：

yml
1
readmode: true

按钮排序

yml
1
2
3
4
5
6
7
# Don't modify the following settings unless you know how they work (非必要请不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重复
rightside_item_order:
  enable: false
  hide: # readmode,translate,darkmode,hideAside
  show: # toc,chat,comment

侧边栏设置

主页侧边排版

只修改公告以及Github账号即可，其他不用修改

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# aside (側邊欄)
# --------------------------------------
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description: #网站简介，可以覆盖站点配置文件的description
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/flow2000
  card_announcement:
    enable: true
    content: 更换了博客主题为butterfly
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: true # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works

最新评论

主页侧边栏显示最新评论

yml
1
2
3
4
5
6
7
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: false

访问人数 busuanzi

yml
1
2
3
4
5
6
# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true # 是否开启本站访客数
  site_pv: true # 是否开始本站总访问量
  page_pv: true # 是否开启文章页阅读量

网站运行时间

yml
1
2
3
4
5
# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  publish_date: 2022/7/28 09:00:00

自定义栏目

参考：https://butterfly.js.org/posts/ea33ab97/

文章设置

文章链接优化

安装 hexo-abbrlink 插件

yml
1
npm install hexo-abbrlink

编辑 站点的 _config.yml文件，找到 permalink , 改成 permalink: posts/:abbrlink/

重新运行后插件会为每一篇文章生成唯一id并添加到Front-matter。

yml
1
2
3
4
5
6
7
8
9
10
11
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.aqcoder.cn
permalink: posts/:abbrlink/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
abbrlink: 
     alg: crc16 #算法： crc16(default) and crc32 
     rep: hex

Front-matter

Front-matter 是 markdown 文件最上方以 ---分隔的区域，用于指定个别档案的变数。

Page Front-matter 用于页面配置
Post Front-matter 用于文章页配置

如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里

写法解释
title【必需】页面标题
date【必需】页面创建日期
type【必需】标签、分类和友情链接三个页面需要配置
updated【可选】页面更新日期
description【可选】页面描述
keywords【可选】页面关键字
comments【可选】显示页面评论模块(默认 true)
top_img【可选】页面顶部图片
mathjax【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside【可选】显示侧边栏 (默认 true)
aplayer【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
写法解释
title【必需】文章标题
date【必需】文章创建日期
updated【可选】文章更新日期
tags【可选】文章标签
categories【可选】文章分类
description【可选】文章描述
keywords【可选】文章关键字
comments【可选】显示文章评论模块(默认 true)
top_img【可选】文章顶部图片
cover【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments【可选】显示文章评论模块(默认 true)
toc【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple【可选】显示 toc 简洁模式
copyright【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author【可选】文章版权模块的文章作者
copyright_author_href【可选】文章版权模块的文章作者链接
copyright_url【可选】文章版权模块的文章连结链接
copyright_info【可选】文章版权模块的版权声明文字
mathjax【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside【可选】显示侧边栏 (默认 true)

文章置顶

【推荐】hexo-generator-index从 2.0.0 开始，已经支持文章置顶功能。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

yml
1
2
3
4
5
6
7
8
9
10
11
title: Butterfly博客搭建（一）
categories: Butterfly
tags:
  - Butterfly
description: butterfly是一个界面生动，图文交互性强的Hexo主题，借助官方文档和其他博主搭建过程我创作了该教程
cover: 'https://api.aqcoder.cn/random?w=800&h=480
top_img: 'https://api.aqcoder.cn/random&w=1024&h=768
abbrlink: 447d
date: 2022-08-20 11:07:24
highlight_shrink: true
sticky: 100

文章置顶示例

主页文章节选

因为主题UI的关係，主页文章节选只支持自动节选和文章页description。

在butterfly里，有四种可供选择

description： 只显示description
both： 优先选择description，如果没有配置description，则显示自动节选的内容
auto_excerpt：只显示自动节选
false： 不显示文章内容

修改_config.butterfly.yml：

yml
1
2
3
index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

description在front-matter里添加

文章目录

在文章页，会有一个目录（TOC），修改_config.butterfly.yml：

yml
1
2
3
4
5
6
7
# toc (文章目录)
toc:
  post: true # 对文章页是否有效
  page: false # 对页面是否有效
  number: true # 是否展示章节数
  expand: true # 是否展开
  style_simple: true # for post 简洁模式

参数解释

属性解释
post文章页是否显示 TOC
page普通页面是否显示 TOC
number是否显示章节数
expand是否展开 TOC
style_simple简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）

PC端文章目录

移动端文章目录

简洁模式

代码样式

修改_config.butterfly.yml：

yml
1
2
3
# Code Blocks (代碼相關)
# --------------------------------------
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false

代码主题样例展示

darker

pale night

light

ocean

mac

mac light

false

主题支持代码复制功能

yml
1
highlight_copy: true # 是否开启复制按钮

true：显示代码语言

false：隐藏代码语言

yml
1
2
# show the code language
highlight_lang: true

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

true 全部代码框不展开，需点击>打开
false 代码框展开，有>点击按钮
none 不显示>按钮

yml
1
2
3
4
# true: shrink the code blocks 
# false: expand the code blocks  					   
# none: expand code blocks and hide the button
highlight_shrink: true

你也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。

当主题配置文件中的 highlight_shrink 设为true时，可在front-matter添加highlight_shrink: false来单独配置文章展开代码框。

当主题配置文件中的 highlight_shrink 设为false时，可在front-matter添加highlight_shrink: true来单独配置文章收缩代码框。

3.7.0 及以上支持

可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。

yml
1
highlight_height_limit: 200 # unit: px

注意：

  • 单位是 px，直接添加数字，如 200

  • 实际限制高度为 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit 一点时，出现展开按钮，展开没内容。

  • 不适用于隐藏后的代码块（ css 设置 display: none）

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

yml
1
code_word_wrap: true
yml
1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true # 是否开启网站复制权限
  copyright:  # 复制的内容后面加上版权信息
    enable: true  # 是否开启复制版权信息添加
    limit_count: 100 # 字数限制，当复制文字大于这个字数限制时

插入图片

在source下新建img/447d，本教程的链接优化为/posts/447d，所以建立和教程链接一样的资源文件夹即可

将要插入的图片放入img/447d/中，md文件则可以写入：

markdown
1
![](../img/447d/1661002974057.png)

447d是hexo-abbrlink生成的随机字符

主页背景图

本地即可预览该图片

文章锚点

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题ID进行替换
(注意: 每替换一次，会留下一个历史记录。所以如果一篇文章有很多锚点的话，网页的历史记录会很多。)

yml
1
2
3
# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

文章分页

设置分页的逻辑

yml
1
2
3
4
5
6
# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 2

post_pagination： 分页开关按钮

post_pagination： 1代表下一篇显示的是旧文章；2代表下一篇显示的是新文章

文章编辑

在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。

yml
1
2
3
4
5
6
7
# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

文章分享

addThis、sharejs、addtoany三个选一个开启

yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Share System (分享功能)
# --------------------------------------

# AddThis
# https://www.addthis.com/
addThis:
  enable: false
  pubid:  #访问 AddThis 官网, 找到你的 pub-id

# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true  #我开启的
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。

yml
1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

limit_day： 距离更新时间多少天才显示文章过期提醒

message_prev ： 天数之前的文字

message_next：天数之后的文字

相关文章

相关文章推荐的原理是根据文章tags的比重来推荐

yml
1
2
3
4
related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

字数统计

yml
1
2
3
4
5
6
7
# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

文章打赏

yml
1
2
3
4
5
6
7
8
9
10
# Sponsor/reward
reward:
  enable: false
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: wechat
    # - img: /img/alipay.jpg
    #   link:
    #   text: alipay

文章版权信息

yml
1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

博客部署

需要自己提前在代码托管网站建立好仓库

如果想要开启pages，须按规则命名仓库：

  • Github：{username}.github.io.git
  • Gitee：{username}.git
  • 其他请自行百度……
powershell
1
npm install --save hexo-deployer-git

修改_config.yml：

yml
1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  - type: git
    repo: git@github.com:flow2000/flow2000.github.io.git
    branch: master
  - type: git
    repo: https://gitee.com/pgh1038/pgh1038.git
    branch: master
powershell
1
hexo clean && hexo g && hexo d

参考文章

Butterfly官方文档

https://zhu-dongya.gitee.io/posts/hexo-butterfly-02/