说明

1.本博客使用的框架是hexo，官方网址:https://hexo.io/zh-cn/。
2.使用的主题是butterfly，github地址:https://github.com/jerryc127/hexo-theme-butterfly。作者的地址:https://butterfly.js.org/。
3.搭建的过程中，参考了偷掉月亮:https://moonshuo.cn/的魔改教程。（建议可以自行参考，很详细）。
4.hexo部署过程中很容易出错，给予小小提醒。空格不能漏打、:注意是英文不要忘打、样式不显示是否清除了浏览器缓存，也可以试试hexo clean、名称不能用特殊含义单词，比如css起index.css。

搭建

1.准备好node.js:https://nodejs.org/en/download/和Git:https://git-scm.com/。

1
2
node -v
npm -v

用于，检测node是否已经成功安装。
2.部署hexo，

1
npm install -g hexo-cli

3.初始化博客

1
hexo init

4.启动博客

1
hexo g

5.开启本地服务

1
hexo s

Butterfly安装

1.国内安装，这个比较快，否则视地方不同，可能需要开科技。

1
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

2.安装渲染插件

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

3.hexo的config.yml，更改主题为butterfly。

1
2
3
hexo clean
hexo g
hexo s

完善配置

1.以下仅为个人记录使用，如有需要请参考作者博客，主题配置说明，或者参考偷掉月亮博客说明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Site
# 网站标题
title: '小刚的天堂'
#网站副标题,即我们网页标签对应的文字
subtitle: '宝可梦博客'
#网站描述
description: '欢迎来到小刚的天堂！'
# 网站关键词，便于别人搜索到你
keywords: '小刚的天堂'
# 作者名称
author: '小刚'
# 语言
language: zh-CN
#时区
timezone: Asia/Shanghai
1
2
3
4
5
6
7
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
# 自己网站的网址
url: https://www.pokemon.vip/
# 永久链接，这里不建议使用这个，后面我们会进行优化
permalink: :year/:month/:day/:title/
permalink_defaults:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Directory
//文章对应的位置
source_dir: source
//渲染的文件位置
public_dir: public
//标签对应的文件目录
tag_dir: tags
//时间线对应的目录
archive_dir: archives
//分类对应的目录
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

2.butterfly主题配置

1
2
3
4
5
6
7
8
9
10
menu:
   首页: / || fas fa-home
   时间线: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
   休闲||fas fa-list:
     音乐: /music/ || fas fa-music
     电影: /movies/ || fas fa-video
   #Link: /link/ || fas fa-link
   关于: /about/ || fas fa-heart

3.文章标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//文章的标题，也是所以可以搜索到的东西
title: Hexo中Buttefly文章标签与图床的选择（四）
//分类，如果想要二级分类，直接在下面直接添加就好
categories:
 - 博客搭建
//标签，表示这个属于Hexo标签与Butterfly标签，注意两个标签是同级的，同时便于别人的查询
tags：
 - Hexo
 - Butterfly
//自定义文章封面
cover: 图片的链接
//这个是网站的链接，是便于搜索引擎收录的，我们后续搜索引擎收录的时候在进行讲解
permalink
//评论功能，后续会讲解到
comments

4.永久链接（abbrlink插件）具体请参考作者github:https://github.com/Rozbo/hexo-abbrlink

1
npm install hexo-abbrlink --save

使用方法更改hexo的config.yml,修改permalink: 后内容为/posts/:abbrlink.html或者/post/:abbrlink/或者直接/:abbrlink.html或/:abbrlink/均可。

1
2
3
4
5
6
7
8
9
10
11
12
13
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
# 自己网站的网址
url: https://www.pokemon.vip
# 永久链接，这里不建议使用这个，后面我们会进行优化
permalink: index.php/archives/:abbrlink/
abbrlink:
  alg: crc16  #support crc16(default) and crc32，想要纯数字就照我这么选，个人博客够用了。
  rep: dec    #support dec(default) and hex
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

5.添加外挂样式

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
     - <link rel="stylesheet" href="/css/iconfont.css">
  bottom:
    # - <script src="xxxx"></script>

在标签中引用

1
2
3
4
5
6
# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
   iconfont icon-youjian : mailto:zss100000@qq.com || Email
   iconfont icon-QQ : tencent://message/?uin=100000&Site=Sambow&Menu=yes || QQ

导航栏图标

1
2
menu:
   首页: / || iconfont icon-shouye

因为用的是阿里的iconfont，所以图标的引用格式是iconfont icon-shouye，butterfly有内置5.3.0版本的图标库。具体请参考作者博客。

6.搜索功能

1
npm install hexo-generator-search --save

主题配置

1
2
3
4
5
search:
  path: search.xml
  field: all # post:文章范围、page:页面范围、all:覆盖所有
  content: true # 内容是否包含每一篇文章的全部内容
  template:  # ./search.xml 指定定制的XML模板

butterfly配置

1
2
3
4
5
6
7
8
9
10
11
12
#这个搜索系统我们不开启，没必要用这么麻烦的
# Algolia search
algolia_search:
  enable: false
  hits:
    per_page: 6
#开启本地搜索，即可我们正常的使用
# Local search
local_search:
  enable: true
  preload: false
  CDN:

7.图片网站：
https://wallhaven.cc/
压缩图片网站
https://tinypng.com/
8.头像，放入butterfly，source的img中，不过如果主题需要更新，根据主题作者的说明，不建议放在主题的img里，具体请参考butterfly的主题配置说明。

1
2
3
4
5
# Avatar (頭像)
avatar:
  img: /img/avatar.png
  #是否一直旋转
  effect: false

9.顶部图

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
# The banner image of home page
index_img: /img/banner.jpg

# If the banner of page not setting, it will show the top_img
default_top_img:

# The banner image of archive page
archive_img: /img/archive.jpg

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: /img/tags.png

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img: /img/tags.png

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: /img/categories.png

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img: /img/categories.png

这里笔者引用的偷掉月亮的代码，如果图片大小过大，建议直接外链即可。而且分类、标签的图片其实都可以不用配置，只需要配置文章页图片即可，cover。无top_img的情况下，会默认使用cover的图片。如果都配置，可能会拖慢博客的运行速度。顶部图需要单独加的时候，直接在文章中top_img: 配置即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cover:
  # display the cover or not (是否顯示文章封面)
  #首页是否显示文章封面
  index_enable: true
  #侧边栏是否显示文章封面
  aside_enable: true
  #归档页是否显示文章封面
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  #当我们没有设置封面的时候，使用以下的照片
  default_cover:
     - 图片地址1
     - 图片地址2
     .....

错误页配置

1
2
3
4
5
6
7
8
9
10
11
12
# Replace Broken Images (替換無法顯示的圖片)
#在这里可以自定义所有图片不能显示的情况下显示的图片
error_img:
  flink: /img/404.jpg
  post_page: /img/404.jpg

# A simple 404 page
error_404:
  enable: true
  subtitle: '页面丢失，联系博主进行解决吧'
  #图片的背景
  background: 链接地址

10.字数统计

1
npm install hexo-wordcount --save

配置

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

11.页脚配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Sponsor/reward，打赏图片
reward:
  enable: false
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: wechat
    # - img: /img/alipay.jpg
    #   link:
    #   text: alipay


# Share System (分享功能)
# --------------------------------------
#分享功能可以分享的图片
# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true
  sites: wechat,weibo,qq

12.设置透明度
引入外部css

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
51
52
53
/*文章的整体背景，渐变色设置*/
#web_bg {
	background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
	#background: #FFEFBA;
	/* fallback for old browsers */
	#background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
	/* Chrome 10-25, Safari 5.1-6 */
	#background: linear-gradient(to right, #FFFFFF, #FFEFBA);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background: #2BC0E4;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #EAECC6, #2BC0E4);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #EAECC6, #2BC0E4);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

/* 主页所有文章页面背景 */
#aside_content .card-widget,
#recent-posts>.recent-post-item,
.layout_page>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post {
	/* 以下代表透明度为0.5 */
	background: rgba(255, 255, 255, .5);
}

/*侧边栏页面*/
#aside-content>.card-widget {
	background: rgba(255, 255, 255, .6);
}

#aside-content>.sticky_layout>.card-widget {
	background: rgba(255, 255, 255, .6);
}

/*文章页面*/
.layout>#post {
	background: rgba(255, 255, 255, .6);
}

/*分类页面*/
.layout>#page {

	background: rgba(255, 255, 255, .6);
}

/*时间轴页面*/
.layout>#archive {
	background: rgba(255, 255, 255, .6);
}

新方案

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
:root {
	--trans-light: rgba(255, 255, 255, 0.88);
	--trans-dark: rgba(25, 25, 25, 0.88);
	--border-style: 1px solid rgb(169, 169, 169);
	--backdrop-filter: blur(5px) saturate(150%);
  }
  
  /* 首页文章卡片 */
  #recent-posts > .recent-post-item {
	background: var(--trans-light);
	border-radius: 25px;
	border: var(--border-style);
  }
  
  /* 首页侧栏卡片 */
  #aside-content .card-widget {
	background: var(--trans-light);
	border-radius: 18px;
	border: var(--border-style);
  }
  
  /* 文章页、归档页、普通页面 */
  div#post,
  div#page,
  div#archive {
	background: var(--trans-light);
	border: var(--border-style);
	border-radius: 20px;
	--border-style: 2px solid rgb(82, 224, 132);
  }

  
  /* 导航栏 */
  #page-header.nav-fixed #nav {
	background: rgba(255, 255, 255, 0.88);
  }
  
  [data-theme="dark"] #page-header.nav-fixed #nav {
	background: rgba(0, 0, 0, 0.7) !important;
  }
  
  /* 夜间模式遮罩 */
  [data-theme="dark"] #recent-posts > .recent-post-item,
  [data-theme="dark"] #aside-content .card-widget,
  [data-theme="dark"] div#post,
  [data-theme="dark"] div#archive,
  [data-theme="dark"] div#page {
	background: var(--trans-dark);
  }
  
  
  /* 夜间模式页脚页头遮罩透明 */
  [data-theme="dark"] #footer::before {
	background: transparent !important;
  }
  [data-theme="dark"] #page-header::before {
	background: transparent !important;
  }
  
  /* 阅读模式 */
  .read-mode #aside-content .card-widget {
	background: rgba(118, 238, 152, 0.5) !important;
  }
  .read-mode div#post {
	background: rgba(114, 227, 146, 0.5) !important;
  }
  
  /* 夜间模式下的阅读模式 */
  [data-theme="dark"] .read-mode #aside-content .card-widget {
	background: rgba(25, 25, 25, 0.9) !important;
	color: #ffffff;
  }
  [data-theme="dark"] .read-mode div#post {
	background: rgba(25, 25, 25, 0.9) !important;
	color: #ffffff;
  }

13.页脚设置
去掉底部蓝色背景：打开….themes\butterfly\source\css_layout\footer.styl
删除#footer，bule的那一行。
更改底层文字。在js文件下新建foot.js文件，复制以下代码

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
// 动态心跳，更改自己的名称
$(document).ready(function(e){
    $('.copyright').html('©2018 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By 小刚的天堂');
})

$(document).ready(function(e){
    show_date_time();
})

//本站运行时间，更改自己建立站点的时间
function show_date_time(){
$('.framework-info').html('小破站已经运行<span id="span_dt_dt" style="color: #fff;"></span>');
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("8/8/2018 0:0:0");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#afb4db>'+daysold+'</font> 天 <font style=color:#f391a9>'+hrsold+'</font> 时 <font style=color:#fdb933>'+minsold+'</font> 分 <font style=color:#a3cf62>'+seconds+'</font> 秒';
}

引入外部js,建议下载到本地。https://code.jquery.com/jquery-3.6.1.min.js注意jquey文件引入在前。

14.导航栏常驻
引入外部css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav-fixed #nav{
    transform: translateY(58px)!important;
    -webkit-transform: translateY(58px)!important;
    -moz-transform: translateY(58px)!important;
    -ms-transform: translateY(58px)!important;
    -o-transform: translateY(58px)!important;
}
#nav{
    transition: none!important;
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
}

15.更改分割图标

1
2
3
4
5
# The setting of divider icon (水平分隔線圖標設置)
hr_icon:
  enable: true
  icon: '\f197' # the unicode value of Font Awesome icon, such as '\3423'
  icon-top:

https://fontawesome.com/search图标自己去这个网站找，注意butterfly支持到那个版本。

15.更改侧边栏

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
51
52
53
54
55
56
# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  #侧边栏右边还是左边显示
  position: right # left or right
  display:
  #这个目前还不清除是干嘛的
    archive: true
    tag: true
    category: false
  #作者卡片是否开启
  card_author:
    enable: true
    description:
    #链接按钮是否显示
    button:
      enable: false
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
 #公告卡片
  card_announcement:
    enable: true
    content: 
  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: false
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: false
    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: false
    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
# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  publish_date: 8/8/2018 00:00:00

16.旋转小风车
在主题配置文件中，更改如下，下面对应的为小风车的编号，可以更改为自己的编号

1
2
3
4
5
beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"

引入外部css

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}
/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}

Bilibili配置

参考https://guihet.com/bilishipin.html/comment-page-1这篇文章。同时评论区有更好的方案，但是我懒得弄了。参考https://meledee.com/2020/10/3270.html

1
2
3
4
<div class="bili">
    <iframe src="视频地址" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="bilibili">
    </iframe>
</div>

引入外部css

1
2
3
4
5
6
7
8
9
10
11
12
13
.bili {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.bilibili {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

或者

1
2
3
4
5
6
7
8
9
10
11
.bili16-9 {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
  
.bili4-3 {
    position: relative;
    overflow: hidden;
    padding-top: 75%;
}

相应代码改为

1
2
3
4
<div class="bili16-9">
    <iframe src="//player.bilibili.com/player.html?aid=290363084&bvid=BV1ff4y1p7T8&cid=330441793&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="bilibili">
    </iframe>
</div>

进阶配置

1.button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 鏈接
[text]        : 按鈕文字
[icon]        : [可選] 圖標
[color]       : [可選] 按鈕背景顔色(默認style時）
                      按鈕字體和邊框顔色(outline時)
                      default/blue/pink/red/purple/orange/green
[style]       : [可選] 按鈕樣式 默認實心
                      outline/留空
[layout]      : [可選] 按鈕佈局 默認為line
                      block/留空
[position]    : [可選] 按鈕位置 前提是設置了layout為block 默認為左邊
                      center/right/留空
[size]        : [可選] 按鈕大小
                      larger/留空
1
2
3
4
5
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}

This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}
Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly
2.label 高亮所需文字 
1
{% label text color %}

颜色可选default/blue/pink/red/purple/orange/green

1
2
臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

臣亮言：先帝 創業未半，而中道崩殂 。今天下三分，益州疲敝 ，此誠危急存亡之秋 也！然侍衞之臣，不懈於內；忠志之士 ，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作奸 、犯科 ，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

3.图片去除黑色遮罩
参考了https://blog.happyking.top/p/565768454564.html
方法一：引入外部css

1
2
3
4
/* 头图黑色遮罩层透明 */
#page-header::before{
  background: transparent!important;
}

方法二：
博客根目录/themes/butterfly/source/css/_layout/head.styl修改background color中的.3改为0,即可实现top img透明。改变数字可以实现透明度调整。