前面我们已经搭建好了自己的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: 是否显示版权(除非特定文章设置，可以不写)
---

标签页

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

---
tite: 标签
date: 2019-12-1 00:00:00
type: tags
---

分类页

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

---
title: 分类
date: 2019-12-1 00:00:00
type: categories
---

友情链接

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

创建友情链接

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

---
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.yml是Butterfly的配置文件，他需要你手动将主题目录下的config.yml文件复制到hexo根目录的source/_data/butterfly.yml中。如果文件或文件夹不存在，请手动创建。

语言

修改站点配置文件_config.yml的language参数

默认语言是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.yml将line_number改成false:

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

设置code_word_wrap之前：

设置code_word_wrap之后：

社交图片

Butterfly支持font-awesome v4和font-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

右下角按钮

简繁转换

简体繁体互换

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

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

只能选择一个分享服务商

找到你的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

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

本地搜索

你需要安装hexo-generator-search，根据它的文档去做相应的配置。注意格式只支持xml
配置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:

分析统计

百度统计

登录百度统计的官方网站
找到你百度统计的统计代码
！

配置butterfly.yml

baidu_analytics: 你的代码 #只复制打码部分

谷歌统计

登录谷歌分析的官方网站
找到你的谷歌分析的追踪ID
配置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的背景会与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_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特性，你需要如下几个步骤：

打开hexo工作目录
nmp install hexo-offline --save或者yarn add hexo-offline

修改_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的官方文档

在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

在创建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像素的图标）

可以通过Chrome插件Lighthouse检查PWA配置是否生效以及配置是否正确。
- 打开博客页面
- 启动Lighthouse插件(Lighthouse插件要求至少包含一个512*512像素的图标)
  关于PWA(渐进式增强Web应用)的更多内容请参阅Google Tools for Web Developers

字数统计

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

打开hexo工作目录
npm install hexo-wordcount --saveoryarn add hexo-wordcount
配置butterfly.yml

wordcount:
  enable: true

文章置顶

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

打开hexo工作目录
npm uninstall hexo-genrator-index --save然后npm install hexo-generator-index-pin-top --save
你要在文章的front-matter区域里添加top: True属性来把这篇文章置顶。
你可以参考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/

主题的安装和升级

安装

应用主题

平滑升级

主题页面

Page Front-matter

Post Front-matter

标签页

分类页

友情链接

创建友情链接

友情链接添加

友情链接界面设置

配置

配置文件说明

语言

网站资料

导航菜单

代码

代码高亮

代码复制

代码框展开/关闭

代码换行

社交图片

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

顶部图

page页

当具体url时

当顶部图留空·true和false

post页

文章相关项

文章版权

文章打赏

文章封面

头像

toc

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

设置是否自动打开TOC

相关文章

Footer设置

博客年份

脚本页自定义文本

ICP

右下角按钮

简繁转换

夜间模式

阅读模式

侧边栏设置

侧边排版

访问人数busuanzi(UV和PV)

运行时间

Note(Bootstrap Callout)

配置

用法

Gallery相册

评论

Disqus

Laibili(来必力)

Gitalk

Valine

分享

AddThis

Sharejs

Addtoany

搜索系统

Algolia

本地搜索

网站验证

分析统计

百度统计

谷歌统计

Mathjax

KaTex

美化/特效

自定义主题色

网站背景

footer背景

打字特效

禁止彩带

动态彩带