目录
  1. 1. 主题的安装和升级
    1. 1.1. 安装
    2. 1.2. 应用主题
    3. 1.3. 平滑升级
  2. 2. 主题页面
    1. 2.1. Page Front-matter
    2. 2.2. Post Front-matter
    3. 2.3. 标签页
    4. 2.4. 分类页
    5. 2.5. 友情链接
      1. 2.5.1. 创建友情链接
      2. 2.5.2. 友情链接添加
      3. 2.5.3. 友情链接界面设置
  3. 3. 配置
    1. 3.1. 配置文件说明
    2. 3.2. 语言
    3. 3.3. 网站资料
    4. 3.4. 导航菜单
    5. 3.5. 代码
      1. 3.5.1. 代码高亮
      2. 3.5.2. 代码复制
      3. 3.5.3. 代码框展开/关闭
      4. 3.5.4. 代码换行
    6. 3.6. 社交图片
    7. 3.7. 主页文章节选(自动节选和文章页description)
    8. 3.8. 顶部图
      1. 3.8.1. page页
        1. 3.8.1.1. 当具体url时
        2. 3.8.1.2. 当顶部图留空·true和false
      2. 3.8.2. post页
    9. 3.9. 文章相关项
    10. 3.10. 文章版权
    11. 3.11. 文章打赏
    12. 3.12. 文章封面
    13. 3.13. 头像
    14. 3.14. toc
      1. 3.14.1. 为特定的文章配置是否显示TOC和特定的目录章节数字
      2. 3.14.2. 设置是否自动打开TOC
    15. 3.15. 相关文章
    16. 3.16. Footer设置
      1. 3.16.1. 博客年份
      2. 3.16.2. 脚本页自定义文本
      3. 3.16.3. ICP
    17. 3.17. 右下角按钮
      1. 3.17.1. 简繁转换
      2. 3.17.2. 夜间模式
      3. 3.17.3. 阅读模式
    18. 3.18. 侧边栏设置
      1. 3.18.1. 侧边排版
      2. 3.18.2. 访问人数busuanzi(UV和PV)
      3. 3.18.3. 运行时间
    19. 3.19. Note(Bootstrap Callout)
      1. 3.19.1. 配置
      2. 3.19.2. 用法
    20. 3.20. Gallery相册
    21. 3.21. 评论
      1. 3.21.1. Disqus
      2. 3.21.2. Laibili(来必力)
      3. 3.21.3. Gitalk
      4. 3.21.4. Valine
    22. 3.22. 分享
      1. 3.22.1. AddThis
      2. 3.22.2. Sharejs
      3. 3.22.3. Addtoany
    23. 3.23. 搜索系统
      1. 3.23.1. Algolia
      2. 3.23.2. 本地搜索
    24. 3.24. 网站验证
    25. 3.25. 分析统计
      1. 3.25.1. 百度统计
      2. 3.25.2. 谷歌统计
    26. 3.26. Mathjax
    27. 3.27. KaTex
    28. 3.28. 美化/特效
      1. 3.28.1. 自定义主题色
      2. 3.28.2. 网站背景
      3. 3.28.3. footer背景
      4. 3.28.4. 打字特效
      5. 3.28.5. 禁止彩带
      6. 3.28.6. 动态彩带
      7. 3.28.7. canvas-nest
      8. 3.28.8. 鼠标点击效果
        1. 3.28.8.1. 烟花
        2. 3.28.8.2. 爱心
        3. 3.28.8.3. 文字
      9. 3.28.9. 文章页美化
      10. 3.28.10. 自定义字体
      11. 3.28.11. 网站副标题
      12. 3.28.12. top_img显示大小
    29. 3.29. PWA
    30. 3.30. 字数统计
    31. 3.31. 文章置顶
    32. 3.32. 图片大图查看模式
      1. 3.32.1. Snackbar弹窗
  4. 4. 总结
hexo博客搭建二:Butterfly主题应用及配置

前面我们已经搭建好了自己的hexo博客(如果还不会的请看我上一篇文章hexo主题的搭建),但是默认主题不那么好看,所以我们就要更换一下主题,因为我用的是Butterfly这个主题,所以我就用这个主题来介绍一下如何配置和美化我们的博客,其他的主题配置也是大同小异。

主题的安装和升级

安装

在你博客的根目录里

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

应用主题

修改站点的配置文件_config.yml把主题改为Butterfly

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

---
title:
date:
type: (tags,link,categories这三个页面需要配置)
comments: (是否开启评论,默认true)
description:
top_img: (设置顶部图)
---

Post Front-matter

---
title:
date:
tags:
categories:
keywords:
description:
top_img: (除非特定,可以不写)
comments: 是否显示评论(除非设置false,可以不写)
cover: 缩略图
toc: 是否显示toc(除非特定文章设置,可以写)
toc_number: 是否显示toc数字(除非特定文章设置,可以不写)
copyright: 是否显示版权(除非特定文章设置,可以不写)
---

标签页

  1. 前往你的Hexo博客根目录
  2. 输入hexo new page tags
  3. 你会找到source/tags/index.md这个文件
  4. 修改这个文件:
---
tite: 标签
date: 2019-12-1 00:00:00
type: tags
---

分类页

  1. 前往你的Hexo博客的根目录
  2. 输入hexo new page categories
  3. 你会找到source/categories/index.md这个文件
  4. 修改这个文件:
---
title: 分类
date: 2019-12-1 00:00:00
type: categories
---

友情链接

为你的博客添加友情链接!

创建友情链接

  1. 前往你的Hexo博客的根目录
  2. 输入hexo new page link
  3. 你会找到source/link/index.md这个文件
  4. 修改这个文件:
---
title: 友情链接
date: 2019-12-1 00:00:00
type: link
---

友情链接添加

在Hexo博客根目录中的source/_data创建一个文件link.yml

class:
class_name: 友情链接
link_list:
1:
name: xxx
link: https://xxx.com
avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
descr: 添加描述
2
name: xxx
link: https://xxx.com
avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
descr: 添加描述

class2:
class_name: 无效链接
link_list:
1:
name: xxx
link: https://xxx.com
avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
descr: 添加描述
2:
name: xxx
link: https://xxx.com
avatar: https://xxx/xxx/avatar.png (也可以是本地文件)
descr: 添加描述

友情链接界面设置

需要添加友情链接,可以在Butterfly.yml配置
可以在友情链接上协商自己的个人资料,方便他人添加

Flink:
headline: 友情链接
info_headline: 我的Blog资料
name: Blog 名字: xxx
address: Blog 地址: https://xxx.com
avatar: Blog 头像: https://xxx.com
info: Blog 简介: xxx,xxx
comment: 如需交换友链,请留言


配置

配置文件说明

  • 站点配置文件_config.yml是hexo根目录下的配置文件
  • butterfly.ymlButterfly的配置文件,他需要你手动将主题目录下的config.yml文件复制到hexo根目录的source/_data/butterfly.yml中。如果文件或文件夹不存在,请手动创建。

语言

修改站点配置文件_config.ymllanguage参数

默认语言是en

主题支持三种语言

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

网站资料

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

导航菜单

配置butterfly.yml

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

必须是/xxx/,后面||分开,然后写图标名,菜单名可以自己修改

格式化:

显示名称:

路径||icon

sub-menu格式

名称||icon:

  • 名称||路径||icon

代码

代码高亮

Butterfly支持Material Theme5种高亮模式:

  • default
  • darker
  • pale night
  • light
  • ocean

配置butterfly.yml

highlight_theme: light

default

darker

pale night

light

ocean

代码复制

主题支持代码复制功能

配置butterfly.yml

highlight_copy: true

代码框展开/关闭

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

配置butterfly.yml

highlight_shrink: true #代码框不可展开,需点击'>'打开

highlight_shrink: true

highlight_shrink: flase

代码换行

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

配置butterfly.yml

code_word_wrap: true

然后找到你站点的Hexo配置文件_config.ymlline_number改成false:

highlight:
enable: true
line_number: flase
auto_detect: false
tab_replace:

设置code_word_wrap之前:

设置code_word_wrap之后:

社交图片

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

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

social:
fa fa-github: https://github.com/xxx
fa fa-rsss: /atom.xml

图标可以在这寻找

PC:

Mobile:

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

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

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

auto_excerpt:
enable: true
length: 150

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

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

顶部图

顶部图有两种配置:具体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

post_meta:
date_type: both #or created or updated 文章日期是创建日或者更新日或者都显示
categories: true # or false 是否显示分类
tags: true # or false 是否显示标签

在文章顶部的资料

date_type:可设置文章日期显示创建日期(created)或者更新日期(updated)或者两种都显示(both)

categories是否显示分类

tags是否显示标签

文章版权

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

配置butterfly.yml

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

如果有文章(例如:转载文章)不需要显示版权,可以在文章Front-matter单独设置

copyright: false

版权显示截图

文章打赏

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

配置butterfly.yml

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

default_cover: https://xxx.com/xxx.png

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

default_cover:
- https://xxx.com/xxx.png
- https://xxx.com/yyy.png
- https://xxx.com/zzz.png


头像

配置butterfly.yml

avatar: https://xxx/avatar.png

toc

在文章页,会有一个目录,用于显示TOC。手机端默认显示按钮。

配置butterfly.yml

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

PC

Moblie

为特定的文章配置是否显示TOC和特定的目录章节数字

在你的文章md文件的头部,加入toc_numbertoc项,并配置true或者false即可。

toc是否显示文章TOC

toc_number是否显示章节数

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

enable: true

number: false

设置是否自动打开TOC

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

auto_open_sidebar:
enable: true

相关文章

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

配置butterfly.yml

related_post:
enable: true
limit: 6 #显示推荐文章数目

Footer设置

博客年份

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

配置butterfly.yml

since: 2018

脚本页自定义文本

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

配置butterfly.yml

footer_custom_text: Hi,welcome to my <a href="http://c-hasel.cn/">blog</a>!

ICP

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

配置butterfly

ICP:
enable: true
url: https://www.beian.miit.gov.cn/state/outPortal/loginPortal.action
text: 渝ICP备xxx
icon: /img/icp.png

右下角按钮

简繁转换

简体繁体互换

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

配置butterfly.yml

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

简体

繁体

夜间模式

右下角会有夜间模式按钮

配置butterfly.yml

#夜间模式
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 取消自动切换

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

阅读模式

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

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

配置butterfly.yml

readmode:
enable: true

侧边栏设置

侧边排版

可自行决定哪个项目需要显示,可决定位置。

至少需要显示一个

配置butterfly.yml

aside:
position: right # left or right
card_author: true
card_announcement: true
card_recent_post: true
card_categories: true
card_tags: true
card_archives: true
card_webinfo: true

left

right

访问人数busuanzi(UV和PV)

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

配置butterfly.yml

busuanzi:
site_uv: true
site_pv: true
page_pv: true


运行时间

网页已运行时间

配置butterfly.yml

runtimeshow:
enable: true
start_date: 12/1/2019 00:00:00
##网页开通时间
#格式: 月/日/年 时间
#也可写成 年/月/日 时间

Note(Bootstrap Callout)

移植于next主题(注意,书写不是markdown规范,而是hexo特有的工呢,故在其它地方不会显示出效果)

配置

配置butterfly.yml

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

用法

{% 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.

具体效果、用法可查看这里

Gallery相册

2.0.0以上提供

区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更方便,与markdown格式一样。可根据需要插入到对应的md。

写法:

{% gallery %}
markdown 图片格式
{% endgallery %}

评论

只能选择一个评论服务商

Disqus

注册disqus配置你的disqus,然后在Butterfly里开启它。

配置butterfly.yml

disqus:
enable: true # or fasle
shortname: 你的disqus的 short-name

Laibili(来必力)

注册来必力配置你自己的来必力设置,然后在butterfly里开启它。

配置butterfly.yml

laibili:
enable: true # or false
uid: 你的laibili的uid

laibili的uid你能在这里找到:

Gitalk

遵循gitalk的指示去获取你的github Oauth应用的client id和secret值。以及查看他的相关配置说明。

然后配置butterfly.yml

gitalk:
enable: true
client_id: 你的client id
client_secret: 你的client secret
repo: 你的github仓库
owner: 你的github用户名
admin: 该仓库的拥有者或协作者

Valine

遵循Valine的指示去配置你的LeanCloud应用。以及查看相应的配置说明。

然后配置butterfly.yml

valine:
enable: false # if you want use valine,please set this value is true
appId: # leancloud application app id
appKey: # leancloud application app key
notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
verify: false # valine verify code (true/false)
pageSize: 10 # comment list page size
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
lang: en # i18n: zh-cn/en/tw
placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
guest_info: nick,mail,link #valine comment header inf

分享

只能选择一个分享服务商

AddThis

找到你的pub-id


配置butterfly.yml

addThis:
enable: true # or false
pubid: 你的pub-id

Sharejs

如果你不知道sharejs,看看它的说明。

配置butterfly.yml

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

Addtoany

可以找到addtoany查看使用说明

addtoany:
enable: false
item:
- facebook
- twitter
- wechat
- sina_weibo
- facebook_messenger
- email
- copy_link

搜索系统

Algolia

  1. 你需要安装hexo-algolia或者hexo-algoliasearch,根据它们的说明文档去做相应的配置。
  2. 配置butterfly.yml
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
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

# 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. 配置butterfly.yml
    baidu_analytics: 你的代码 #只复制打码部分

谷歌统计

  1. 登录谷歌分析的官方网站
  2. 找到你的谷歌分析的追踪ID
  3. 配置butterfly.yml
google_analytics: 你的代码 # 通常以'UA_'打头

Mathjax

建议使用KaTex获得更好的效果,下文有介绍!

配置butterfly.yml:

mathjax:
enable: true # or false
cdn: https://cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML # required

然后你需要修改一下默认的markdown渲染引擎来实现MathJax的效果。

查看:hexo-renderer-kramed

以下操作在你hexo博客的目录下(不是Butterfly的目录!):

效果:

KaTex

首先禁用MathJax(如果你配置过MathJax的话),然后修改你的butterfly.yml以便加载katex.min.css:

katex:
enable: true
cdn:
css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css

你不需要添加katex.min.js来渲染数学方程。相应的你需要卸载你之前的hexo的markdown渲染器以及hexo-math,然后安装新的hexo-renderer-markdown-it-plus:

# 替换 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json里找到hexo的markdwon渲染器,并将其卸载
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save

# 卸载 `hexo-math`
npm un hexo-math --save

# 然后安装 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

注意到hexo-renderer-markdown-it-plus已经无人持续维护,所以我们使用@upupming/hexo-renderer-markdown-it-plus。这份fork的代码使用了@neilsustc/markdown-it-katex同时它也是VSCode的插件Markdown All in One所使用的,所以我们可以获得最新的KaTex功能例如\tag{}

你还可以通过@neilsustc/markdown-it0katex控制KaTex的设置,所有可配置的选项参见https://katex.org/docs/options.html。比如你想要禁用掉KaTex在命令行上输出的宂长的警告信息,你可以在根目录的_config.yml中使用下面的配置将strict设置为flase:

markdown_it_plus:
plugins:
- plugin:
name: '@neilsustc/markdown-it-katex'
enable: true
options:
strict: false

当然,你还可以利用这个特征性来定义一些自己常用的额macros.

因为KaTex更快更轻量,因此没有MathJax的功能多(比如右键菜单)。为那些使用MathJax的用户,我们也为KaTex默认添加了Copy As TeX Code的功能。

美化/特效

自定义主题色

可以修改大部分UI颜色

配置butterfly.yml,比如:

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

theme_color:
enable: true
main: "#9370DB"
paginator: "#7A7FF1"
button_hover: "#FF7242"
text_selection: "#69c46d"
link_color: "#858585"
hr_color: "#A4D8FA"
read-mode-bg_color: '#FAF9DE'

网站背景

默认显示白色,可设置图片或颜色

配置butterfly.yml

# 图片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 顔色 background: '#49B202'
# 留空 显示白色
background:

footer背景

footer的背景会与top_img的一致,当设置flase时,将与主题颜色一致。

配置butterfly.yml

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

打字特效

打字特效activate-power-mode

配置butterfly.yml

activate_power_mode:
enable: true

禁止彩带

好看的彩带背景,可以设置每次刷新更换彩带,或者点击更换彩带

配置butterfly.yml

canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false #设置是否每次点击都更换彩带
mobile: fasel # false 手机端不显示 true 手机端显示

相关配置可查看canvas_ribbon

动态彩带

canvas_ribbon_piao:
enable: true
mobile: false # false 手机端不显示 true 手机端显示

canvas-nest

配置butterfly.yml

canvas_nest:
enable: true
color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
opacity: 0.7 # the opacity of line (0~1), default: 0.5.
zIndex: -1 # z-index property of the background, default: -1.
count: 99 # the number of lines, default: 99.
mobile: false # false 手机端不显示 true 手机端显示

鼠标点击效果

烟花

配置butterfly.yml

fireworks:
enable: true

爱心

配置butterfly.yml

# 点击出现爱心
click_heart:
enable: true

文字

配置butterfly.yml

# 点击出现文字,文字可自行修改
ClickShowText:
enable: false
text:
- 富强
- 民主
- 文明
- 和谐
- 自由
- 平等
- 公正
- 法治
- 爱国
- 敬业
- 诚信
- 友善
fontSize: 15px

文章页美化

会改变ol、ul、h1-h5的样式

配置butterfly.yml

post_beautify:
enable: true
title-prefix-icon: '\f0c1'
title-prefix-icon-color: "#F4766"

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

自定义字体

可自行设置字体的font-family

配置butterfly.yml

font:
enable: true
font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number

网站副标题

适用于版本号>=V1.2.0

V2.0.0开始增加一些第三方api调用

可设置主页中显示的网站副标题或则喜欢的座右铭。

配置butterfly.yml

# 主页subtitle
# 打字效果
subtitle:
enable: true
# source调用第三方服务
# source: false 关闭调用
# source: 1 调用金山词霸的每日一句(简体)
# source: 2 调用一言网的一句话(简体) #https://hitokoto.cn/
# source: 3 调用一句网(简体) http://yijuzhan.com/
# source: 4 调用今日诗词(简体) https://www.jinrishici.com/
# subtitle 会先显示 source , 再显示 sub 的内容
source: false
# (如果有英文逗号' , ',请使用转义字符 &#44;)
sub:
- 今日事&#44;今日毕
- Never put off till tomorrow what you can do today

top_img显示大小

适用于版本号>=V1.2.0

默认的显示为全屏。site-info的区域会居中显示

# 主页设置
# 默认top_img全屏,site_info在中间
# 使用默认, 都无需填写(建议默认)
index_site_info_top: #主页标题距离顶部距离 例如 300px/300em/300rem/10%
index_top_img_height: #主页top_img高度 例如 300px/300em/300rem 不能使用百分比

注意:index_top_img_height的值不能使用百分比。
2个都不填的话会使用默认值

举例 当

index_site_info_top: 40%
index_top_img_height: 400px

PWA

要为Butterfly配上PWA特性,你需要如下几个步骤:

  1. 打开hexo工作目录
  2. nmp install hexo-offline --save或者yarn add hexo-offline
  3. 修改_config.yml在站点_config.yml中增加以下内容。
    # offline config passed to sw-precache.
    offline:
    maximumFileSizeToCacheInBytes: 10485760 # 缓存的最大文件大小,以字节为单位
    staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}
    # 静态文件合集,如果你的站点使用了例如webp格式的文件,请将文件类型添加进去。
    stripPrefix: public
    verbose: true
    runtimeCaching:
    # CDNs - should be cacheFirst, since they should be used specific versions so should not change
    - urlPattern: /* # 如果你需要加载CDN资源,请配置该选项,如果没有,可以不配置。
    handler: cacheFirst
    options:
    origin: your_websie_url # 可替换成你的 url
    更多内容请查看hexo-offline的官方文档
  4. butterfly.yml中开启pwa选项。
    pwa:
    enable: true
    manifest: /img/pwa/manifest.json
    theme_color: "#fff"
    apple_touch_icon: /img/pwa/apple-touch-icon.png
    favicon_32_32: /img/pwa/32.png
    favicon_16_16: /img/pwa/16.png
    mask_icon: /img/pwa/safari-pinned-tab.svg
  5. 在创建source/目录中创建manifest.json文件。
    {
    "name": "string", //应用全称
    "short_name": "Junzhou", //应用简称
    "theme_color": "#49b1f5", //匹配浏览器的地址栏颜色
    "background_color": "#49b1f5",//加载应用时的背景色
    "display": "standalone",//首选显示模式 其他选项有:fullscreen,minimal-ui,browser
    "scope": "/",
    "start_url": "/",
    "icons": [ //该数组指定icons图标参数,用来时适配不同设备(需为png,至少包含一个192px*192px的图标)
    {
    "src": "images/pwaicons/36.png", //图标文件的目录,需在source/目录下自行创建。
    "sizes": "36x36",
    "type": "image/png"
    },
    {
    "src": "images/pwaicons/48.png",
    "sizes": "48x48",
    "type": "image/png"
    },
    {
    "src": "images/pwaicons/72.png",
    "sizes": "72x72",
    "type": "image/png"
    },
    {
    "src": "images/pwaicons/96.png",
    "sizes": "96x96",
    "type": "image/png"
    },
    {
    "src": "images/pwaicons/144.png",
    "sizes": "144x144",
    "type": "image/png"
    },
    {
    "src": "images/pwaicons/192.png",
    "sizes": "192x192",
    "type": "image/png"
    },
    {
    "src": "images/pwaicons/512.png",
    "sizes": "512x512",
    "type": "image/png"
    }
    ],
    "splash_pages": null //配置自定义启动动画。
    }
    你也可以通过Web App Nabufest快速创建manifest.json。(Web App Manifest要求至少包含一个512*512像素的图标)
  6. 可以通过Chrome插件Lighthouse检查PWA配置是否生效以及配置是否正确。
    • 打开博客页面
    • 启动Lighthouse插件(Lighthouse插件要求至少包含一个512*512像素的图标)
      关于PWA(渐进式增强Web应用)的更多内容请参阅Google Tools for Web Developers

字数统计

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

  1. 打开hexo工作目录
  2. npm install hexo-wordcount --saveoryarn add hexo-wordcount
  3. 配置butterfly.yml
wordcount:
enable: true

文章置顶

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

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

举个例子:

你的莫篇文章开头如下:

title: xxx
tags:
- xxx
date: 2019-12-1 00:00:00
---
// ...

现在把top: true加进去:

title: xxx
tags:
- xxx
date: 2019-12-1 00:00:00
top: True
---
// ...

图片大图查看模式

默认为fancybox,可以选择改为medium_zoom

配置butterfly.yml

medium_zoom:
enable: true

fancybox打开模式

medium_zoom打开模式

Snackbar弹窗

Snackbar弹窗,根据自己爱好开启

配置butterfly.yml

# Snackbar 弹窗
# 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时弹窗背景

未开启Snackbar

开启Snackbar

总结

Butterfly这个主题总的来说功能比较齐全,该有的功能都有,而且大多数都有多种方案可以选择或者自定义。但是由于元素较多,如果用只用GitHub Page来搭建的话渲染比较慢,我会在后面更新一个自定义域名同时绑定GitHub和Coding达到域名分流来解决渲染慢的问题

本文参考主题作者(jerry)的安装文档而写的,可以访问作者的安装文档:https://jerryc.me/posts/21cfbf15/

打赏
  • 微信
  • 支付宝

评论