【Hexo系列】【7】Butterfly主题使用及美化

本期将为大家讲解Hexo Butterfly主题的使用。

1. 主题介绍

hexo-theme-butterfly是基于 Molunerfinn 的 hexo-theme-melody 的基础上进行开发的，当前版本是v4.13.0。

主题官网：https://github.com/jerryc127/hexo-theme-butterfly

官网效果图：

2. 主题安装

2.1 下载主题

建议你使用clone最新版本的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换。

切换到博客的主题根目录下打开Git Bash并执行以下命令：

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

下载完成后，会在项目themes目录下生成butterfly文件夹。

如果没有修改代码的需求可以直接通过npm来安装。

npm i hexo-theme-butterfly

仅支持Hexo 5.0.0及以上版本

2.2 渲染器下载

需要安装安装pug 和 stylus 渲染器，否则启动之后访问页面会报错。

错误内容： extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

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

2.3 切换主题

与所有 Hexo 主题启用的模式一样。当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 butterfly。

theme: butterfly

到此，Butterfly主题安装完成。

2.4 验证主题

启动服务并访问http://localhost:4000查看效果.

hexo clean && hexo s

3. 主题配置

主题配置文件是themes/butterfly/_config.yml。

3.1 配置说明

以下是themes/butterfly/_config.yml文件的翻译版本，可以复制进去替换原文件

# Navigation bar settings (导航栏设置)
# 见 https://butterfly.js.org/posts/4aa8abbe/##导航栏设置-Navigation-bar-settings
# --------------------------------------

nav:
  logo: # 图片
  display_title: true
  fixed: false # 固定导航栏

# Menu 目录
menu:
  # 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

# Code Blocks (代码块相关)
# --------------------------------------

highlight_theme: light # darker / pale night / light / ocean / false
highlight_height_limit: false # 单位：像素
code_word_wrap: false
# 高亮工具栏
highlight_theme_macStyle: false # 使用 Mac 风格
highlight_copy: true # 复制按钮
highlight_lang: true # 显示代码语言
highlight_shrink: false # true: 收缩代码块 / false: 展开代码块 | none: 展开代码块并隐藏按钮
highlight_fullpage: true # true: 添加切换全屏的按钮

# Social Settings (社交图标设置)
# 正式:
#   icon: 链接 || 描述 || 颜色
social:
  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email || '#4a7dbe'

# Image (图片设置)
# --------------------------------------

# Favicon（网站图标）
favicon: /img/favicon.png

# Avatar (头像)
avatar:
  img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
  effect: false

# 禁用所有横幅图片
disable_top_img: false

# 首页的横幅图片
index_img:

# 如果页面没有设置横幅，则显示顶部图片
default_top_img:

# 归档页面的横幅图片
archive_img:

# 如果标签页面没有设置横幅，则显示顶部图片
# 注意：标签页面，不是标签页面（子标签页面的顶部图片）
tag_img:

# 标签页面的横幅图片
# 格式:
#  - 标签名: xxxxx

tag_per_img:

# 如果分类页面没有设置横幅，则显示顶部图片
# 注意：分类页面，不是分类页面（子分类页面的顶部图片）
category_img:

# 分类页面的横幅图片
# 格式:
#  - 分类名: xxxxx

category_per_img:

# 封面
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 首页封面显示的位置
  # left/right/both
  position: both
  # 当没有设置封面时，显示默认封面
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# 替换无法显示的图片
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# 一个简单的 404 页面
error_404:
  enable: false
  subtitle: '页面未找到'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

# post_meta 页面元数据
post_meta:
  page: # 首页
    date_type: created # created 或 updated 或 both 主页文章日期显示创建日或者更新日或都显示
    date_format: date # date 或 relative 显示日期还是相对日期
    categories: true # true 或 false 主页是否显示分类
    tags: false # true 或 false 主页是否显示标签
    label: true # true 或 false 显示描述性文字
  post:
    position: left # left 或 center 文章页标题位置
    date_type: both # created 或 updated 或 both 文章页日期显示创建日或者更新日或都显示
    date_format: date # date 或 relative 显示日期还是相对日期
    categories: true # true 或 false 文章页是否显示分类
    tags: true # true 或 false 文章页是否显示标签
    label: true # true 或 false 显示描述性文字

# 在首页显示文章介绍
# 1: description
# 2: both (如果描述存在，则显示描述，否则显示自动摘要)
# 3: auto_excerpt (默认)
# false: 不显示文章介绍
index_post_content:
  method: 3
  length: 500 # 如果你设置方法为 2 或 3，需要配置长度

# 锚点
anchor:
  # 当你滚动时，URL 将根据标题 id 更新
  auto_update: false
  # 点击标题滚动并更新锚点
  click_to_scroll: false

# 图片描述文字
photofigcaption: false

# 复制设置
# copyright: 在复制内容后面添加版权信息
copy:
  enable: true
  copyright:
    enable: false
    limit_count: 50

# 文章
# --------------------------------------

# toc (目录)
toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # 针对文章
  scroll_percent: true

# 文章版权
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# 赞助/打赏
reward:
  enable: false
  text:
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: wechat
    # - img: /img/alipay.jpg
    #   link:
    #   text: alipay

# 文章编辑
# 在线轻松浏览和编辑博客源代码
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # 例如: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

# 相关文章
related_post:
  enable: true
  limit: 6 # 显示的文章数量
  date_type: created # 或者 created 或 updated 文章日期显示创建日或者更新日

# 文章分页
# value: 1 || 2 || false
# 1: 下一篇文章将链接到旧文章
# 2: 下一篇文章将链接到新文章
# false: 禁用分页
post_pagination: 1

# 显示文章的过时提醒
noticeOutdate:
  enable: false
  style: flat # 风格: simple/flat
  limit_day: 500 # 何时显示
  position: top # 位置: top/bottom
  message_prev: 已经有
  message_next: 天未更新，文章内容可能已过时。

# 页脚设置
# --------------------------------------

footer:
  owner:
    enable: true
    since: 2020
  custom_text:
  copyright: true # 主题和框架的版权

# 侧边栏
# --------------------------------------

aside:
  enable: true
  hide: false
  button: true
  mobile: true # 在移动设备上显示
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: 关注我
      link: https://github.com/xxxxxx
  card_announcement:
    enable: true
    content: 这是我的博客
  card_recent_post:
    enable: true
    limit: 5 # 如果设置为 0 将显示全部
    sort: date # date 或 updated
    sort_order: # 除非你知道它如何工作，否则不要修改设置
  card_categories:
    enable: true
    limit: 8 # 如果设置为 0 将显示全部
    expand: none # none/true/false
    sort_order: # 除非你知道它如何工作，否则不要修改设置
  card_tags:
    enable: true
    limit: 40 # 如果设置为 0 将显示全部
    color: false
    orderby: random # 标签顺序，random/name/length
    order: 1 # 排序方式。1，升序；-1，降序
    sort_order: # 除非你知道它如何工作，否则不要修改设置
  card_archives:
    enable: true
    type: monthly # yearly 或 monthly
    format: MMMM YYYY # 例如：YYY