基于hexo+butterfly的个人博客搭建教程（四）主题美化篇

本文介绍主题进一步美化，以及添加更多有趣的功能。

添加看板娘

format27

1：进入 Butterfly 主题，在 [博客名]\themes\butterfly\source\ 目录下打开命令提示符，输入

1	git clone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget

2：找到路径 [博客名]\themes\butterfly\source\live2d-widget\autoload.js，打开 autoload.js，修改内容：

1 2	- const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/"; + const live2d_path = "/live2d-widget/";

3：在 Butterfly 的主题配置文件 [Blogroot]\_config.butterfly.yml 中，
butterfly 主题其实自带 fontawesome 依赖，无需引入，

    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
        # - <link rel="stylesheet" href="/xxx.css">
      bottom:
        # - <script src="xxxx"></script>
+       - <script defer src="/live2d-widget/autoload.js"></script>

4：保存所有文件的修改，然后顺序执行

1
2
3

hexo clean
hexo g
hexo s

5：自定义修改
有一定前端基础的小伙伴可以通过修改 [Blogroot]\themes\butterfly\source\live2d-widget 路径下的样式资源文件：

waifu-tips.js: 包含了按钮和对话框的逻辑
waifu-tips.json : 定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；
waifu.css: 看板娘的样式表。可以对看板娘的位置布局等做自定义修改。

图片设置

站点图标

站点图标又称站点icon(favicon.ico)
修改主题配置文件_config.butterfly.yml：

1	favicon: /img/favicon.png # 将图片放入 themes -> Butterfly -> source -> img 里

封面图片设置

在访问系统首页时，出现的封面图片
修改主题配置文件_config.butterfly.yml：

index_img: 图片地址 # 主页封面图片
default_top_img: 图片地址 # 文章详情页的顶部图片
archive_img: 图片地址 # 归档页顶部的图片
tag_img: 图片地址 # 标签页顶部的图片
category_img: 图片地址 # 分类页顶部的图片

错误图片

配置了该属性后会替换无法展示的图片
修改主题配置文件_config.butterfly.yml：

1
2
3

error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

字数统计

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

打开 hexo 工作目录
进入命令提示符输入npm install hexo-wordcount --save or yarn add hexo-wordcount
修改主题配置文件_config.butterfly.yml：

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

文章摘要

文章摘要（吸引读者往下读）
修改主题配置文件_config.butterfly.yml：

1
2
3

index_post_content:
  method: 3
  length: 500 # 节选文章的前500个字

分享你的内容sharejs

如果你不知道 sharejs，到官网看看说明吧。
修改主题配置文件_config.butterfly.yml：

1
2
3

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

从 3.0.0 开始，开启评论需要在 comments-use 中填写你需要的评论。
支持双评论显示，只需要配置两个评论（第一个为默认显示）
修改主题配置文件_config.butterfly.yml：

comments:
  use: # 使用的评论（请注意，填写的评论首字母需要大写。最多支持两个，如果不需要请留空）
    - Valine
    - Disqus
  # - Valine
  # - Disqus
  text: true # 是否显示评论服务商的名字
  lazyload: false # 是否为评论开启 lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示）
  count: false # 是否在文章顶部显示评论数 livere 和 utterances 不支持评论数显示

Valine

valine:
  appId: 填入申请到的appid # leancloud application app id
  appKey: 填入申请到的秘钥 # leancloud application app key
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: /img/comment_bg.png # valine background
  visitor: false
  placeholder: 记录你的邮箱，方便快速回复
  master: # md5加密后的博主邮箱
  - A5FB062F4B03DF13194A698AF2383568  #可添加多个
  friends: # md5加密后的小伙伴邮箱
  - 6E85D9254372CD179BBEA9881410F4D6
  tagMeta: '博主,朋友,访客' # 标签要显示的文字,默认'博主,朋友,访客'
  option:

format28

在线聊天

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

1	chat_btn: true

format29

daovoice

打开 daovoice 并注册帐号,找到你的 app id

format30

修改主题配置文件_config.butterfly.yml：

1
2
3

daovoice:
  enable: true
  app_id: xxxxx

可在聊天设置里配置聊天按钮等样式 format31

百度统计

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

format32 修改主题配置文件_config.butterfly.yml：

1	baidu_analytics: 你的代码

谷歌统计

登录谷歌分析的官方网站
找到你的谷歌分析的跟踪 ID

修改主题配置文件_config.butterfly.yml：

1	google_analytics: 你的代码 # 通常以`UA-`打头

腾讯移动分析

登录腾讯移动分析的官方网站
选择 WEB应用
找到你的站点 ID

format33

修改主题配置文件_config.butterfly.yml：

1	tencent_analytics: 你的ID

CNZZ分析

登录 CNZZ 分析的官方网站
找到站点设置 - 获取代码
找到你的 web_id

修改主题配置文件_config.butterfly.yml：

1	cnzz_analytics: 你的代码

谷歌广告（赚点小费）

主题已集成谷歌广告（自动广告）
修改主题配置文件_config.butterfly.yml：

google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入个人识别码
  enable_page_level_ads: true

手动广告

主题预留了三个位置可供插入广告，分别为主页文章 (每三篇文章出现广告)/aside 公告之后 / 文章页打赏之后。，把 html 代码填写到对应的位置
修改主题配置文件_config.butterfly.yml：

ad:
  index:
  aside:
  post:

index: <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>

网站验证

如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平台进行提交。
各自的验证码可从各自管理平台拿到
修改主题配置文件_config.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:

# 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:

# Yandex Webmaster tools verification setting
# see https://webmaster.yandex.com/
yandex_site_verification:

自定义主题色

可以修改大部分 UI 颜色
修改主题配置文件_config.butterfly.yml：

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"

网站背景

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

1	background: #图片或者颜色

留意: 如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog, 引用一张 img/xx.png 图片，则设置 background 为 url (/blog/img/xx.png)

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

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

打字效果

打字效果 activate-power-mode
修改主题配置文件_config.butterfly.yml：

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

静止彩带

好看的彩带背景，可设置每次刷新更换彩带，或者每次点击更换彩带
修改主题配置文件_config.butterfly.yml：

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

动态彩带

好看的彩带背景，会飘动
修改主题配置文件_config.butterfly.yml：

1
2
3

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

canvas-nest

好看的星空例子特效，会飘动
修改主题配置文件_config.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 手机端显示

鼠标点击效果

烟花

zIndex 建议只在 -1 和 9999 上选
-1 代表烟火效果在底部
9999 代表烟火效果在前面
修改主题配置文件_config.butterfly.yml：

1
2
3

fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999

爱心

修改主题配置文件_config.butterfly.yml：

1 2	# 点击出现爱心 click_heart: true

文字

修改主题配置文件_config.butterfly.yml：

# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px

页面美化

会改变 ol、ul、h1-h5 的样式
field 配置生效的区域

post 只在文章页生效
site 在全站生效
修改主题配置文件_config.butterfly.yml：

# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

format34

对比如下

format35

全局字体

可自行设置字体的 font-family
如不需要配置，请留空
修改主题配置文件_config.butterfly.yml：

font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

Blog 标题字体

可自行设置字体的 font-family
如不需要配置，请留空
如不需要使用网络字体，只需要把 font_link 留空就行
修改主题配置文件_config.butterfly.yml：

1
2
3

blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

网站副标题

1 2	可设置主页中显示的网站副标题或者喜欢的座右铭。修改主题配置文件_config.butterfly.yml：

# 主页subtitle
subtitle:
  enable: true
  # 打字效果
  effect: true
  # 循环或者只打字一次
  loop: false
  # source调用第三方服务
  # source: false 关闭调用
  # source: 1  调用搏天api的随机语录（简体） https://api.btstu.cn/
  # source: 2  调用一言网的一句话（简体） https://hitokoto.cn/
  # source: 3  调用一句网（简体） http://yijuzhan.com/
  # source: 4  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 &#44;
  # 如果有英文双引号' " ',请使用转义字元 &quot;
  # 开头不允许转义字元，如需要，请把整个句子用双引号包住
  # 例如 ”&quotNever put off till tomorrow what you can do today&quot"
  # 如果关闭打字效果，subtitle只会显示sub的第一行文字
  sub:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today

主页 top_img 显示大小

默认的显示为全屏。site-info 的区域会居中显示
修改主题配置文件_config.butterfly.yml：

# 主页设置
# 默认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 个都不填的话，会使用默认值

页面加载动画 preloader

当进入网页时，因为加载速度的问题，可能会导致 top_img 图片出现断层显示，或者网页加载不全而出现等待时间，开启 preloader 后，会显示加载动画，等页面加载完，加载动画会消失。
修改主题配置文件_config.butterfly.yml：

1	preloader: true

PWA

PWA简单来说就是让网站有App体验,要为 Butterfly 配上 PWA 特性，你需要如下几个步骤:

打开 hexo 工作目录
npm install hexo-offline --save 或者 yarn add hexo-offline
修改主题配置文件_config.butterfly.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 的官方文档

1 在主题配置文件中开启 pwa 选项。

pwa:
  enable: true
  manifest: /img/pwa/manifest.json
  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

2 在创建 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 Manifest 快速创建 manifest.json。（Web App Manifest 要求至少包含一个 512*512 像素的图标）

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

图片大图查看模式fancybox

修改主题配置文件_config.butterfly.yml：

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

medium_zoom

修改主题配置文件_config.butterfly.yml：

1	medium_zoom: true

Snackbar 弹窗

Snackbar 弹窗，根据自己爱好开启
修改主题配置文件_config.butterfly.yml：

snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景

format36

豆瓣

很多人使用 hexo-douban 这款插件。但是该插件是直接生成相应的网页，而不会去读取对应的 markdown 文件。因此，可在设置里进行相应的配置。
修改主题配置文件_config.butterfly.yml：

# 如果你有使用hexo-douban，可配置这个
douban:
  meta: true
  movies_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
  books_img:
  games_img:

Pjax

当用户点击链接，通过 ajax 更新页面需要变化的部分，然后使用 HTML5 的 pushState 修改浏览器的 URL 地址。
这样可以不用重复加载相同的资源（css/js），从而提升网页的加载速度。
修改主题配置文件_config.butterfly.yml：

# 如果你有使用hexo-douban，可配置这个
pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

基于hexo+butterfly的个人博客搭建教程（四） 主题美化篇

添加看板娘

图片设置

站点图标

封面图片设置

错误图片

字数统计

文章摘要

分享

评论

Valine

在线聊天

daovoice

百度统计

谷歌统计

腾讯移动分析

CNZZ分析

谷歌广告（赚点小费）

手动广告

网站验证

自定义主题色

网站背景

footer 背景（页脚背景）

打字效果

静止彩带

动态彩带

canvas-nest

鼠标点击效果

烟花

爱心

文字

页面美化

全局字体

Blog 标题字体

网站副标题

主页 top_img 显示大小

页面加载动画 preloader

PWA

图片大图查看模式fancybox

medium_zoom

Snackbar 弹窗

豆瓣

Pjax

基于hexo+butterfly的个人博客搭建教程（四）主题美化篇