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

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

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

前提

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

更换主题

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

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

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

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

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

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

1
theme: butterfly

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

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

在博客根目录下执行:

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

hexo三连:

1
hexo clean && hexo g && hexo s

运行效果

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

基础信息

在_config.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设置网站页脚:

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-Hanszh-CN
timezone网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai

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

网站页脚参数解释

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

网站副标题

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设置网站导航菜单:

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,使用以下命令建立标签页:

1
hexo new page tags

修改source/tags/index.md:

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

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

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

1
hexo new page categories

修改source/categories/index.md:

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

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

1
hexo new page links

修改source/links/index.md:

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

搜索系统

1、安装插件:

1
npm install hexo-generator-search --save

2、修改_config.butterfly.yml:

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

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

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

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 配置文件:

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

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

友情链接

在Hexo博客目录中的source/_data(如果没有 _data 文件夹,请自行创建),创建一个文件link.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

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

社交图标

Butterfly支持 font-awesome v6图标

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

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

图片设置

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

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

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

主页背景图

1
2
# If the banner of page not setting, it will show the top_img
default_top_img: https://api.aqcoder.cn/random
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

文章封面图

大图查看

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模块

1
npm install hexo-lazyload-image --save

_config.yml添加:

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

_config.butterfly.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

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

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: '簡'

夜间模式

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

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

1
readmode: true

按钮排序

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账号即可,其他不用修改

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

最新评论

主页侧边栏显示最新评论

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

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

网站运行时间

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 插件

1
npm install hexo-abbrlink

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

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

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属性来把这篇文章置顶。数值越大,置顶的优先级越大。

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:

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

descriptionfront-matter里添加

文章目录

在文章页,会有一个目录(TOC),修改_config.butterfly.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

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

主题支持代码复制功能

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

true:显示代码语言

false:隐藏代码语言

1
2
# show the code language
highlight_lang: true

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

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

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 及以上支持

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

1
highlight_height_limit: 200 # unit: px

注意:

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

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

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

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

1
code_word_wrap: true
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文件则可以写入:

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

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

主页背景图

本地即可预览该图片

文章锚点

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

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

文章分页

设置分页的逻辑

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代表下一篇显示的是新文章

文章编辑

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

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:

文章分享

addThissharejsaddtoany三个选一个开启

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

文章过期提醒

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

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的比重来推荐

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

字数统计

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

文章打赏

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

文章版权信息

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
  • 其他请自行百度……
1
npm install --save hexo-deployer-git

修改_config.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
1
hexo clean && hexo g && hexo d

参考文章

Butterfly官方文档

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