Hexo主题 - Butterfly(三) 主题配置-1

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

default(en)
zh-CN (简体中文)
zh-TW (繁体中文)

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的 _config.yml

导航菜单

修改 主题配置文件

注意: 如果我们前面配置了_config.butterfly.yml，那么就修改根目录的_config.butterfly.yml

如果没有配置_config.butterfly.yml,就修改node_modules\hexo-theme-butterfly\_config.xml

Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

必须是 /xxx/，后面 ||分开，然后写图标名。

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

默认子目录是展开的，如果你想要隐藏，在子目录里添加 hide。

List||fas fa-list||hide:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video

注意：导航的文字可自行更改

例如：

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

导航栏设置

主题配置文件中

nav:
  logo: #image
  display_title: true
  fixed: false # fixed navigation bar

参数	解释
logo	网站的 logo，支持图片，直接填入图片链接
display_title	是否显示网站标题，填写 true 或者 false
fixed	是否固定状态栏，填写 true 或者 false

代码

代码块中的所有功能只适用于 Hexo 自带的代码渲染

如果使用第三方的渲染器，不一定会有效

代码高亮主题

Butterfly 支持6种代码高亮样式：

darker
pale night
light
ocean
mac
mac light

修改 主题配置文件

highlight_theme: light

darker

pale night

light

ocean

mac

mac light

主题从 3.0 开始，支持使用自定义的代码顔色。

如何自定义主题，请查看下面这篇文章。

自定义代码配色

代码复制

主题支持代码复制功能

修改主题配置文件

highlight_copy: true

代码框展开/关闭

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

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

修改主题配置文件

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来单独配置文章收缩代码框。

highlight_shrink: true

highlight_shrink: false

highlight_shrink: none

代码换行

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

修改主题配置文件

修改 主题配置文件

如果你是使用 highlight 渲染，需要找到你站点的 Hexo 配置文件 _config.yml，将 line_number改成 false:

highlight:
  enable: true
  line_number: false # <- 改这里
  auto_detect: false
  tab_replace:

如果你是使用 prismjs 渲染，需要找到你站点的 Hexo 配置文件 _config.yml，将 line_number改成 false:

prismjs:
  enable: false
  preprocess: true
  line_number: false # <- 改这里
  tab_replace: ''

设置code_word_wrap之前:

设置code_word_wrap之后:

代码高度限制

3.7.0 及以上支持

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

highlight_height_limit: false # unit: px

注意：

单位是 px，直接添加数字，如 200
实际限制高度为 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit 一点时，出现展开按钮，展开没内容。
不适用于隐藏后的代码块（ css 设置 display: none）

社交图标

Butterfly支持 font-awesome v6图标.

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

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

图标名可在这寻找

PC:

mobile:

1560603353743

主页文章节选(自动节选和文章页description)

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

在butterfly里，有四种可供选择

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

修改 主题配置文件

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

description在front-matter里添加

顶部图

如果不要显示顶部图，可直接配置 disable_top_img: true

顶部图的获取顺序，如果都没有配置，则不显示顶部图。

页面顶部图的获取顺序：

各自配置的 top_img > 配置文件的 default_top_img

文章页顶部图的获取顺序：

各自配置的 top_img > cover > 配置文件的 default_top_img

配置中的值：

配置	解释
index_img	主页的 top_img
default_top_img	默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img	归档页面的 top_img
tag_img	tag 子页面的默认 top_img
tag_per_img	tag 子页面的 top_img，可配置每个 tag 的 top_img
category_img	category 子页面的默认 top_img
category_per_img	category 子页面的 top_img，可配置每个 category 的 top_img