butterflt主题

前置

开始我的主题是matery的，经过不断修改又来到了butterfly这个主题。这里省略 node 和 hexo 的安装，直接在初始化博客开始。相关操作请查看之前的博客搭建。

由于目前主题已更新，此文件中部分配置可能失效。请参考作者博客或文档进行。
官方的3.0版本： jerryc

安裝

在你的博客根目录下：

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的 dev 分支，可以

1
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

建议选择最新的分支，因为更新一些新的东西优化了还是挺好的

启动主题

修改站点配置文件_config.yml，把主题改为 Butterfly（这里的name要与你的主题下的分支一样）

1
theme: Butterfly

如果你没有 pug 以及 stylus 的渲染器，请下载安装： npm install hexo-renderer-pug hexo-renderer-stylus –save or yarn add hexo-renderer-pug hexo-renderer-stylus

平滑升级

为了主题的平滑升级，Butterfly 使用了 data files 特性。

推荐把主题默认的配置文件_config.yml 复製到 Hexo 工作目录下的 source/_data/butterfly.yml，如果 source/_data的目录不存在那就创建一个。

注意，如果你创建了 butterfly.yml, 它将会替换主题默认配置文件_config.yml 里的配置项 (不是合併而是替换), 之后你就只需要通过git pull 的方式就可以平滑地升级 theme-butterfly 了。

主题页面

  • Page Front-matter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title:
    date:
    type: （tags,link,categories这三个页面需要配置）
    comments: (是否需要显示评论，默认true)
    description:
    top_img: (设置顶部图)
    mathjax:
    katex:
    ---

  • Page Front-matter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title:
    date:
    type: （tags,link,categories这三个页面需要配置）
    comments: (是否需要显示评论，默认true)
    description:
    top_img: (设置顶部图)
    mathjax:
    katex:
    ---

标签页

  1. 前往你的 Hexo 博客的根目录

  2. 输入 hexo new page tags

  3. 你会找到 source/tags/index.md 这个文件

  4. 修改这个文件：

1
2
3
4
5
---
title: 标签
date: 2020-02-02 10:00:00
type: "tags"
---

分类页

  1. 前往你的 Hexo 博客的根目录

  2. 输入 hexo new page categories

  3. 你会找到 source/categories/index.md 这个文件

  4. 修改这个文件：

1
2
3
4
5
---
title: 分类
date: 2020-02-02 10:00:00
type: "categories"
---

友情链接

  • 前往你的 Hexo 博客的根目录

  • 输入 hexo new page link

  • 你会找到 source/link/index.md这个文件

  • 修改这个文件：

1
2
3
4
5
---
title: 友情链接
date: 2020-02-02 10:00:00
type: "link"
---
  • 添加友链
    在 Hexo 博客目录中的 source/_data，创建一个文件 link.yml
1
2
3
4
5
---
title: 友情链接
date: 2020-02-02 10:00:00
type: "link"
---
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
class:
  class_name: 友情链接
  link_list:
    1:
      name: 初辰の博客
      link: https://chuchendjs.github.io/
      avatar: https://img-blog.csdnimg.cn/20200429004412881.jpg
      descr: 一个还在努力中的程序袁
    2:
      name: test
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: test  


class2:
   class_name: 链接无效
   link_list:
     1:
       name: test
       link: https://blog.xxx.com
       avatar: https://img.antmoe.com/avatar.png
       descr: test
     2:
       name: test
       link: https://www.axxxx.cn/
       avatar: https://img.antmoe.com/avatar.png
       descr: test
  • 友情链接界面设置
    需要添加友情链接，可以在 Butterfly.yml 配置
    可在友情链接上写上自己的个人资料，方便其他人添加。
1
2
3
4
5
6
7
8
Flink:
  headline: 友情链接
  info_headline: 我的Blog资料
  name: Blog 名字： 
  address: Blog 地址： https://www.antmoe.com/
  avatar: Blog 头像： https://img.antmoe.com/avatar.jpg
  info: Blog 简介： 一个收藏回忆与分享技术的地方！
  comment: 如果需要交换友链,请留言

音乐界面

音乐界面使用插件 hexo-tag-aplayer 使用方法请参考文档

注意：hexo-douban会主动生成页面，所以不需要自己创建。对应的网页的top_img可以butterfly.yml修改。

音乐界面参考 https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

电影

电影界面参考 https://github.com/mythsman/hexo-douban

主題配置

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

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

    网站资料

    修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的_config.yml
1
2
3
4
5
6
7
8
title: 初辰の博客
subtitle: '初辰の博客'
description: '一个收藏回忆与分享技术的地方！'
keywords: 关键词
author: 作者
language: zh-CN
timezone: '时区'
email: 邮箱

导航菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
menu:
  首页: / || fa fa-home
  时间轴: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-folder-open
  媒体||fas fa-list:
    - 番剧 || /bangumis/ || fab fa-youtube
    - 电影 || /movies/ || fa fa-film
    - 书单 || /books/ || fas fa-book
    - 音乐 || /music/ || fa fa-music
  聚宝盒: /box/ ||fab fa-xbox
  #游戏||fas fa-gamepad:
  微语: /talk/ || far fa-comment
  清单||fa fa-heartbeat:
    - 相册 || /gallery/ || far fa-image
    - 主页 || /home/ || fab fa-phoenix-framework
  留言板: /contact/ || far fa-comments
  友链: /link/ || fa fa-link
  关于: /about/ || fa fa-heart

必须是 /xxx/，后面 || 分开，然后写图标名。菜单名称可自己修改
格式：
显示名称:
路径 ||icon
sub-menu 格式
名称 ||icon:
名称 || 路径 || icon

注： 导航的文字可以更改

代码

Butterfly 支持了 Material Theme 全部 5 种代码高亮样式：

  • default
  • darker
  • pale night
  • light
  • ocean

配置 butterfly.yml

1
2
3
highlight_theme: light #代码高亮主题
highlight_copy: true #代码是否启用复制功能
highlight_shrink: true #true代码框不展开，需点击 '>' 打开 false展开 none不显示'>'按钮，代码块展开

代码框展开与不展开

1
highlight_shrink: true # true 全部代码框不展开，需点击 '>' 打开/ false 代码框打开，有'>'点击按鈕 | none 代码框展开，没有点击按钮

自动换行

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

1
code_word_wrap: true #代码自动换行

然后找到你站点的 Hexo 配置文件_config.yml，将 line_number 改成 false:

1
2
3
4
5
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

社交图标

Butterfly 支持 font-awesome v4 和 font-awesome v5. 如需开启 font-awesome v5, 需要在 Butterfly.yml上开启

1
2
3
4
CDN_USE:
  css:
    - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
    - https://use.fontawesome.com/releases/v5.8.1/css/all.css

无论 V4 还是 V5, 书写格式都是一样的图标名：url

1
2
3
4
social:
  fa fa-qq: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=2036556725
  fa fa-envelope: mailto:chuchen2020@163.com
  fa fa-rss: /atom.xml

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

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

在 butterfly.yml 里可以开启 auto_excerpt 的选项，你的文章将会在自动截取部分显示在主页。（默认显示 150 个字）

1
2
3
auto_excerpt:
  enable: true
  length: 150

如果没有开启自动节选，则会显示文章页 front-matter 里面设置的 description。

注意：如果开启了自动节选功能，代码块的显示将有可能不正常。

顶部图

顶部图有 2 种配置：具体 url 和（留空，true 和 false，三个效果一样）

page 页

当具体 url 时:

主页的顶部图可以在 Butterfly.yml 设置 index_img

archives 页的顶部图可以在Butterfly.yml 设置 archive_img

其他 page 页的顶部图可以在各自的 md 页面设置 front-matter 中的 top_img

页面如果没有设置各自的 top_img，则会显示 default_top_img 图片

当顶部图留空，true 和 false

主页会显示纯颜色的顶部图

其他 page 的顶部图没有设置时，也会显示纯颜色的顶部图

post 页

post页的顶部图会优先显示各自 front-matter 中的top_img, 如果没有设置，则会缩略图（即各自 front-matter 中的 cover)，如果没有则会显示显示 default_top_img 图片

文章相关项

这个选项是用来显示文章的相关信息的。配置 butterfly.yml

1
2
3
4
post_meta:
  date_type: both #可设置文章日期显示创建日期(created)或者更新日期(updated)或者两种都显示(both)
  categories: true # or false 是否显示分类
  tags: true # or false 是否显示标签

文章版权

1
2
3
4
post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

如果有文章（例如：转载文章）不需要显示版权，可以在文章 Front-matter 单独设置

1
copyright: false

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置 配置 butterfly.yml

1
2
3
4
5
6
7
8
9
reward:
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.jpg
        text: 微信
    - itemlist:
        img: /img/alipay.jpg
        text: 支付宝

文章封面

文章的 markdown 文档上，在 Front-matter 添加 cover, 并填上要显示的图片地址。
如果不配置 cover, 可以设置显示默认的 cover

配置 butterfly.yml

1
default_cover: https://tva1.sinaimg.cn/large/832afe33ly1gbhxplql40j22801e0q3c.jpg

当配置多张图片时，会随机选择一张作爲 cover. 此时写法应为

1
2
3
4
default_cover:
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章置顶

给文章置顶你需要安装(hexo-generator-index-pin-top 或者 hexo-generator-indexed),记得下载掉hexo-generator-index

  1. 如果使用hexo-generator-index-pin-top 在文章front-matter区域里添加top: true属性来将文章置顶
  2. 如果使用hexo-generator-indexed, 在文章的front-matter 区域里添加sticky: 1属性来把文章置顶，数值越大置顶的优先级就越大，也就是说越靠前。

文章隐藏

如需要文章隐藏功能，请裝插件hexo-generator-indexed或者hexo-hide-posts

在文章的 Front-matter 添加

1
hide: true

头像

配置 butterfly.yml

1
avatar: https://img-blog.csdnimg.cn/20200429004412881.jpg

TOC

在文章页，会有一个目录，用于显示 TOC。 手机端默认显示按钮。
配置butterfly.yml

1
2
3
toc:
  enable: true
  number: true   #显示章节数字

为特定的文章配置是否显示 TOC 和特定的目录章节数字
在你的文章 md 文件的头部，加入 toc_number 和 toc 项，并配置 true 或者 false 即可。

toc 是否显示文章 TOC

toc_number 和是否显示章节数

配置之后你的特定的文章将会拥有它自己的目录数字的显示与否，而不会受全局的配置影响。

自动打开 TOC

可选择进入文章页面时，是否自动打开 sidebar 显示 TOC

1
2
auto_open_sidebar:
  enable: true

相关文章

相关文章推荐的原理是根据文章 tags 的比重来推荐

配置butterfly.yml

1
2
3
4
related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

博客年份

since 是一个来展示你站点起始时间的选项。它位于页面的最底部。
配置butterfly.yml

1
since: 2020

页脚自定义文字

footer_custom_text 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。

配置butterfly.yml

1
footer_custom_text: Hi, welcome to my <a href="https://chuchendjs.github.io/">blog</a>!

ICP

对于部分有备案的域名，可以在 ICP 配置显示。

配置butterfly.yml

1
2
3
4
5
ICP:
  enable: true
  url: http://www.beian.miit.gov.cn/
  text: 粤ICP备xxxx
  icon: /img/icp.png

右下角按钮

简繁转换
简体繁体互换

右下角会有简繁转换按钮。

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 简
  #网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #博客网址
  cookieDomain: "https://jerryc.me/"
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"

夜间模式

右下角会有夜间模式按钮

配置butterfly.yml

1
2
darkmode:
  enable: true

  • V2.0.0 开始增加一个选项，可开啓自动切换 light mode 和 dark mode

  • autoChangeMode: 1 跟随系统而变化，不支持的浏览器 / 系统将按照时间晚上 6 点到早上 6 点之间切换为 dark mode

  • autoChangeMode: 2 只按照时间 晚上 6 点到早上 6 点之间切换为 dark mode, 其余时间为 light mode

  • autoChangeMode: false 取消自动切换 

1
2
3
 
 # 自动切换 dark mode和 light mode
autoChangeMode: false

阅读模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。

只会出现在文章页面，右下角会有阅读模式按钮。

配置butterfly.yml

1
2
readmode:
  enable: true

侧边设置

可自行决定哪个项目需要显示，可决定位置。（至少需要显示一个）
配置butterfly.yml

1
2
3
4
5
6
7
8
9
aside:
 position: right # left or right
 card_author: true #作者卡片
 card_announcement: true #公告卡片
 card_recent_post: false #最新文章卡片
 card_categories: false #分类卡片
 card_tags: true #标签卡片
 card_archives: false #归档卡片
 card_webinfo: true #网站信息卡片

访问人数

访问 busuanzi 的官方网站查看更多的介绍。

配置butterfly.yml

1
2
3
4
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

网页已运行时间
配置butterfly.yml

1
2
3
4
5
6
runtimeshow:
  enable: true
  start_date: 2020/4/28 6:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

标签外挂

注意：标签外挂是Hexo独有的功能，並不是标签的Markdown格式。
以下的写法，只适用于Butterfly主题，用在其它主題上不会有效果，甚至可能会报错。使用前请留意

Note (Bootstrap Callout)

移植于next主题

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

用法：

1
2
3
4
5
6
7
8
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示标签符
{% endnote %}

{% note primary no-icon %}
primary 提示标签符
{% endnote %}

{% note success %}
success 提示标签符
{% endnote %}

{% note info %}
info 提示标签符
{% endnote %}

{% note warning %}
warning 提示标签符
{% endnote %}

{% note danger %}
danger 提示标签符
{% endnote %}

style: simple

在这里插入图片描述

style: modern
在这里插入图片描述
style: flat
在这里插入图片描述
style: disabled
在这里插入图片描述

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

写法：

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div
  • name：图库名字
  • description：图库描述
  • link：链接到对应相册的地址
  • img-url：图库封面的地址

评论

个人觉得valine还不错

遵循 Valine的指示去配置你的 LeanCloud 應用。以及查看相应的配置説明。
官方文档：valine.js.org
参考文档：
valine 添加博主标签及微信，QQ通知

Valine评论之Valine-admin配置攻略

搜索系统

Algolia

  1. 你需要安装 hexo-algolia 或 hexo-algoliasearch. 根据它们的説明文档去做相应的配置。

  2. 配置butterfly.yml

1
2
3
4
5
6
7
8
9
algolia_search:
 enable: true
 hits:
   per_page: 6

 labels:
   input_placeholder: Search for Posts
   hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
   hits_stats: "${hits} results found in ${time} ms"

本地搜索系统

  1. 你需要安装 hexo-generator-search. 根据它的文档去做相应配置。注意格式只支持 xml。

  2. 配置butterfly.yml

1
2
3
4
5
local_search:
  enable: false
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

网页验证

如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平台进行提交。
各自的验证码可从各自管理平台拿到

配置butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
yandex_site_verification:

# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:

# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:

分析统计

统计找到各个平台找到代码即可

1
2
3
baidu_analytics: #百度统计
google_analytics: # 谷歌分析通常以`UA-`打头
tencent_analytics: #腾讯分析

广告

1
2
3
4
5
google_adsense:
  enable: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入个人识别码
  enable_page_level_ads: true

美化 / 特效

配置butterfly.yml

颜色值必须被双引号包裹，就像 “#000” 而不是 #000。否则将会在构建的时候报错！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color:
  enable: true
  main: "#cb4fe2"
  paginator: "#cb4fe2"  # 标记页码背景
  button_hover: "#FF7242"
  text_selection: "#cb4fe2" # 选择文字背景
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#cb4fe2" # 左边目录的默认背景
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#cb4fe2"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"

footer 的背景会与 top_img 的一致，当设置 false 时，将与主题色一致。
配置butterfly.yml

1
2
# footer是否显示图片背景(与top_img一致)
footer_bg: true

打字效果

配置butterfly.yml

1
2
3
4
activate_power_mode:
  enable: true
  colorful: true # 冒光特效
  shake: false # 抖动特效

彩带

动感彩带：

配置butterfly.yml

1
2
3
canvas_ribbon_piao:
  enable: true
  mobile: false # false 手機端不顯示 true 手機端顯示

鼠标点击效果

配置butterfly.yml

  1. 烟花：
1
2
fireworks:
  enable: true
  1. 爱心
1
2
click_heart:
  enable: true
  1. 文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ClickShowText:
  enable: false
  text: 
    - 富强
    - 民主
    - 文明
    - 和谐
    - 自由
    - 平等
    - 公正
    - 法治
    - 爱国
    - 敬业
    - 诚信
    - 友善
  fontSize: 15px

文章页美化

会改变 ol、ul、h1-h5 的样式
配置butterfly.yml

1
2
3
4
post_beautify:
  enable: true
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

title-prefix-icon 填写的是 fontawesome 的 icon 的 Unicode 数

字数统计

要为 Butterfly 配上字数统计特性，你需要如下几个步骤:

  1. 打开 hexo 工作目录

  2. npm install hexo-wordcount –save or yarn add hexo-wordcount

  3. 配置butterfly.yml

1
2
wordcount:
  enable: true

文章置顶

要为你一些文章置顶，你需要如下步骤:

  1. 打开 hexo 工作目录
  2. npm uninstall hexo-generator-index –save 然后 npm install hexo-generator-index-pin-top –save
  3. 你要在文章的 front-matter 区域里添加 top: True 属性来把这篇文章置顶。
  4. 你可以参考 hexo-generator-index-pin-top 这个仓库来了解更多细节。

    图片放大查看模式

    fancybox

    配置butterfly.yml
1
2
3
# fancybox http://fancyapps.com/fancybox/3/
fancybox:
  enable: true

medium_zoom

配置butterfly.yml

1
2
medium_zoom:
  enable: true

Snackbar 弹窗

配置butterfly.yml

1
2
3
4
5
6
7
8
# https://github.com/polonel/SnackBar
# position 弹窗位置
# 可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景