文中的配置文件仅为本人对主题的修改不代表butterfly主题的全部设置

主题安装

主题是来自jerryc127大佬的基于hexo-theme-melody修改的主題
主题地址：hexo-theme-butterfly

使用npm安装

在博客根目录下运行

1
npm i hexo-theme-butterfly

主题更新

在博客根目录下运行

1
npm update hexo-theme-butterfly

主题启用

修改站点配置文件_config.yml，把主题改为butterfly.

1
theme: butterfly

主题插件

butterfly依赖于pug与stylus渲染器

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

主题配置文件

把主题文件夹中的_config.yml复制到Hexo更目录下，并重命名为_config.butterfly.yml.

以后对butterfly主题的设置只需要在_config.butterfly.yml中进行即可。

如果是通过NPM安装的主题，主题配置文件在根目录下的node_modules/hexo-theme-butterfly中。

如果是通过Git安装的主题则主题的配置文件在根目录下的themes/butterfly中。

最终的结构

主题配置

页面设置

添加一些页面

标签页

  1. 进入博客根目录下

  2. 打开终端输入hexo new page tags

  3. 打开source/tags/index.md

  4. 修改其中的内容

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

类别页

  1. 进入博客根目录下

  2. 打开终端输入hexo new page categories

  3. 打开source/categories/index.md

  4. 修改其中的内容

1
2
3
4
5
---
title: 类别
date: 2020-01-01 00:00:00
type: "categories"
---

番剧

影视剧·书籍·游戏

需要安装hexo-butterfly-douban插件

插件原地址：hexo-butterfly-douban

1
npm install hexo-butterfly-douban --save

将下方的配置加入到Hexo的配置文件中

Hexo的配置文件是根目录下的_config.yml，_config.butterfly.yml是主题的配置文件哦。

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
douban:
  user: userid
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
  timeout: 10000

user: 你的豆瓣ID.打開豆瓣，登陆账号，点击 “个人主页” ，地址栏中的https://www.douban.com/people/xxxxxx/其中的”xxxxxx”就是你的ID了。
builtin: 是否将生成的页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true。
title: 页面的标题.
quote: 写在页面开头的一段話,支持html语法.
timeout: 爬取数据的超時時間，默认是 10000ms。
meta: 插入 到页面，可解決部分浏览器无法显示豆瓣图片的問題（会导致一些插件出错，例如 不蒜子计数器。）
comments： 是否显示突变
top_img： 顶部图片
aside： 是否显示侧边栏

如果设置 builtin 设为 true 的，直接运行 hexo g 就会自动生成。

如果设置中 builtin 设为 false 的,需要在 hexo g 后再运行 hexo douban。

应为hexo douban的缘故无法使用hexo d进行部署了，请使用hexo deploy。

记得第一次安装完一定要hexo douban，不然访问访问页面都是404

友链

  1. 进入博客根目录下

  2. 打开终端输入hexo new page link

  3. 打开source/link/index.md

  4. 修改其中的内容

1
2
3
4
5
---
title: 友链
date: 2020-01-01 00:00:00
type: "link"
---
添加友链

在博客根目录中找到source/_data文件夹，在其中创建link.yml 。(如果沒有 _data 文件夾，就一起创建了吧)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- class_name: 友情链接
  class_desc: 
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: Hexo官网

- class_name: 网站
  class_desc: 一些可能或者貌似会用到的网站
  link_list:
    - name: Github
      link: https://www.github.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 全球最大的交友网站
    - name: Github
      link: https://www.gitlab.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 全球最大私人朋友圈

随笔

需要安装hexo-butterfly-artitalk插件

1
npm install hexo-butterfly-artitalk --save

配置LeanCloud，移步Artitalk 文档 - LeanCloud 的相关准备。

在Hexo的配置文件或者主題的配置文件中添加

1
2
3
4
5
6
7
8
9
10
# Artitalk
# see https://artitalk.js.org/
artitalk:
  enable: true
  appId:
  appKey:
  path:
  js:
  option:
  front_matter:

appId:【必选】LeanCloud 创建的应用的 AppID。
appKey:【必选】LeanCloud 創建的应用中的 AppKEY。
path:可选】Artitalk 的路径名称（默认为 artitalk，生成的页面为 artitalk/index.html）。
js:【可选】更换 Artitalk 的 js CDN（默认为 https://cdn.jsdelivr.net/npm/artitalk） 。
option:【可选】Artitalk 需要的額外配置。
front_matter:【可选】Artitalk 页面的 front_matter 配置。

404页面

主题内置了一个简单的404頁面，可在设置中开启

本地预览时，访问出错的网站是不会跳到404页面的。

如需本地预览，请访问http://localhost:4000/404.html

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: "頁面沒有找到"
  background:

主题配置

站点配置

站点配置文件_condig.yml

修改网站的标题、副标题、关键字、作者名、时区、语言、邮箱等

1
2
3
4
5
6
7
8
# Site
title: "Plaudern's 的跑路博客"
subtitle: ''
description: ''
keywords: 
language: zh-CN
timezone: ''
email:

导航菜单

主题配置文件_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# format: name: link || icon
# sub-menu
# name || icon:
#   name || link || icon

menu:
   主页: / || fas fa-home
   分类||fas fa-list:
      归档: /archives/ || fas fa-archive
      标签: /tags/ || fas fa-tags
      类别: /categories/ || fas fa-folder-open
   媒体||fas fa-list:
      影视剧: /movies/ || fas fa-film
      番剧: /bangumis/ || fas fa-video
      书籍: /books || fas fa-book   #This is your books page
      游戏: /games || fas fa-gamepad-alt  #This is your games page
   友链: /link/ || fas fa-link
   随笔: /anysay/ || fas fa-comment-dots
  # About: /about/ || fas fa-heart

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

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

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

顶部图

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
# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img: https://image.plaudern.net/images/2021/04/22/background2.jpg

# If the banner of page not setting, it will show the top_img
default_top_img: https://image.plaudern.net/images/2021/04/22/background2.jpg

# The banner image of archive page
archive_img: https://image.plaudern.net/images/2021/04/22/background2.jpg

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: https://image.plaudern.net/images/2021/04/22/background2.jpg

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img: https://image.plaudern.net/images/2021/04/22/background2.jpg

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: https://image.plaudern.net/images/2021/04/22/background2.jpg

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img: https://image.plaudern.net/images/2021/04/22/background2.jpg

|配置|解釋|
|||
|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|

头像

1
2
3
avatar:
  img: https://image.plaudern.net/images/2021/04/22/avatar.jpg
  effect: false # 转圈动画

图片描述文字

1
2
# figcaption (圖片描述文字)
photofigcaption: true

文章复制设置

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true  # 是否開啟網站複製權限
  copyright:    # 複製的內容後面加上版權信息
    enable: false  #  是否開啟複製版權信息添加
    limit_count: 50  #  字數限制，當複製文字大於這個字數限制時，將在複製的內容後面加上版權信息

页面底部设置

1
2
3
4
5
6
footer:
  owner:
    enable: true   # 是否开启
    since: 2018    # 站点开始时间
    custom_text:   # 自定义文本支持HTML
    copyright: true # Copyright of theme and framework

侧边栏

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
aside:
  enable: true  # 是否启用侧边栏
  hide: false   # 是否隐藏
  button: true  # 是否有开关按钮
  mobile: true # 手机是否显示
  position: left # left or right 左边或者右边显示
  card_author:    # 作者页
    enable: true
    description: 一只摸鱼怪，酷爱跑路。
    button:   
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/Plaudern
  card_announcement:  # 公告页面
    enable: true
    content: 随时摸鱼，随时跑路，今天还没有跑路哦
  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

侧边栏社交图标

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

需要什么就加什么，冒号前是icon，默认用的是Font Awesome可以去https://fontawesome.dashgame.com/自己找中间用 || 隔开，注意空格，后面的是名称。

评论系统

选择评论

1
2
3
4
5
6
7
8
9
10
11
12
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
   - Valine
  # - Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

Valine配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# valine
# https://valine.js.org
valine:
  appId:  # leancloud application app id
  appKey:  # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: Please leave your footprints # valine comment input placeholder (like: Please leave your footprints)
  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN: # emoji CDN
  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
  option:

google套间

google网站验证

1
2
3
4
5
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
site_verification:
   - name: google-site-verification
     content: xxxxxx

google分析

1
2
3
# Google Analytics
# https://analytics.google.com/analytics/web/
google_analytics: 你的代碼 # 通常以`UA-`打頭

google广告

1
2
3
4
5
6
google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入個人識別碼
  enable_page_level_ads: true

背景特效

1
2
3
4
5
6
7
8
9
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true #設置是否每次點擊都更換綵帶
  mobile: false  # false 手機端不顯示 true 手機端顯示

页面美化

1
2
3
4
5
6
# Beautify (美化頁面顯示)
beautify:
  enable: true
  field: site # site/post   全站/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: '#F47466'

页面美化适用于，ol，li，h1-h5的样式

网站副标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 ,
  # 如果有英文雙引號' " ',請使用轉義字元 "
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 我摸鱼，我快乐！
    - 我维护，我裂开！
    - 今日还没有跑路哦！

加载动画

1
2
# Loading Animation (加載動畫)
preloader: true

字数统计

在blog根目录下安装hexo-wordcount

1
npm install hexo-wordcount --save

配置文件

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

图片查看

1
2
3
# fancybox
# http://fancyapps.com/fancybox/3/
fancybox: true

容许点击图片后放大查看

弹窗修改

1
2
3
4
5
6
7
8
9
# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: top-center
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#121212' # The background color of Toast Notification in dark mode

用以替代浏览器的alert提示框

CSS前缀

有些 CSS 並不是所有瀏覽器都支持，需要增加對應的前綴才會生效。

開啟 css_prefix 後，會自動為一些 CSS 增加前綴。（會增加 20%的體積）

1
2
# Add the vendor prefixes to ensure compatibility
css_prefix: true

预加载

當鼠標懸停到鏈接上超過 65 毫秒時，Instantpage 會對該鏈接進行預加載，可以提升訪問速度。

1
2
3
# https://instant.page/
# prefetch (預加載)
instantpage: true

中英文、符号自动空格

自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。

1
2
3
pangu:
  enable: true
  field: site # site/post

添加css与js

如想添加額外的js/css/meta等等東西，可以在Inject裏添加，支持添加到head(標籤之前)和bottom(標籤之前)。

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/self.css">
  bottom:
    - <script src="xxxx"></script>

文章配置

文章节选

1
2
3
4
5
6
7
8
# description： 只顯示description
# both： 優先選擇description，如果沒有配置description，則顯示自動節選的內容
# auto_excerpt：只顯示自動節選
# false： 不顯示文章內容

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

文章封面

1
2
3
4
5
6
7
8
9
10
11
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 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://image.plaudern.net/images/2021/04/22/background1.jpg

文章头部信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
post_meta:
  page:
    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 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: relative # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字


文章版权

為你的博客文章展示文章版權和許可協議。

1
2
3
4
5
post_copyright:
  enable: true
  decode: true #设为true来显示中文网址
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

可以在文章头部内容中单独设置版权或者关闭版权

1
2
3
4
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版權歸xxxxx所有，如有轉載，請註明來自原作者
1
copyright: false

文章打赏

1
2
3
4
5
6
7
8
9
reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:  #可以不写默认为img地质
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付寶

文章目录

1
2
3
4
toc:
  enable: true #是否显示目录
  number: true #是否显章节数
  style_simple: flase  #是否开启简洁模式

相关文章

相關文章推薦的原理是根據文章tags的比重來推薦

1
2
3
4
related_post:
  enable: true
  limit: 6 # 顯示推薦文章數目
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

外挂标签

標籤外掛是Hexo獨有的功能，並不是標準的Markdown格式。

以下的寫法，只適用於Butterfly主題，用在其它主題上不會有效果，甚至可能會報錯。使用前請留意

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: modern
  icons: true
  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
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 标题
class 【可選】標識，不同的標識有不同的配色（ default / primary / success / info / warning / danger ）
no-icon 【可選】不顯示 icon
style 【可選】可以覆蓋配置中的 style（simple/modern/flat/disabled）