前言

butterfly是基于melody主题的基础上开发的主题，UI界面非常好，本博客就采用butterfly主题。

安装主题

请详见：Hexo安装Butterfly主题

将 butterfly/_config.yml 文件复制，重命名为 _config.butterfly.yml 放在hexo根目录下，在这个文件里做修改。

配置主题

设置导航栏

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
  清单||fas fa-list:
     - 音乐 || /music/ || fas fa-music
     - 电影 || /movies/ || fas fa-video
     - 照片 || /Gallery/ || fas fa-images

可以在不需要的项目前加 # 来注释代码，使其不出现在导航栏中。

配置网站图标和头像

1
2
3
4
5
6
7
8
9
10
11
12
13
# Image (圖片設置)
# --------------------------------------

# Favicon（網站圖標）
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
  img: /img/avatar.png
  effect: false

# The banner image of home page
index_img: /img/img.jpg

图片最好不要太大，不然可能导致加载太慢。

配置副标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Effect Speed Options (打字效果速度參數)
  startDelay: 300 # time before typing starts in milliseconds
  typeSpeed: 150 # type speed in milliseconds
  backSpeed: 50 # backspacing speed in milliseconds
  # 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:
    - 风来疏竹，风过而竹不留声；雁度寒潭，雁去而潭不留影。故君子事来而心始现，事去而心随空。
    - 有志者事竟成，破釜沉舟，百二秦关终属楚；苦心人天不负，卧薪尝胆，三千越甲可吞吴。
    - 欢迎您来到竹山一叶的小家(❁'◡'❁)
    - 希望您有快乐的一天，也欢迎常来竹山一叶的小家串串门(●'◡'●)

也可以考虑开启和调用第三方的服务。

侧边栏

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
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
  card_announcement:
    enable: true
    content: 欢迎光临小站，这里是我日常收集和整理的总结，希望能对你有所帮助：）<br/><br/>本站的内容经过个人加工总结而来，也参考了网友们分享的资料，如有侵权，请第一时间联系我，我将及时进行修改和删除😊
  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: none # 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: true
    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

不需要的按钮可以用 false 关闭

配置友链

新建source/_data/link.yml文件，添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- 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: 快速、简单且强大的网誌框架
    - name: 大宇
      link: https://confucianmen.gitee.io/blog/
      avatar: https://s1.ax1x.com/2020/08/11/aX3EsP.gif
      descr: 热爱分享 热爱学习

配置社交图标

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

统计分析

我这里用百度统计

1
2
3
4
5
# Analysis
# --------------------------------------

# Baidu Analytics
baidu_analytics: {百度统计的号码}

纯色背景

在 _config.butterfly.yml 下找到 theme_color ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"

可自行更换主题中上述元素的颜色。

彩带背景

在 _config.butterfly.yml 下找到 canvas_ribbon ：

1
2
3
4
5
6
7
8
9
# canvas_ribbon (静止彩带背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true   #点击鼠标更换彩带
  mobile: false

图片背景

将自己喜欢的图片放入 theme/butterfly/source/img 中

在 _config.butterfly.yml 下找到 background ：

1
background: url(/blog/img/bg.jpg)

自定义渐变背景

需要在 theme/butterfly/source/css 中新建一个 css 文件，文件名自取

之后在 _config.butterfly.yml 下找到 inject ：

1
2
3
4
5
6
7
8
# Inject
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/mycss.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

在 head 中插入 - <link rel="stylesheet" href="/css/mycss.css">

页脚

默认页脚为主题色。可在 _config.butterfly.yml 下找到 footer ，

其中包含页脚设置：

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

可以配置页脚显示的内容

还有页脚背景：

1
2
# Footer Background
footer_bg: false

打开后页脚图片将与主页图片（index_img）底部一致；

也可进行自定义渐变页脚：

在原本配置渐变背景的 css 文件下复制代码：

1
2
3
4
5
6
7
8
9
/* 页脚footer */
#footer {
    /* 与背景渐变效果一致*/
    background-image: linear-gradient(-225deg, #d6badf 0%, #B8DCFF 28%, #58abf3 100%);
}

#footer:before {
    background-color: rgba(0, 0, 0, 0);
}

渐变效果可以自己配置。

文章的封面

每篇文章都可以设置自己的封面，或者统一使用一个封面，这些都可以在 _config.butterfly.yml 下找到；

1
2
3
4
5
6
7
8
9
10
11
cover:
  # display the cover or not (是否显示文章封面)
  index_enable: false
  aside_enable: false
  archives_enable: false
  # 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:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

建议没有文章封面时，将上述几个开关可以考虑关闭掉。

文章基本设置

在 _config.butterfly.yml 下找到 post_meta :

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: date # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: false # 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 显示描述性文字

主页文章显示高度，显示篇数：

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

字数统计

1
2
3
4
5
6
# wordcount (字数统计)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true