hexo-butterfly主题

写在前言

本文主要记录下Hexo使用butterfly主题优化的一些操作，便于后续可寻可查，首先感谢butterfly主题官方提供者

butterfly主题

hexo-theme-melody官方介绍

If you are in Mainland China, you can download in Gitee

下载安装主题

1，在你的 Hexo 根目使用git可以直接下载

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

或者NPM安装

npm i hexo-theme-butterfly

2，在hexo工作文件夹的根配置文件_config.yml中设置主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

3，执行如下命令测试看是否安装成功（需要在hexo主题根目录执行）

hexo clean
hexo d
hexo server

主题页面设置

标签页

前往你的 Hexo 博客的根目录
输入 hexo new page tags
你会找到source/tags/index.md这个文件
修改这个文件：

hexo new page tags

5. 添加添加 type: “tags”

---
title: 标签
date: 2022-08-23 00:17:54
type: "tags"
---

分类页

前往你的 Hexo 博客的根目录
输入hexo new page categories
你会找到source/categories/index.md这個文件
修改这个文件：
记得添加 type: “categories”

#hexo new page categories
---
title: 分类
date: 2022-08-23 00:20:08
type: "categories"
---

友情链接

前往你的 Hexo 博客的根目錄
输入 hexo new page link
你会找到source/link/index.md這個文件
修改这个文件：
記得添加 type: “link”

#hexo new page link
---
title: 友情链接
date: 2022-08-23 00:23:12
type: "link"
---

6，友情链接添加

在Hexo博客目录中的source/_data（如果沒有 _data 文件夾，请自行创建），创建一个文件link.yml

- class_name: 友情链接
  class_desc: 记录生活，学习点滴
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强调的博客框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

class_name 和 class_desc 支持 html 格式，如不需要，也可以留空。

相册

图库页面是一个普通的页面挂在图片信息概念，具体构建如下所示

#hexo new page photos
# 在source/photos/index.md文件中：使用标签外挂galleryGroup

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁紙' '/photos/wallpaper' https://chen1900s-1257020962.cos.ap-chongqing.myqcloud.com/my-blog/image/3.jpg %}
{% galleryGroup '动漫' '关于动漫的图片' '/photos/comic'    https://chen1900s-1257020962.cos.ap-chongqing.myqcloud.com/my-blog/image/timg3.jpg %}
</div>

子页面

子也面也是普通的也面，你只需要hexo new page xxxxx 创建你的也面就行

然后使用标签外挂 gallery，具体用法请查看对应的內容。

# 创建子页面
hexo new page daily

# 在指定source/daily/index.md文件中外挂gallery
{% gallery %}
![](https://chen1900s-1257020962.cos.ap-chongqing.myqcloud.com/my-blog/image/timg.jpg)
![](https://chen1900s-1257020962.cos.ap-chongqing.myqcloud.com/my-blog/image/image-20220826125722620.png)
{% endgallery %}

404页面

主題內置了一個简单的404页面，可在設置中开启

在主题_config.yml配置文件，查看404配置

# A simple 404 page
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: https://chen1900s-1257020962.cos.ap-chongqing.myqcloud.com/my-blog/image/image-20220823004052578.png

其他页面

同理，使用相同的方式创建，我这边创建有如下页面

hexo new page   archives  #归档
hexo new page   messageboard #留言板
hexo new page   music     #音乐
hexo new page   movies    #电影
hexo new page   game      #游戏
hexo new page   book      #书籍
hexo new page   about     #关于我

站点主题设置

语言

修改站点Hexo根目录配置文件 _config.yml

默认是 en

主題支持三种语音

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

网站资料

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

# Site
title: 'JingWei Chen'
subtitle: ''
description: '抬头，微笑，你好'
keywords: kubernetes
author: JingWei Chen
language: zh-CN
timezone: 'Asia/Shanghai'

导航菜单

修改主题的配置文件位于themes/butterfly/_config.yaml

前面列文字可自行更改，默认是英文的，用户可以根据需求修改成中文，示例如下

menu:
   首页: / || fas fa-home
   归档: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
   留言板: /messageboard/ || fa fa-paper-plane
   友链: /link/ || fas fa-link
   娱乐 || fas fa-list||hide:
     音乐: /music/  || fas fa-music
     电影: /movies/ || fas fa-video
     游戏: /game/   || fas fa-gamepad
     相册: /photos/ || fa fa-camera-retro
     电子书: /book/ ||  fa fa-book
   关于我: /about/ || fas fa-heart

必须是 /xxx/，后面||分开，然后写图标名，如果不希望显示图标，图标名可不写。

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

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

副主题设置

如果没设置副标题，上面的description：签名，就是显示在主页面。而设置的话，签名自动不显示，副标题出现。

修改主題配置文件

# the subtitle on homepage (主页subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Effect Speed Options (打字效果速度參數)
  startDelay: 200 # time before typing starts in milliseconds
  typeSpeed: 100 # type speed in milliseconds
  backSpeed: 100 # backspacing speed in milliseconds
  # loop (循环字)
  loop: true
  # 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:
    - As long as willing to learn, it will be able to learn.
    - 只要愿意学习，就一定能够学会
    - Take learning as a kind of living habits.
    - 把学习当成一种生活习惯

副标题字体大小颜色

在\themes\butterfly\source\css\_layout中的head.styl:

#site-subtitle
    color: var(--white)   #此处修改为白色
    font-size: 1.05em     #字体大小

    +minWidth768()
      font-size: 1.55em   #字体大小

图片设置

图片可以使用网上的图片(即使用该图片链接)，也可以使用\themes\butterfly\source\img下的图片。

网站图标

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

个人资料头像

# Avatar (头像)
avatar:
  img: /img/avatar.png
  effect: false

首页面图片

# The banner image of home page (首页的横幅图像)
index_img: /img/index_img.jpg

子标签页图片

# The banner image of archive page
archive_img: /img/tag.jpg

主页的顶部图可以在_config.yml设置index_img
``archives页的顶部图可以在_config.yml设置archive_img`
其他page页的顶部图可以在各自的md页面设置front-matter中的top_img

favicon: /img/favicon.png
avatar:
  img: /img/tit.png
  effect: false
index_img: /img/index_img.jpg
default_top_img: /img/tag.jpg #这个推荐：不加入可能部分标签页不出现图片
archive_img: /img/tag.jpg
tag_img: /img/tag.jpg
category_img: /img/tag.jpg

文章列表图片

修改主題配置文件 /themes/butterfly/_config.yaml

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
  default_cover:
  
文章封面设置：
一个:
 default_cover: https://xxxx.jpg
多个:
此时会随机选择一张
  default_cover:
     - https://i.loli.net/2020/05/01/xxxxxx.jpg
or文章内

图片查看大图

修改主題配置文件 /themes/butterfly/_config.yaml

这是两种方式，只能选择一个 或者 两个都不选

# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false

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

图片慢加载

1.新增hexo-lazyload-image模块

npm install hexo-lazyload-image --save

2.在主目录配置文件_config.yml增加配置

lazyload:
  enable: true
  loadingImg: /img/loading.gif

这个就是图片没加载出来的时候，出现一个动图转转转。

图片描述

可开启图片Figcaption描述文字显示

优先显示的 title 属性，然後是 alt 属性

修改主题配置文件，默认false，这里保持默认不修改

photofigcaption: false

代码框

1，代码高亮主题

Butterfly 支持6种代码高亮样式，修改主題配置文件

darker
pale night
light
ocean
mac
mac light

highlight_theme: light

2，代码复制

主題支持代码复制功能，修改主题配置文件

highlight_copy: true

3，代码展开和折叠

在默认情況下，代码框自动展开，可设置是否所有代码框都关闭专题，点开>可展开代码，修改主題配置文件

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

4，代码换行

在默认情況下，Hexo 在编译的時候不会实现代码自动換行。如果你不希望在代码块的区域里有橫向滾动條的話，那麼你可以考慮开启這個功能。

修改主题配置文件

code_word_wrap: true   #我这边设置的是false

如果你是使用 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: ''

5，代码高度设置

3.7.0 及以上支持

注意：單位是 px，直接添加數字，如 200

实际限制高度为 highlight_height_limit + 30 px 多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit 一点時，出現展开按鈕，展开沒內容。

不適用于隐藏後的代码块（ css 設置 display: none）

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

highlight_height_limit: false # unit: px

社交信息设置

Butterfly支持 font-awesome v6图标.

书写格式图标名：url || 描述性文字(可以选择使用fa fa-xxx图标，也可以选择使用阿里iconfont图)

# social settings (社交图标设置)
# formal:
#   icon: link || the description
social:
   fab fa-github: https://github.com/chen1900s || Github
   fas fa-envelope: chen1900s@163.com || Email
   fab fa-qq:  tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=728831102&website=www.oicqzone.com || QQ

主页文章节选

因为主题UI的关系，主页文章節選只支持自动節選和文章页description。

在butterfly里，有四種可供選擇

description：只显示description
both：優先選擇description，如果沒有配置description，則显示自动節選的內容
auto_excerpt：只显示自动節選
false：不显示文章內容

修改主题配置文件/themes/butterfly/_config.yaml

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

顶部图

如果不要显示顶部图，可直接配置 disable_top_img: true
其它页面（tags/categories/自建页面）和文章页的 top_img ，請到對應的 md 页面設置front-matter中的top_img
以上所有的 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

文章置顶

【推荐】hexo-generator-index从 2.0.0 开始，已經支持文章置頂功能。你可以直接在文章的front-matter区域里添加sticky: 1属性来把這篇文章置頂。數值越大，置頂的優先級越大。

文章封面

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

修改主題配置文件/themes/butterfly/_config.yaml

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当沒有设置cover時，默认的封面显示
  default_cover:

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

default_cover:
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页相关配置

生成文章唯一链接

Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文。

permalink: :year/:month/:day/:title

前往你的Hexo博客根目录，打开cmd命令窗口执行npm install hexo-abbrlink –save

npm install hexo-abbrlink --save

修改站点配置文件_config.yml中permalink属性

permalink: :year/:month/:day/:title/
#修改为
permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
  alg: crc32   #算法： crc16(default) and crc32
  rep: hex     #进制： dec(default) and hex

文章meta显示

这个选项是用来显示文章的相关信息的。

修改主题配置文件/themes/butterfly/_config.yaml

post_meta:
  page:
    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 显示描述性文字
  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 显示描述性文字

文章版权

為你的博客文章展示文章版权和许可协议。

修改主题配置文件/themes/butterfly/_config.yaml

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/

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

copyright: false

从3.0.0开始，支持对单独文章设置版权信息，可以在文章Front-matter单独設置

copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版版权xxxxx所有，如有转载，请注明来自原作者

文章打赏

在你每篇文章的結尾，可以添加打賞按鈕。相關二維码可以自行配置。

對于沒有提供二維码的，可配置一張軟件的icon圖片，然後在link上添加相應的打賞鏈接。用户点擊圖片就会跳轉到鏈接去。

link可以不寫，会默认為圖片的鏈接。

修改主題配置文件/themes/butterfly/_config.yaml 建议把img相关二维码文件替换成自己的二维码

reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付宝

TOC显示

在文章页，会有一一个目录，用于显示TOC。修改主题配置文件/themes/butterfly/_config.yaml

toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # for post

属性	说明
post	文章页是否显示 TOC
page	普通页面是否显示 TOC
number	是否显示章節數
expand	是否展开 TOC
style_simple	簡潔模式（側邊欄只显示 TOC, 只對文章页有效）

為特定的文章配置

在你的文章md文件的頭部，加入toc_number和toc，並配置true或者false即可。

主題会優先判斷文章Ma

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

修改主題配置文件/themes/butterfly/_config.yaml

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

文章錨点

开启文章錨点後，當你在文章页進行滾动時，文章鏈接会根據標題ID進行替換
(注意: 每替換一次，会留下一個歷史記錄。所以如果一篇文章有很多錨点的話，網页的歷史記錄会很多。)

修改主題配置文件/themes/butterfly/_config.yaml

# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

文章过期提醒

可設置是否显示文章过期提醒，以更新时间为基准。

# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

limit_day： 距離更新時間多少天才显示文章過期提醒
message_prev ： 天數之前的文字
message_next：天數之後的文字

文章编辑按钮

在文章標題旁邊显示一個編輯按鈕，点擊会跳轉到對應的鏈接去，这里保持默认配置不设置

# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

文章分页按钮

可设置分页的逻辑，也可以关闭分页显示，我这里设置的是1

# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post  下一篇显示的是舊文章
# 2: The 'next post' will link to new post 下一篇显示的是新文章
# false: disable pagination  关闭分页按鈕
post_pagination: 1

隐藏部分文章不在首页显示

如果有些文章不想在主页显示，可以修改主题配置文件 themes/butterfly/layout/includes/mixins/post-ui.pug

添加了if article.hide !== true这一行，然后这一行后全部需要按下tab缩进一层。

mixin postUI(posts)
  each article , index in page.posts.data
    if article.hide !== true
      .recent-post-item

修改文章在md文件的头部信息中添加hide: true，示例如下

title: Hexo搭建个人博客
tags: Hexo
categories: Hexo
keywords: hexo
hide: true  #添加这个

复制相关配置

可配置网站是否可以复制、复制的內容是否添加版权信息

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true
  copyright:
    enable: true
    limit_count: 50

#enable 	是否开启網站複製權限
#copyright	複製的內容後面加上版權信息
#enable	     是否开启複製版權信息添加
#limit_count	字數限制，當複製文字大于這個字數限制時，將在複製的內容後面加上版權信息

博客年份

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

修改主題配置文件

footer:
  owner:
    enable: true
    since: 2018

页脚自定义文本

custom_text是一個給你用来在页腳自定义文本的选项。通常你可以在这里声明文本等。支持 HTML。

修改主题配置文件

custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!

编辑/themes/butterfly/layout/includes/footer.pug文件

将以下内容：

&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}

改为:

&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

将以下内容

&copy;${nowYear} By ${config.author}

改为:

&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

将以下内容添加到标签内：

<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

右下角按钮

简繁转换

简体繁体互换，右下角会有简繁转换按鈕。

修改主题的配置文件

# Conversion between Traditional and Simplified Chinese (简繁转换)
translate:
  enable: true    # 2022 默认false
  # The text of a button
  default: 简
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  defaultEncoding: 1
  # Time delay
  translateDelay: 0
  # The text of the button when the language is Simplified Chinese
  msgToTraditionalChinese: '繁'
  # The text of the button when the language is Traditional Chinese
  msgToSimplifiedChinese: '简'

夜间模式

右下角会有夜间模式按钮，修改主题配置文件

# dark mode
darkmode:
  enable: true
  # dark mode和 light mode切换按钮
  button: true
  autoChangeMode: false

阅读模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有阅读模式按钮。

修改主题配置文件

# Read Mode (阅读模式)
readmode: true

按钮排序

# Don't modify the following settings unless you know how they work (非必要请不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重复
rightside_item_order:
  enable: false
  hide: # readmode,translate,darkmode,hideAside
  show: # toc,chat,comment

侧边栏设置

侧边排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

修改主题配置文件

aside:
  enable: true
  hide: true
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: iconfont icon-CSDN           #fab fa-github
      text: My Blog
      link: https://blog.chen1900s.cn/
  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: false
    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

访问人数(UV 和 PV)

访问 busuanzi 的官方网站查看更多的介绍，修改主题配置文件

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

网页已运行时间

修改主题配置文件

runtimeshow:
  enable: true   #默认false
  publish_date: 9/9/2018 00:00:00
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

自定义添加栏目

标签外挂（Tag Plugins）

标签外挂是Hexo独有的功能，并不是标準的Markdown格式。

以下的写法，只适用于Butterfly主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意

Follow me信息修改

在主题配置文件修改

card_author:
  enable: true
  description:
  button:
    enable: true
    icon: fab fa-github
    text: my blog
    link: https://chen1900s.github.io/

公告信息

在主题配置文件修改

card_announcement:
    enable: true
    content: This is my Blog  #修改此处

在线聊天

从3.0开始，Butterfly主题内置了多种在线聊天工具。你可以选择开启一种，方便你与访客的交流。这些工具都提供了一个按钮可以打开/关闭聊天窗口。
主题也提供了一个集合主题特色的按钮来替换这些工具本身的按钮，这个聊天按钮将会出现在右下角里。
你只需要把chat_btn打开就行。

修改主题配置文件

# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: true  默认false

为了不影响访客的体验，主题提供一个chat_hide_show配置，设为true后，使用工具提供的按钮时，只有向上滚动才会显示聊天按钮，向下滚动时会隐藏按钮。

修改主题配置文件

# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: true

分享功能

只能选择一个分享服务商

可以到addtoany查看使用説明

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

搜索功能

记得运行 hexo clean

你需要安装 hexo-generator-search，根据它的文档去做相应配置

修改主题配置文件

npm install  hexo-generator-search  --save

local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

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

修改主题配置文件

algolia_search:
  enable: true 
  hits:
    per_page: 6

分割线图标更换

将图标更换为“太空飞船”。

修改主题配置文件

hr_icon:
  enable: true
  icon: '\f197' # the unicode value of Font Awesome icon, such as '\3423'
  icon-top: -10px

广告设置

主题已集成谷歌广告（自动广告）

修改主题配置文件

# Google Adsense (谷歌广告)
google_adsense:
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true

美化/特效

自定义主题色

可以修改大部分UI颜色

修改主题配置文件，比如：

颜色值必须被双引号包裹，就像”#000”而不是#000。否则将会在构建的时候报错，我这里保持默认配置不做修改

# 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"
#   meta_theme_color_light: "ffffff"
#   meta_theme_color_dark: "#0d0d0d"

页面背景

默认显示白色，可设置图片或者颜色修改主题配置文件_config.yml：

# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'   #默认留空的

可以自定义

在\Butterfly\source\css\目录下创建css文件 backgound.css

#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

修改配置文件_config.yml的引入方式

inject:
  head:
     - <link rel="stylesheet" href="/css/background.css">
  bottom:

如果背景色不生效，设置_config.yml，需将background:设置成#efefef

# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'

鼠标点击特效

修改主题配置文件

# Mouse click effects: fireworks (鼠标点击效果: 煙火特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  mobile: false

打字特效

修改主题配置文件

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: false

页面背景特效

有三种，根据自己喜好选择开启，将enable设置为true就可以

静态彩带

# 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: true
 #点击页面，彩带会进行变化。

动态彩带

# Fluttering Ribbon (动態彩帶)
canvas_fluttering_ribbon:
  enable: true
  mobile: true
  
#这个彩带可以动态变换

自动吸附

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  color: '0,0,255' #线条颜色, default: '0,0,0'; 
  opacity: 0.7 # 线条的不透明度 (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # 线条数量, default: 99.
  mobile: false

Snackbar 弹窗

修改主题配置文件

# Snackbar (Toast Notification 彈窗)
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: false  #默认就是false
  position: top-right
  bg_light: '#49b1f5' # light 背景下的样式
  bg_dark: '#121212' # dark 背景下的样式
  
#开启后，在你设置的位置会有可爱的小弹窗出现

底部设置

修改主题配置文件

# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2018
  custom_text: welcome to my <a href="https://blog.chen1900s.cn">blog</a>!
  copyright: false # Copyright of theme and framework 默认为true
  ICP: # Chinese ICP License   #最后一句
    enable: true
    url: http://www.beian.gov.cn
    text: 豫ICP备20001029号
    icon: /img/icp.png

评论功能

开启评论需要在butterfly.yml—comments—use中填写你需要的评论。

支持双评论显示，只需要配置两个评论（第一个为默认显示）

comments:
  use:
   - Valine
  # - Disqus    
  text: true 
  lazyload: false
  count: false

参数	解释
use	使用的评论（填写的评论首字母需要大写。最多支持两个，不需要就留空）
text	是否显示评论服务商的名字
lazyload	是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启lazyload后，评论数将不显示）
count	是否在文章顶部显示评论数

注意：双评论不能是Disqus 和Disqusjs 一起，由于其共用同一个 ID，会出错。

以下是举例的我在用的：Valine

1.在LeanCloud中注册账号，并进入。

2.创建应用

3.创建成功后，进入设置

4.进入应用Keys

应用Keys中有AppID和AppKey，这两个需要填写到你的butterfly.yml中

5.修改主题配置文件

# valine
# https://valine.js.org
valine:
  appId:              #  app id
  appKey:              # app key
  pageSize: 10
  avatar: monsterid 
  lang: zh-CN 
  placeholder: Please leave your footprints p
  guest_info: nick,mail,link 
  recordIP: true 
  serverURLs: 
  bg: 
  emojiCDN: 
  enableQQ: true 
  requiredFields: nick,mail

音乐Aplayer

安装 hexo-tag-aplayer 插件

npm install --save hexo-tag-aplayer

关闭 asset_inject

由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为 false

在 Hexo 的配置文件中

aplayer:
  meting: true
  asset_inject: false

开启主题的 aplayerInject

在主题的配置文件中，enable 设为 true 和 per_page 设为 true

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

插入 Aplayer html为了适配 hexo-tag-aplayer，主题内置的 Meting js 仍为 1.2 版本，并非最新的 2.x 版本。

Aplayer html 例子：

<div class="aplayer no-destroy" data-id="7607717868" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="false" muted></div>

把 aplayer代码插入到主题配置文件的 inject.bottom 去

inject:
  head:
  bottom:
       - <div class="aplayer no-destroy" data-id="7607717868" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="false" muted></div>

运行 Hexo 就可以看到网页左下角出现了 Aplayer

最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的 pjax 设为 true

音乐页面也显示播放列表，可以直接在/source/music/目录下的index.md 里面填入

---
title: 音乐
date: 2018-08-24 11:06:40
type: music
---
{% meting "7607717868" "netease" "playlist" "theme:#ad7a86" "mutex:true" "listmaxheight:340px" "preload:auto" %}

电影movies

电影界面使用了插件 hexo-butterfly-douban，使用方法请参考插件的文档。

hexo-butterfly-douban介绍

安裝

npm install hexo-butterfly-douban --save

配置

將下面的配置寫入站點的配置文件 _config.yml 里(不是主題的配置文件).

##电影
douban:
  user: 261805469
  builtin: true
  book:
    title: '书籍'
    quote: '读书不是为了拿文凭或者发财，而是成为一个温度，有情趣，会思考的人！'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
    path: book
    limit:
  movie:
    title: '电影'
    quote: '一杯奶茶，一个人，一张票，一场电影'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
    path: movies
    limit:
  game:
    title: '游戏'
    quote: '不好意思，目前还没有找到好玩的游戏，有推荐的吗'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
    path: game
    limit:
  timeout: 10000

butterfly主题

下载安装主题

主题页面设置

标签页

分类页

友情链接

相册

子页面

404页面

其他页面

站点主题设置

语言

网站资料

导航菜单

副主题设置

副标题字体大小颜色

图片设置

网站图标

个人资料头像

首页面图片

子标签页图片

文章列表图片

图片查看大图

图片慢加载

图片描述

代码框

1，代码高亮主题

2，代码复制

3， 代码展开和折叠

4，代码换行

5，代码高度设置

社交信息设置

主页文章节选

顶部图

文章置顶

文章封面

文章页相关配置

生成文章唯一链接

文章meta显示

文章版权

文章打赏

TOC显示

為特定的文章配置

相关文章

文章錨点

文章过期提醒

文章编辑按钮

文章分页按钮

隐藏部分文章不在首页显示

复制相关配置

Footer页尾设置

博客年份

页脚自定义文本

页面底部 footer跳动的心

右下角按钮

简繁转换

夜间模式

阅读模式

按钮排序

侧边栏设置

侧边排版

访问人数(UV 和 PV)

运行时间

最新评论

自定义添加栏目

Follow me信息修改

公告信息

在线聊天

分享功能

搜索功能

分割线图标更换

广告设置

美化/特效

自定义主题色

页面背景

鼠标点击特效

打字特效

页面背景特效

Snackbar 弹窗

底部设置

3，代码展开和折叠