Hexo Butterfly主题相关配置

关于部署Hexo的主题butterfly后，一些相关的配置

其实关于hexo主题的基础网上都挺详细，详情可见作者的教程

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

首页导航栏

在 _config.butterfly.yml 下找到 menu ：

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/ || fas fa-link
   #关于: /about/ || fas fa-heart

可在自己不需要的项目前加 # 来使其不出现在导航栏中。

img

首页的副标题

在 _config.butterfly.yml 下找到 subtitle ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: false
  # loop (循环打字)
  loop: false
  # 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:
    - 多看书，多看报；少玩电脑，多睡觉

我把打字效果和循环效果都关了，在sub后添加自己的副标题，注意要加 - 且 - 后面要有空格，否则只能显示一个字。当然也可添加多个内容，但好像要打开打字效果，效果见封面。

首页图片

在 _config.butterfly.yml 下找到 index_img ：

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

在主题文件夹 /source/img 文件夹下添加 img.jpg

文件夹里还有头像、网页图标等文件，都可更改（网页图标更改部署后一直无法成功，具体原因也不是很清楚···）

图片最好不要太大，不然可能导致加载太慢，可以用以下网站进行压缩
http://niaoapi.com/

可在 _config.butterfly.yml 里打开 加载动画 ：

1
2
# Loading Animation (加载动画)
preloader: true

缓解载入时间太久的尴尬。

设置主页图片显示大小：

在 _config.butterfly.yml 下找到 index_top_img_height ：

1
2
3
4
# The position of site info, eg: 300px/300em/300rem/10% (主页标题距离顶部距离)
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem (主页top_img高度)
index_top_img_height:

在 index_top_img_height ：后面加上300px、400px都可，不加就是默认全屏显示。

侧边栏

在 _config.butterfly.yml 下找到 aside ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
aside:
  enable: true
  hide: false
  button: true
  mobile: true     # display on mobile
  position: left   # left or right，决定侧边栏在右边还是在左边
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: github
      link: https://github.com/username
  card_announcement:        #公告
    enable: false
    content: 问题不大

后面一堆代码我就不列了，不需要的按钮可以用 false 关闭，在card_author的link后面写上自己主页的链接

社交按钮

在 _config.butterfly.yml 下找到 social ：

1
2
3
4
5
6
# social settings (社交图标设置)
# formal:
#   icon: link || the description
social:
   #fab fa-github: https://github.com/xxx || Github
   fas fa-envelope: mailto:xxx@example.com || Email

想要更多图标可在font-awesome v6中查找
找到后可查看其代码，如 QQ ：
<i class="fa-brands fa-qq"></i>
可提取为 fab fa-qq 带入 socical 中：

1
2
3
4
social:
   #fab fa-github: https://github.com/xxx || Github
   fas fa-envelope: mailto:xxx@example.com || Email
   fab fa-qq: http://wpa.qq.com/msgrd?v=3&uin=你自己的QQ号&site=qq&menu=yes || QQ

注意 ‘||’ 及后面的说明不能缺少。

背景

纯色背景

在 _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

后面还有动态彩带背景和canvas_nest（我也不知道是什么，有兴趣的可以试试看）

图片背景

将自己喜欢的图片放入 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">

关闭 js 动态背景

原本 background 处改成：

1
background: "#efefef"

打开css文件，复制代码：

1
2
3
4
5
6
7
/* 背景渐变 */
#web_bg{
    /*紫粉渐变*/
    /*background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);*/
    /*粉白蓝*/
    background-image: linear-gradient(-225deg, #dfbacd 0%, #B8DCFF 48%, #58abf3 100%);
}

可自行更改配置，不需要的代码用/* */注释， css 代码可在这里得到，选择喜欢的渐变颜色，点击右下角 copy css 复制 css 代码即可。
效果如下：

img

页脚

默认页脚为主题色。可在 _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);
}

效果如下：

img

同上，渐变效果可以自己配置。

css 、js 还能配置许多效果，网上许多博主也有发布魔改教程，感兴趣的可以自行查找，这里不过多赘述。

文章

文章的封面

每篇文章都可以设置自己的封面，或者统一使用一个封面，这些都可以在 _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

建议没有文章封面时，将上述几个开关（ index_enable aside_enable archives_enable）都关掉，否则主页的格式会显得奇丑无比：

img

文章基本设置

在 _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

这里我多开了一个字数统计，也是在 _config.butterfly.yml 里的

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