站点各种基础炫酷特效插件，让博客更具有美观性、实用性。
网页图标、语言、导航菜单、背景特效、字数统计、鼠标特效…

首页特效

网页图标

找到该路径 /hexo-blog-demo/node_modules/hexo-theme-butterfly/source/img
用自己喜欢的图标，替换 favicon.png，注意格式图片格式，原始图标配置的是png格式
修改主题下图标的配置：/hexo-blog-demo/node_modules/hexo-theme-butterfly/_config.yml

1	favicon: /img/favicon.png

这里是直接在主题上修改的，可以选择在_config.butterfly.yml上设置
_config.butterfly.yml的优先级要高于_config.yml

语言

修改站点配置文件_config.yml，默认语言是en 。
主题支持三种语言：

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

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改站点配置文件_config.yml。
部分参数如下，详细参数可参考官方的配置描述

参数	描述
title	网站标题
subtitle	描述
description	网站描述
keywords	网站的关键词。支持多个关键词
author	您的名字
language	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN
timezone	网站时区。Hexo 默认使用您电脑的时区。请参考时区列表进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai

导航菜单

菜单配置

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

必须是 /xxx/，后面||分开，然后写图标名。
如果不希望显示图标，图标名可不写。
若想隐藏子目录，直接子目录里添加 hide

其他参考：【fontawesome官方图标实例】【Font Awesome图标实例】【91PHP图标实例】

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

例如本站设置

menu:
  首页: / || fas fa-home
  笔记||fa fa-book||hide:
    标签云: /tags/ || fas fa-tags
    归档树: /categories/ || fas fa-folder-open
    时光机: /archives/ || fas fa-archive
  休闲||fa fa-gamepad||hide:
    旅行: /life/travel/ || fa fa-plane
    美食: /life/food/ || fa-solid fa-burger
    音乐: /life/music/ || fas fa-music
    美图: /life/gallery/ || fas fa-image
    视频: /life/movies/ || fas fa-video
    游戏: /life/ || fas fa-puzzle-piece
  摸鱼||fa-solid fa-fish||hide:
    图书: /book/ || fa fa-book
    电影: /movie/ || fa-solid fa-video
    音乐: /song/ || fas fa-music
  留言板: /about/message-board/ || fa fa-comments
  关于||fa fa-street-view||hide:
    关于: /about/ || fa fa-heartbeat
    个人简历: /resume/ || fa fa-id-card
    文章统计: /charts/writer || fa-fw fas fa-chart-area
    访问统计: /charts/visitor || fa-fw fas fa-chart-line
    友链: /link/ || fas fa-link
    Hexo API文档: /document/ || fa fa-bug
    INCREDIBLE: https://www.renyuxin.cn ||fa fa-user-secret

首页顶部图

如果不要显示顶部图，可直接配置 disable_top_img: true。

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

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

1 2	disable_top_img: false index_img: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/image/2023/03/11111.jpeg

背景特效

静止彩带

可设置每次刷新更换彩带，或者每次点击更换彩带。详细配置可查看canvas_ribbon。

修改主题配置文件_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_fluttering_ribbon:
  enable: true
  mobile: true # 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：手机端显示

网站背景

# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/颜色单词/渐变色)
# 留空 不显示背景
background:

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

网站背景透明度1

用此方法处理透明度问题，有个很明显的缺点，就是带有切换夜间模式时，会出现颜色布局问题，所以慎用
没有夜间模式的，可以无视这条提示

在hexo-blog-demo/node_modules/hexo-theme-butterfly/source/css文件夹新建一个transpancy.css文件

/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.7 可以自行修改*/
    background: rgba(255,255,255,.7);
}
/* 所有页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度为0.7 */
    background: rgba(255,255,255,.7);
}
/*侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, .7);
}
/* 页脚透明 */
#footer {
	/* 以下代表透明度为0.7，这个会影响页脚的背景图，博主的的站点在这里给注释了 */
	/* background: rgba(255,255,255, .0); */
}

在主题配置文件_config.butterfly.yml中引入transpancy.css。

inject:
  head:
    # 全局透明度
    - <link rel="stylesheet" href="/css/transpancy.css">

如果页脚不行要背景图，也跟着透明，就得修改_config.butterfly.yml的footer_bg: false
此时的页脚成为了默认纯色
接下来
注释hexo-blog-demo/node_modules/hexo-theme-butterfly/source/css/_layout/footer.styl中的默认纯色
1
2
#footer
// background-color: $light-blue

页面主要部分透明2

修改 hexo-blog-demo/node_modules/hexo-theme-butterfly\layout\page.pug 页面

extends includes/layout.pug

block content
  if page.style === 'nopage'
    #nopage
      if top_img === false
        h1.page-title= page.title

      case page.type
        when 'website'
          include includes/page/website.pug
        when 'about'
          include includes/page/about.pug
        when 'link'
          include includes/page/flink.pug
        default
          include includes/page/default-page.pug
          
      if page.comments !== false && theme.comments && theme.comments.use
        - var commentsJsLoad = true
        !=partial('includes/third-party/comments/index', {}, {cache: true})
  else 
    #page
      if top_img === false
        h1.page-title= page.title

      case page.type
        when 'tags'
          include includes/page/tags.pug
        when 'categories'
          include includes/page/categories.pug
        default
          include includes/page/default-page.pug
          
      if page.comments !== false && theme.comments && theme.comments.use
        - var commentsJsLoad = true
        !=partial('includes/third-party/comments/index', {}, {cache: true})

需要修改透明背景的页面，在 if page.style === 'nopage' 下添加对应的 index.md 文件中的 type: "lucencyPage"

if page.style === 'nopage'
  case page.type
    when 'lucencyPage'
      include includes/page/lucencyPage.pug

在hexo-blog-demo/node_modules/hexo-theme-butterfly/layout/includes/page/ 文件夹下，必须创建对应的 lucencyPage.pug 文件，
可以不输入内容
需要修改透明背景的页面，在 index.md 中 Page Front-matter 添加 style: nopage & type: "lucencyPage"
1
2
3
4
5
6
7
---
title:
date:
aside: false
type: "lucencyPage"
style: nopage
---

向 custom.css 添加

/* 页面透明背景设置 */
.layout>#nopage {
    /* rgba(255, 255, 255, 0.5) !important; */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* padding-top: 0; */
}

网站副标题

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

修改主题配置文件_config.butterfly.yml中的subtitle。

# Site
subtitle:
  enable: false
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循环打字)
  loop: true
  # source调用第三方服务
  # source: false 关闭调用
  # source: 1  调用搏天api的随机语录（简体）
  # source: 2  调用一言网的一句话（简体）
  # source: 3  调用一句网（简体）
  # source: 4  调用今日诗词（简体）
  # subtitle 会先显示 source , 再显示 sub 的內容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 &#44;
  # 如果有英文双引号' " ',请使用转义字元 &quot;
  # 开头不允许转义字元，如需要，请把整个句子用双引号包住
  # 如果关闭打字效果，subtitle只会显示sub的第一行文字
  sub:
    - 窗外有月色和雨&#44;而我在想你。
    - There is moonlight and rain outside the window, and I miss you.

字数统计

安装插件：在博客根目录，打开cmd命令窗口执行npm install hexo-wordcount --save。

开启配置：修改主题配置文件_config.butterfly.yml中的wordcount。

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

打字效果

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

# 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

鼠标样式

将以下代码复制到hexo-theme-butterfly/source/css/custom.css

如果没有custom.css文件，可以手动创建一个，并引入主题配置文件_config.butterfly.yml的inject:head中

/* 鼠标样式 START */
body {
    /* 滑稽头 */
    /* cursor: url(https://bu.dusays.com/2022/05/17/6283c365d20dd.png), auto; */
    /* 卡通圆角 */
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur), auto;
}
.hide-block>.hide-button.open,
.hide-inline>.hide-button.open {
    display: block
}
a,
button,
img {
    /* 滑稽头 */
    /* cursor: url(https://bu.dusays.com/2022/05/17/6283c376afcfc.png), auto; */
    /* 卡通圆角 */
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), auto;
}
/* 鼠标样式 END */

另外，再推荐鼠标样式：嵌套圆环，具体可以直接点进去参考，该样式博主也有发布教程。

鼠标点击效果

烟花效果

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

fireworks:
  enable: true
  zIndex: 9999 #建议只在-1和9999上选
  mobile: false

爱心效果

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

# 点击出現爱心
click_heart:
  enable: true
  mobile: false

文字效果

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

右下角按钮

简繁转换

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

translate:
  enable: false
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  # 网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 2
  # Time delay 延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  # 当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: '繁'
  # 当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: '簡'

夜间模式

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

# dark mode
darkmode:
  enable: false
  # dark 和 light 两种模式切换按钮
  button: true
  # 自动切换暗/亮模式 (自动切换 dark mode和 light mode)
  # autoChangeMode: 1 跟随系统而变化，不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode。
  # autoChangeMode: 2 只按照时间 晚上6点到早上6点之间切换为 dark mode,其余时间为light mode。
  # autoChangeMode: false 取消自动切换。
  autoChangeMode: false

阅读模式

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

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

1	readmode: true

侧边栏设置

侧边排版

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

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

aside:
  enable: true
  hide: false
  button: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  position: right # left or right 
  # 关于博主的一些信息
  card_author: 
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: 关注我
      link: https://github.com/ren-yuxin
  # 公告信息
  card_announcement:  
    enable: true
    content: ···· 博客装修中，暂时没有公告 ····
  # 最新文章
  card_recent_post: 
    enable: true
    limit: 5 # 如果设置为0，则显示全部
    sort: date # 日期或更新
    sort_order: # 除非你知道它是如何工作的，否则不要修改设置
  # 文章分类
  card_categories: 
    enable: true
    limit: 8 # 如果设置为0，则显示全部
    expand: none # none/true/false
    sort_order: # 除非你知道它是如何工作的，否则不要修改设置
  # 文章标签
  card_tags:
    enable: true
    limit: 40 # 如果设置为0，则显示全部
    color: false
    sort_order: # 除非你知道它是如何工作的，否则不要修改设置
  # 文章归档
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # 按顺序排列。1：asc为升序; -1：desc表示下降
    limit: 8 # 如果设置为0，则显示全部
    sort_order: # 除非你知道它是如何工作的，否则不要修改设置
  # 网站信息
  card_webinfo:  
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # 除非你知道它是如何工作的，否则不要修改设置

访问人数(UV 和 PV)

详细信息请查看busuanzi官方网站。

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

busuanzi:
  site_uv: true  # 本站总访客数
  site_pv: true  # 本站总访问量 
  page_pv: true  # 本文总阅读量

访客地图

前往clustrmaps 网站注册一个帐号。
找到Free Tools下面的Website Widget, 点击Get Map Widget，然后输入你的博客网址，点击Next。
根据你自己的喜好选择样式Map widget或Globe Widget
创建后会有一串script代码，请记住*********中的内容，方便使用
1
<script type="text/javascript" id="clstr_globe" src="*********">

在 hexo-blog-demo/node_modules/hexo-theme-butterfly/layout/includes/widget文件夹新建一个card_map.pug文件

.card-widget.card-map
  .card-content
    .item-headline
      i.fa.fa-globe-asia(aria-hidden="true")
      span= _p('aside.card_map')
    script#clstr_globe(type="text/javascript" defer="defer" src="此处填入步骤3中******代码")

编辑hexo-blog-demo/node_modules/hexo-theme-butterfly/layout/includes/widget/index.pug文件
在你想要显示的位置插入以下代码（注意格式），一般就处于侧边栏中间位置就行
1
2
if theme.aside.card_map
!=partial('includes/widget/card_map', {}, {cache:true})
编辑主题配置文件_config.butterfly.yml，找到aside:属性，在该属性下面添加card_map: true来控制是否显示访客地图。
1
2
aside:
card_map: true
编辑hexo-blog-demo/node_modules/hexo-theme-butterfly/languages/zh-CN.yml文件
找到card_announcement: 公告 , 在下面添加一行card_map: 访客地图 ,
繁体字方法一样，修改hexo-blog-demo/node_modules/hexo-theme-butterfly/languages/zh-TW.yml文件就行。
最后重新编译运行，即可看见效果。

运行时间

网页已运行时间。

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

Pjax

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

# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax: 
  enable: true
  # 对于一些第三方插件，有些并不支持 pjax 。
  # 你可以把网页加入到 exclude 里，这个网页会被 pjax 排除在外。
  # 点击该网页会重新加载网站。
  exclude: 
    - /music/
    - /no-pjax/

使用 pjax 后，一些自己DIY的js可能会无效，跳转页面时需要重新调用，请参考Pjax文档

Inject

v2.3.0以上支持。
如想添加额外的 js/css/meta 等等东西，可以在 Inject 里添加，head(</body>标签之前)， bottom(</html>标签之前)。

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

页面加载动画preloader

主题版本 >= 5.0
【】

【普通版】加载动画preloader

# 加载动画 Loading Animation
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  # pace_css_url: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/file/common/css/bounce.css #右上方弹跳的球
  # pace_css_url: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/file/common/css/center-radar.css #中级旋转的雷达
  pace_css_url: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/file/common/css/flat-top.css #顶部宽状滚动条

【进阶版】加载动画preloader

修改themes/butterfly/layout/includes/loading/fullpage-loading.pug

- #loading-box
-   .loading-left-bg
-   .loading-right-bg
-   .spinner-box
-     .configure-border-1
-       .configure-core
-     .configure-border-2
-       .configure-core
-     .loading-word= _p('loading')

+ #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
+   .loading-bg
+     div.loading-img
+     .loading-image-dot

修改themes/butterfly/layout/includes/loading/index.pug

- if theme.preloader.source === 1
-   include ./fullpage-loading.pug
- else
-   include ./pace.pug

+ if theme.preloader.source === 1
+   include ./fullpage-loading.pug
+ else if theme.preloader.source === 2
+   include ./pace.pug
+ else
+   include ./fullpage-loading.pug
+   include ./pace.pug

新建source/css/progress_bar.css, 修改pace加载的胶囊样式用的，会在后面yml中引用

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 4rem;
  background: #eaecf2;
  border: 1px #e3e8f7;
  overflow: hidden;
}

.pace-inactive .pace-progress {
  opacity: 0;
  transition: 0.3s ease-in;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 200px;
  position: absolute;
  z-index: 2000;
  display: block;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 1.5s ease infinite;
  background-size: 200%;
}

.pace.pace-inactive {
  opacity: 0;
  transition: 0.3s;
  top: -8px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

修改themes/butterfly/source/css/_layout/loading.styl, 可以修改【背景色background】【渐变背景色background-image】
loading.styl中的样式基本上样式全部覆盖了

if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    //background: #fff; //背景色
    background-image:linear-gradient(0deg,#6a85b6 0%, #bac8e0 100%) //渐变背景色
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

新增css，将下面css丢进全局引用的css文件里
我这里用的是通用的全局css

/* 页面加载动画START */
.loading-img {
    background: url(https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/image/2023/03/blog-avatar.png) no-repeat center center;
    background-size: cover;
}
/* 页面加载进度条END */

修改_config.butterfly.yml
source: 1 为满屏加载无pace胶囊；source: 2 为pace胶囊无满屏动画；source: 3 是两者都启用。

# Loading Animation (加载动画)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  # else all
  source: 3
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/progress_bar.css
  avatar: # 自定义头像

图片大图查看模式

只能开启一个。
如果不想为某张图片添加大图查看模式，可以使用 html 格式引用图片，并为图片添加 no-lightbox class 名，

例如：<img src="xxxx.jpg" class="no-lightbox">。

fancybox(推荐)

修改主题配置文件_config.butterfly.yml中fancybox属性。

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

medium_zoom

修改主题配置文件_config.butterfly.yml中medium_zoom属性。

1	medium_zoom: true

自定义字体和字体大小

全局字体

修改主题配置文件_config.butterfly.yml中的font-family属性即可，如不需要配置，请留空。

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
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 标题字体

修改主题配置文件_config.butterfly.yml中的blog_title_font属性即可，如不需要配置，请留空。
这里提供两种操作方式：第三方开源库、自定义字体库(自定义链接)

第三方开源库

下面提供的几种字体，任选其一即可。如不需要使用网络字体，只需要把font_link留空就行。
【Google开源字体库】、
【字体天下】

# 左上角网站名字 主页居中网站名字
# 微软雅黑体
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
# ZCOOL 快乐体
blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap
  font-family: Titillium Web, 'ZCOOL KuaiLe', sans-serif
# ZCOOL 青客黄柚体
blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap
  font-family: Titillium Web, 'ZCOOL QingKe HuangYou', sans-serif;
# 马山正体(草书)
blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap
  font-family: Titillium Web, 'Ma Shan Zheng', cursive;
# 纸芒星体(草书)
blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap
  font-family: Titillium Web, 'Zhi Mang Xing', cursive;
# 刘健毛体(草书)
blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap
  font-family: Titillium Web, 'Liu Jian Mao Cao', cursive;
# 龙仓体(草书)
blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=Long+Cang&display=swap
  font-family: Titillium Web, 'Long Cang', cursive;
# 自定义网络字体
blog_title_font:
  font_link: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/file/common/font/1574926947.ttf
  font-family: Titillium Web, 'Aa回眸一眼就心动 (非商业使用)', sans-serif

自定义字体库

font_link，自定义字体库需要的每个字体会有woff 和 woff2 两个文件，配置里留空即可
font-family，这里直接引用css里的 font-family 即可

PS：【点击跳转在线 ttf 格式字体文件在线转 woff / woff2 格式字体文件】

1
2
3

blog_title_font:
  font_link:
  font-family: hmyyjxd

在线转字体文件格式的时候，也会跟着生成出来CSS，可以直接拿来用

注意：这里css需要初始化加载页面的时候就得有，所以需要写进

1
2
3

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

@font-face {
    font-family: 'hmyyjxd';
    src: url('hmyy.woff2') format('woff2'),
        url('hmyy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

社交图标

Butterfly支持font-awesome v6图标。

书写格式：图标名：url || 描述性文字。

1
2
3

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

头像

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

1
2
3

avatar:
  img: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/image/2023/03/blog-avatar.png
  effect: true # 头像会一直转圈

时间轴背景图

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

1	archive_img: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/image/2023/03/banner_time-line.jpg

动态Title

在hexo-blog-demo/node_modules/hexo-theme-butterfly/source/js/ 新建title.js,填入以下代码,注意要在主题配置文件中Inject

//动态标题
var originTitile = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = "w(ﾟДﾟ)w 不要走！再看看嘛！";
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = "♪(^∇^*)欢迎肥来！" + originTitile;
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = originTitile;
    }, 2000);
  }
});

左侧分类树缩放

首页左侧文章分类树快捷按钮

cdn：true，默认jsdelivr CDN。
hide: false，除非将鼠标移动到页面左侧中间部分，否则自动隐藏。
layout：哪个页面将被注入代码片段。更多信息请参见喷油器 | 十六进制。
showCount：显示类别中的帖子数量。
toc：更多信息在这里。
enable: false, 显示帖子目录

1	npm install hexo-widget-tree

修改主题配置文件_config.yml。

# You don't have to configure them.
widget_tree:
  cdn: false
  hide: true
  # layout: default
  # layout:
  #   - home
  #   - page
  showCount: true
  toc:
    enable: false
    # max_depth:
    # min_depth:
    # list_number:

属性	解释
post	文章页是否显示 TOC
page	普通页面是否显示 TOC
number	是否显示章节数
expand	是否展开 TOC
style_simple	简洁模式（侧边栏只显示 TOC, 只对文章页有效）

首页特效

网页图标

语言

网站资料

导航菜单

菜单配置

首页顶部图

背景特效

静止彩带

动态彩带

canvas_nest

网站背景

网站背景透明度1

页面主要部分透明2

网站副标题

字数统计

打字效果

鼠标样式

鼠标点击效果

烟花效果

爱心效果

文字效果

右下角按钮

简繁转换

夜间模式

阅读模式

侧边栏设置

侧边排版

访问人数(UV 和 PV)

访客地图

运行时间

最新评论

Pjax

Inject

页面加载动画preloader

【普通版】加载动画preloader

【进阶版】加载动画preloader

图片大图查看模式

fancybox(推荐)

medium_zoom

自定义字体和字体大小

全局字体

Blog 标题字体

社交图标

TOC

头像

时间轴背景图

动态Title

左侧分类树缩放