魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣）

  1. 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行 回滚： jerryc127/hexo-theme-butterfly、 ccknbc-actions/blog-butterfly。
  2. 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。
  3. 鉴于每个人的根目录名称都不一样，本帖 博客根目录 一律以 [BlogRoot] 指代。
  4. 本帖涉及魔改源码的内容，会使用 diff代码块 标识，复制时请 不要忘记删除 前面的 +、- 符号。
  5. 因为 .pug 和 .styl 以及 .yml 等对缩进要求较为严格，请尽量 不要使用记事本等无法提供语法高亮的文本编辑器 进行修改。
  6. 本帖基于 Butterfly主题 进行魔改方案编写，因此请读者优先掌握 Butterfly主题官方文档 的内容后再来进行魔改。
  7. 魔改会过程常常引入 自定义的css与js文件，方法见 Hexo博客添加自定义css和js文件(太懒了不想自己写)

外挂标签的引入（店长）

点击查看教程

详见： Tag Plugins Plus

  1. 安装插件,在博客根目录 [BlogRoot] 下打开终端，运行以下指令：
    1
    npm install hexo-butterfly-tag-plugins-plus --save

考虑到hexo自带的markdown渲染插件 hexo-renderer-marked 与外挂标签语法的兼容性较差，建议您将其替换成 hexo-renderer-kramed

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

  1. 添加配置信息，以下为写法示例

在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

  1. 参数释义
参数备选值/类型释义
enabletrue/false【必选】控制开关
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
issuestrue/false【可选】issues标签控制开关，默认为false
link.placeholder【必选】link卡片外挂标签的默认图标
CDN.animaURL【可选】动画标签anima的依赖
CDN.jqueryURL【可选】issues标签依赖
CDN.issuesURL【可选】issues标签依赖
CDN.iconfontURL【可选】iconfont标签symbol样式引入，如果不想引入，则设为false
CDN.carouselURL【可选】carousel旋转相册标签鼠标拖动依赖，如果不想引入则设为false
CDN.tag_plugins_cssURL【可选】外挂标签样式的CSS依赖，为避免CDN缓存延迟，建议将@latest改为具体版本号

具体样式和写法可见： Markdown语法与外挂标签写法汇总

听话的鼠标魔改

点击查看教程

效果预览

动画

  1. 新建文件 [BlogRoot]\source\js\cursor.js，在里面写上如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var CURSOR;

Math.lerp = (a, b, n) => (1 - n) * a + n * b;

const getStyle = (el, attr) => {
    try {
        return window.getComputedStyle
            ? window.getComputedStyle(el)[attr]
            : el.currentStyle[attr];
    } catch (e) {}
    return "";
};

class Cursor {
    constructor() {
        this.pos = {curr: null, prev: null};
        this.pt = [];
        this.create();
        this.init();
        this.render();
    }

    move(left, top) {
        this.cursor.style["left"] = `${left}px`;
        this.cursor.style["top"] = `${top}px`;
    }

    create() {
        if (!this.cursor) {
            this.cursor = document.createElement("div");
            this.cursor.id = "cursor";
            this.cursor.classList.add("hidden");
            document.body.append(this.cursor);
        }

        var el = document.getElementsByTagName('*');
        for (let i = 0; i < el.length; i++)
            if (getStyle(el[i], "cursor") == "pointer")
                this.pt.push(el[i].outerHTML);

        document.body.appendChild((this.scr = document.createElement("style")));
        // 这里改变鼠标指针的颜色 由svg生成
        this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='.5'/></svg>") 4 4, auto}`;
    }

    refresh() {
        this.scr.remove();
        this.cursor.classList.remove("hover");
        this.cursor.classList.remove("active");
        this.pos = {curr: null, prev: null};
        this.pt = [];

        this.create();
        this.init();
        this.render();
    }

    init() {
        document.onmouseover  = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
        document.onmouseout   = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
        document.onmousemove  = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
        document.onmouseenter = e => this.cursor.classList.remove("hidden");
        document.onmouseleave = e => this.cursor.classList.add("hidden");
        document.onmousedown  = e => this.cursor.classList.add("active");
        document.onmouseup    = e => this.cursor.classList.remove("active");
    }

    render() {
        if (this.pos.prev) {
            this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
            this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
            this.move(this.pos.prev.x, this.pos.prev.y);
        } else {
            this.pos.prev = this.pos.curr;
        }
        requestAnimationFrame(() => this.render());
    }
}

(() => {
    CURSOR = new Cursor();
    // 需要重新获取列表时，使用 CURSOR.refresh()
})();

其中比较重要的参数就是鼠标的尺寸和颜色，已经在上图中标出，目前发现颜色只支持RGB写法和固有名称写法（例如red这种），其他参数也可以自行摸索：

1
* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='1.0' fill='rgb(57, 197, 187)'/></svg>") 4 4, auto}`

  1. 在 [BlogRoot]\source\css\custom.css 添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 鼠标样式 */
#cursor {
  position: fixed;
  width: 16px;
  height: 16px;
  /* 这里改变跟随的底色 */
  background: var(--theme-color);
  border-radius: 8px;
  opacity: 0.25;
  z-index: 10086;
  pointer-events: none;
  transition: 0.2s ease-in-out;
  transition-property: background, opacity, transform;
}

#cursor.hidden {
  opacity: 0;
}

#cursor.hover {
  opacity: 0.1;
  transform: scale(2.5);
  -webkit-transform: scale(2.5);
  -moz-transform: scale(2.5);
  -ms-transform: scale(2.5);
  -o-transform: scale(2.5);
}

#cursor.active {
  opacity: 0.5;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
}

这里比较重要的参数就是鼠标跟随的圆形颜色，可以根据自己的喜好进行更改：

1
2
3
4
#cursor {
  /* 这里改变跟随的底色 */
  background: rgb(57, 197, 187);
}
  1. 在主题配置文件 _config.butterfly.yml 文件的 inject 配置项引入刚刚创建的 css 文件和 js 文件：
1
2
3
4
5
inject: 
  head: 
+    - <link rel="stylesheet" href="/css/custom.css">
  bottom:
+    - <script defer src="/js/cursor.js"></script>
  1. 重启项目即可看见效果：
    1
    hexo cl; hexo s

页面样式调节

点击查看教程

这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。

  1. 复制以下代码进去自定义的 custom.css 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
:root {
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}


/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

  1. 参数说明：

    • --trans-light：白天模式带透明度的背景色，如 rgba(255, 255, 255, 0.88) 底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；

    • --trans-dark: 夜间模式带透明度的背景色，如 rgba(25, 25, 25, 0.88) 底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明;

    • --border-style: 边框样式， 1px solid rgb(169, 169, 169) 指宽度为1px的灰色实体边框;

    • --backdrop-filter: 背景过滤器，如 blur(5px) saturate(150%) 表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法;

    • 大家可以根据自己喜好进行调节，不用拘泥于我的样式！

  2. 记住在主题配置文件 _config.butterfly.yml 的 inject 配置项中引入该css文件：
1
2
3
inject: 
  head: 
+    - <link rel="stylesheet" href="/css/custom.css">
  1. 重启项目即可看见效果：
1
hexo cl; hexo s

引入iconfont自定义图标（店长）

点击查看教程

详见： Iconfont Inject

新建图标项目

  1. 访问 阿里巴巴矢量图标库,注册登录。

  2. 搜索自己心仪的图标，然后选择 添加入库，加到购物车。

  3. 选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，如果没有项目就新建一个。
    p4

  4. 可以通过上方顶栏菜单->资源管理->我的项目，找到之前添加的图标项目。(现在的iconfont可以在图标库的项目设置里直接打开彩色设置，然后采用fontclass的引用方式即可使用多彩图标。但是 单一项目彩色图标上限是40个图标，酌情采用。)
    image-20221029212836645 image-20221029212857202

引入图标

线上引入方案，我使用的是官方文档中最便捷的 font-class 方案。这一方案偶尔会出现图标加载不出的情况。但是便于随时对图标库进行升级，换一下在线链接即可，适合新手使用。最新版本的iconfont支持直接在项目设置中开启彩色图标，从而实现直接用class添加多彩色图标。（推荐直接用这个即可）

  1. 在 [BlogRoot]\themes\butterfly\source\css\custom.css 中填写如下内容，引入Unicode和Font-class的线上资源：
    1
    @import "//at.alicdn.com/t/font_2264842_b004iy0kk2b.css";

更推荐在在主题配置文件 inject 配置项进行全局引入：

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="//at.alicdn.com/t/font_2264842_b004iy0kk2b.css" media="defer" onload="this.media='all'">
  bottom: 
    - <script async src="//at.alicdn.com/t/font_2264842_b004iy0kk2b.js"></script>

  1. 同时可以在自定义 CSS 中添加如下样式来控制图标默认大小和颜色等属性（ 若已经在项目设置中勾选了彩色选项，则无需再定义图标颜色），写法与字体样式类似，这恐怕也是它被称为 iconfont（图标字体）的原因:

    1
    2
    3
    4
    5
    6
    7
    8
    .iconfont {
      font-family: "iconfont" !important;
      /* 这里可以自定义图标大小 */
      font-size: 3em;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

  2. 可以通过自己的阿里图标库的font-class方案查询复制相应的 icon-xxxx。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <i class="iconfont icon-rat"></i>
    <i class="iconfont icon-ox"></i>
    <i class="iconfont icon-tiger"></i>
    <i class="iconfont icon-rabbit"></i>
    <i class="iconfont icon-dragon"></i>
    <i class="iconfont icon-snake"></i>
    <i class="iconfont icon-horse"></i>
    <i class="iconfont icon-goat"></i>
    <i class="iconfont icon-monkey"></i>
    <i class="iconfont icon-rooster"></i>
    <i class="iconfont icon-dog"></i>
    <i class="iconfont icon-boar"></i>

菜单栏多色动态图标（店长）

点击查看教程

详见： 糖果屋微调合集

相比于静态的图标，个人更喜欢动态的，因此一步到位！

效果预览：

效果预览

动画

前置教程： Hexo引入阿里矢量图标库-iconfont inject 和 基于Butterfly的外挂标签引入-Tag Plugins Plus 中关于 动态标签anima 的内容。请确保您已经完成了前置教程，并实现了在文章中使用 symbol 写法来引入 iconfont 图标。同时引入了 fontawesome_animation 的前置依赖。

主要检查您的 inject 配置项中是否有这两个依赖

1
2
3
4
5
6
7
inject:
  head:
    #动画标签anima的依赖
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'">
  bottom:
    # 阿里矢量图标,这串是我的图标库，你的链接会有所不同。
    - <script async src="//at.alicdn.com/t/font_2032782_ev6ytrh30f.js"></script>

  1. 替换 [BlogRoot]\themes\butterfly\layout\includes\header\menu_item.pug 为以下代码，本方案默认使用观感最佳的悬停父元素触发子元素动画效果，默认动画为 faa-tada。注意：可以把之前的代码注释掉，再在后面加上如下代码，以便于回滚，此代码在 butterfly 4.3.1 上可以运行并保留hide字段隐藏子菜单的功能，其他版本自行测试。代码的本质并不复杂，就是扫描配置文件对应的配置项，然后根据 || 的分割标志筛选出对应的图标名称、对应链接等，从而渲染出html页面。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    if theme.menu
      .menus_items
        each value, label in theme.menu
          if typeof value !== 'object'
            .menus_item
              - const valueArray = value.split('||')
              a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))
                if valueArray[1]
                  i.fa-fw(class=trim(valueArray[1]))
                  - var icon_value = trim(value.split('||')[1])
                  - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
                  if icon_value.substring(0,2)=="fa"      
                    i.fa-fw(class=icon_value + ' ' + anima_value)
                  else if icon_value.substring(0,4)=="icon"          
                    svg.icon(aria-hidden="true" class=anima_value)
                      use(xlink:href=`#`+ icon_value)
                span=' '+label
          else
            .menus_item
              - const labelArray = label.split('||')
              - const hideClass = labelArray[3] && trim(labelArray[3]) === 'hide' ? 'hide' : ''
              a.site-page.group.faa-parent.animated-hover(class=`${hideClass}` href='javascript:void(0);')
                if labelArray[1]
                  - var icon_label = trim(label.split('||')[1])
                  - var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'
                  if icon_label.substring(0,2)=="fa"      
                    i.fa-fw(class=icon_label + ' ' + anima_label)
                  else if icon_label.substring(0,4)=="icon"    
                    svg.icon(aria-hidden="true" class=anima_label)
                      use(xlink:href=`#`+ icon_label)
                span=' '+ trim(labelArray[0])
                i.fas.fa-chevron-down
              ul.menus_item_child
                each val,lab in value 
                  - const valArray = val.split('||')
                  li
                    a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split('||')[0])))
                      if valArray[1]
                        - var icon_val = trim(val.split('||')[1])
                        - var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'
                        if icon_val.substring(0,2)=="fa"      
                          i.fa-fw(class=icon_val + ' ' + anima_val)
                        else if icon_val.substring(0,4)=="icon"
                          svg.icon(aria-hidden="true" class=anima_val)
                            use(xlink:href=`#`+ icon_val)                    
                      span=' '+ lab

  2. 以下是填写示例，在 [BlogRoot]\_config.butterfly.yml 中修改。 icon-xxx 字样的为 iconfont 的 symbol 引入方案的 id 值，可以在你的 iconfont 图标库内查询，其中hide属性也是可以用的。

    1
    2
    3
    4
    5
    6
    7
    menu:
      首页: / || icon-home || faa-tada
      文章 || icon--article || faa-tada || hide:
        归档: /archives/ || icon-guidang1 || faa-tada
        标签: /tags/ || icon-sekuaibiaoqian || faa-tada
        分类: /categories/ || icon-fenlei || faa-tada
        随便逛逛: javascript:randomPost(); || icon-zuji1 || faa-tada

  3. 要注意的是，这里的动态图标是 svg.icon 的标签，因此上面调节 .iconfont 的css并不使用，我们需要在自定义样式文件 custom.css 里加上一些样式来限制图标的大小和颜色等，具体大小自行调节。

    1
    2
    3
    4
    5
    6
    7
    svg.icon {
      width: 1.28em;
      height: 1.28em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

  4. 重启项目即可看到效果：

    1
    hexo cl; hexo s

Social卡片彩色图标引入（店长）

点击查看教程

详见： 糖果屋微调合集

效果预览：

效果预览

动画

代码原理和上面的菜单栏基本一致，所以各个前置教程都不再重复，这里只提供代码魔改内容和配置项编写方案。（记住要引入了自己的图标再来看这个教程！！！）

  1. 重写 [BlogRoot]\themes\butterfly\layout\includes\header\social.pug,替换为以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    each value, title in theme.social
      a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
        if value.split('||')[1]
          - var icon_value = trim(value.split('||')[1])
          - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
          if icon_value.substring(0,2)=="fa"      
            i.fa-fw(class=icon_value + ' ' + anima_value)
          else if icon_value.substring(0,4)=="icon"          
            svg.icon(aria-hidden="true" class=anima_value)
              use(xlink:href=`#`+ icon_value)

  2. 以下为对应的 social 配置项。写法沿用 menu_item 的写法示例，修改 [BlogRoot]\_config.butterfly.yml 的 social 配置项，具体的链接改为自己的。

    1
    2
    3
    4
    5
    6
    social:
      微信: /assets/QRCode.jpg || icon-weixin || faa-tada
      QQ: https://res.abeim.cn/api/qq/?qq=1174008660 || icon-QQ || faa-tada
      B站: https://space.bilibili.com/220757832 || icon-bilibili || faa-tada
      QQ邮箱: mailto:1174008660@qq.com || icon-youxiang || faa-tada
      力扣: https://leetcode.cn/u/fomalhaut1998 || icon-leetcode || faa-tada

  3. 要注意的是，这里的动态图标是 svg.icon 的标签，因此上面调节 .iconfont 的css并不使用，我们需要在自定义样式文件 custom.css 里加上一些样式来限制图标的大小和颜色等，具体大小自行调节（如果上面弄过菜单栏的图标大小，这里也就不需要再重复写了）。

    1
    2
    3
    4
    5
    6
    7
    svg.icon {
      width: 1.28em;
      height: 1.28em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

  4. 进阶操作：不知道大家发现没有，这个css对菜单栏的图标和对社交图标同时生效，但是有时候我们想这两者有不一样的大小，怎么办？其实很简单，只要我们给这两部分的图标元素贴上不同的“标签”就可以，这个标签可以是 id，也可以是 class，但是众所周知html中的id是唯一的，我们这里有多个图标，因此贴上不通的 class 比较合适，因此我们改造一下 [BlogRoot]\themes\butterfly\layout\includes\header\social.pug 这个文件

1
2
3
4
5
6
7
8
9
10
11
each value, title in theme.social
  a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
    if value.split('||')[1]
      - var icon_value = trim(value.split('||')[1])
      - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
      if icon_value.substring(0,2)=="fa"      
        i.fa-fw(class=icon_value + ' ' + anima_value)
      else if icon_value.substring(0,4)=="icon"          
-        svg.icon(aria-hidden="true" class=anima_value)
+        svg.social_icon(aria-hidden="true" class=anima_value)
          use(xlink:href=`#`+ icon_value)

上面的改动会将图标渲染成 class=social_icon 的标签，现在我们可以区分菜单栏还是社交的图标的，如果想调节社交图标的大小就用以下的css

1
2
3
4
5
6
7
svg.social_icon {
  width: 1.20em;
  height: 1.20em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

举一反三，要想专门用css改动菜单栏图标大小，只需要将 [BlogRoot]\themes\butterfly\layout\includes\header\menu_item.pug 文件中的 svg.icon 替换成 svg.menu_icon，然后用以下的css

1
2
3
4
5
6
7
svg.menu_icon {
  width: 1.28em;
  height: 1.28em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
  1. 重启项目即可看到效果：
1
hexo cl; hexo s

侧边栏图标和文字自定义

点击查看教程

效果预览

image-12afd4c93c88c753e.webp

这里的图标也是用的iconfont的，请完成前面的图标引入教程！由于侧边栏比较多，这里就演示改网站信息，剩下的侧边栏改法几乎一样的！（记住要引入了自己的图标再来看这个教程！！！）

  1. 进入 [BlogRoot]\themes\butterfly\layout\includes\widget\card_webinfo.pug，进行以下修改，因为默认的图标是 font-awesome 的黑白图标，就是 i.fas.fa-chart-line 那一行，删除，然后引入新的图标标签，其中图标的样式、名称等参考自己的需要进行更改，样式主要是 width、 height、 position、 top 这几个属性，这里的 animated-hover 和 faa-tada 是给对应的元素套上对应的class，如果装了动画依赖，扫描到这些class的元素会自动挂载动画样式，如果不想要可以去除。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
if theme.aside.card_webinfo.enable
  .card-widget.card-webinfo
    .item-headline
-      i.fas.fa-chart-line
+      a.faa-parent.animated-hover
+       svg.faa-tada.icon(style="height:25px;width:25px;fill:currentColor;position:relative;top:5px" aria-hidden="true")
+        use(xlink:href='#icon-shujutongji2')
      span= _p('aside.card_webinfo.headline')
    .webinfo
      if theme.aside.card_webinfo.post_count
        .webinfo-item
          .item-name= _p('aside.card_webinfo.article_name') + " :"
          .item-count= site.posts.length
      if theme.runtimeshow.enable
        .webinfo-item
          .item-name= _p('aside.card_webinfo.runtime.name') + " :"
          .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
            i.fa-solid.fa-spinner.fa-spin
      if theme.wordcount.enable && theme.wordcount.total_wordcount
        .webinfo-item
          .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
          .item-count=totalcount(site)
      if theme.busuanzi.site_uv
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
          .item-count#busuanzi_value_site_uv
            i.fa-solid.fa-spinner.fa-spin
      if theme.busuanzi.site_pv
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
          .item-count#busuanzi_value_site_pv
            i.fa-solid.fa-spinner.fa-spin
      if theme.aside.card_webinfo.last_push_date
        .webinfo-item
          .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
          .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
            i.fa-solid.fa-spinner.fa-spin
  1. 接下来就是改文了，注意到第8行的 span= _p('aside.card_webinfo.headline')，这行代码就是渲染图标后面的文字，我们其实可以直接改成 span= _p('小站资讯')，这样就已经按照自己的文字显示了，但是为了更好维护，我们遵循主题的设计原则，注意到变量 aside.card_webinfo.headline，这其实是在写好的语言包中扫描对应的值，因为不同的语言对应不同的文字，如果我们设置了语言为 zh-CN 那么就到 [BlogRoot]\themes\butterfly\languages\zh-CN.yml 进行修改。 yml 文件是以缩进区分层级的，我们只需要寻找 aside-> card_webinfo-> headline 这一项修改为自己喜欢的内容即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
aside:
  articles: 文章
  tags: 标签
  categories: 分类
  card_announcement: 公告栏
  card_categories: 分类
  card_tags: 标签
  card_archives: 归档
  card_recent_post: 最新文章
  card_friend_link: 通讯录
  card_webinfo:
-    headline: 网站资讯
+    headline: 网站资讯
    article_name: 文章数目
    runtime:
      name: 已运行时间
      unit: 天
    last_push_date:
      name: 最后更新时间
    site_wordcount: 本站总字数
    site_uv_name: 本站访客数
    site_pv_name: 本站总访问量
  more_button: 查看更多
  card_newest_comments:
    headline: 最新评论
    loading_text: 正在加载中...
    error: 无法获取评论，请确认相关配置是否正确
    zero: 没有评论
    image: 图片
    link: 链接
    code: 代码
  card_toc: 目录
  1. 最后重新编译运行即可看见效果。
1
hexo cl; hexo s

渐变色版权美化（店长+微调）

点击查看教程

详见： （二创）Copyright-beautify

效果预览

image.webp

  1. 修改 [BlogRoot]\themes\butterfly\layout\includes\post\post-copyright.pug,直接复制以下内容替换原文件内容。此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的 front-matter 中重新定义作者，原文链接，开源许可协议等内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license
  1. 修改 [BlogRoot]\themes\butterfly\source\css\_layout\post.styl,直接复制以下内容，替换原文件，这个文件就是自己调节样式的。其中， 184 行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节； 253 行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + 12, 'px')

    &:before
      margin-left: unit((-(fontsize + 6)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
      padding-left: unit(fontsize + 18, 'px')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out

    &:before
      position: absolute
      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon

    &:hover
      &:before
        color: $light-blue

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    p
      margin: 0 0 8px

  li
    &::marker
      color: $light-blue
      font-weight: 600
      font-size: 1.05em

    &:hover
      &::marker
        color: var(--pseudo-hover)

  ul > li
    list-style-type: circle

#article-container
  word-wrap: break-word
  overflow-wrap: break-word

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    display: block
    margin: 0 auto 20px
    max-width: 100%
    transition: filter 375ms ease-in .2s

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

  if hexo-config('anchor')
    a.headerlink
      &:after
        @extend .fontawesomeIcon
        float: right
        color: var(--headline-presudo)
        content: '\f0c1'
        font-size: .95em
        opacity: 0
        transition: all .3s

      &:hover
        &:after
          color: var(--pseudo-hover)

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      &:hover
        a.headerlink
          &:after
            opacity: 1

  ol,
  ul
    ol,
    ul
      padding-left: 20px

    li
      margin: 4px 0

    p
      margin: 0 0 8px

  if hexo-config('beautify.enable')
    if hexo-config('beautify.field') == 'site'
      beautify()
    else if hexo-config('beautify.field') == 'post'
      &.post-content
        beautify()

  > :last-child
    margin-bottom: 0 !important

#post
  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: 8px 8px 8px 0
        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: var(--white)

    .post_share
      display: inline-block
      float: right
      margin: 8px 0
      width: fit-content

      .social-share
        font-size: .85em

        .social-share-icon
          margin: 0 4px
          width: w = 1.85em
          height: w
          font-size: 1.2em
          line-height: w

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
    overflow: hidden
    border-radius: 12px!important
    background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);

    &:before
      background var(--heo-post-blockquote-bg)
      position absolute
      right -26px
      top -120px
      content '\f25e'
      font-size 200px
      font-family 'Font Awesome 5 Brands'
      opacity .2

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
          text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

  .post-copyright-cc-info
    color: $theme-color;

  .post-outdate-notice
    position: relative
    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

    if hexo-config('noticeOutdate.style') == 'flat'
      padding: .5em 1em .5em 2.6em
      border-left: 5px solid $noticeOutdate-border

      &:before
        @extend .fontawesomeIcon
        position: absolute
        top: 50%
        left: .9em
        color: $noticeOutdate-border
        content: '\f071'
        transform: translateY(-50%)

  .ads-wrap
    margin: 40px 0
.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display inline-block
    width fit-content
    padding 2px 5px
[data-theme="dark"]
  #post
    .post-copyright
      background #07080a
      text-shadow #bfbeb8 0 0 2px
      border 1px solid rgb(19 18 18 / 35%)
      box-shadow 0 0 5px var(--theme-color)
      animation flashlight 1s linear infinite alternate
  .post-copyright-info
    color #e0e0e4

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px
  .post-copyright
    box-shadow 2px 2px 5px

  1. 默认项的配置

    • 作者： [BlogRoot]\_config.yml 中的 author 配置项
1
2
3
4
5
6
7
8
# Site
title: Akilarの糖果屋
subtitle: Akilar.top
description:
keywords:
author: Akilar #默认作者
language: zh-CN
timezone: ''
  • 许可协议： [BlogRoot]\_config.butterfly.yml 中的 license 和 license_url 配置项
1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
  1. 页面覆写配置项，修改对应文章的 front-matter
1
2
3
4
5
6
7
8
9
---
title: Copyright-beautify # 文章名称
date: 2021-03-02 13:52:46 # 文章发布日期
updated: 2021-03-02 13:52:46 # 文章更新日期
copyright_author: Nesxc # 作者覆写
copyright_url: https://www.nesxc.com/post/hexocc.html # 原文链接覆写
license: # 许可协议名称覆写
license_url: # 许可协议链接覆写
---

aplayer音乐播放器

点击查看教程

详见： Butterfly添加全局吸底Aplayer教程

效果预览

image (1)

注意：我这里只在某个页面引入音乐播放器，如果要引入全局吸底的播放器，请见上面的链接。

  1. 在博客根目录 [BlogRoot] 下打开终端，运行以下指令：
1
npm install hexo-tag-aplayer --save
  1. 在网站配置文件 _config.yml 中修改 aplayer 配置项为：
1
2
3
4
# 音乐插件
aplayer: 
  meting: true
  asset_inject: false
  1. 在主题配置文件 _config.butterfly.yml 中修改 aplayerInject 配置项为：
1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: false
  1. 在你想要加入音乐播放器的页面加入以下语句：
1
<div id="aplayer-oSEOhviA" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="4895239160" data-server="netease" data-type="playlist" data-mode="random" data-autoplay="false" data-listmaxheight="340px" data-preload="auto" data-theme="#e3f2f5" data-volume="0.4" mutex="true"></div>

其中 data-id 为歌单ID可以换为你喜欢的歌曲，其他参数见详情页这里不再赘述！

顶部渐变条色加载条

点击查看教程

详见： 给Butterfly加上顶部加载条

效果预览

image-20221030160812710

  1. 新建 [BlogRoot]\source\css\progress_bar.css 文件，写入以下内容（或者你在 [BlogRoot]\source\css\custom.css 直接加也行，最后在配置文件记得引入即可）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.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: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 7rem;
    background: #eaecf2;
    border: 1px #e3e8f7;
    overflow: hidden
}

.pace-inactive .pace-progress {
    opacity: 0;
    transition: .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%;
    /* linear-gradient(to right, #3494e6, #ec6ead) */
    background: linear-gradient(to right, #43cea2, #3866ca);
    animation: gradient 2s ease infinite;
    background-size: 200%
}

.pace.pace-inactive {
    opacity: 0;
    transition: .3s;
    top: -8px
}

  1. 在主题配置文件 _config.butterfly.yml 的 inject 配置项加入刚刚的css样式和必须的js依赖：
1
2
3
4
5
6
7
inject:
  head:
    - xxx
    - <link rel="stylesheet" href="/css/progress_bar.css" media="defer" onload="this.media='all'"> 
  bottom: 
  	- xxx
    - <script async src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script>

Bilibili视频适配

点击查看教程

效果预览

image

  1. 在 [BlogRoot]\source\css\custom.css 自定义样式的文件中引入如下代码（这是我的，你可以自行微调）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*哔哩哔哩视频适配*/
.aspect-ratio {
  position: relative;
  width: 90%;
  height: auto;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  top: 0;
}
  1. 直接复制插入你的 md 文章就行，修改里面的 aid 为你视频的 AV 号：
1
2
3
4
5
6
7
8
9
10
11
<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid=474023258&&page=1&as_wide=1&high_quality=1&danmaku=0" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    high_quality=1
    danmaku=1 
    allowfullscreen="true"> 
    </iframe>
</div>

文章页局部 html 代码不渲染

点击查看教程

在你的 md 文章页中，部分内容不想经过 Hexo 渲染，则包一层 raw 标签：

1
2
3
4
{% raw %}
<div class="">你的一些代码...</div>
<script>你的一些代码...</script>
{% endraw %}

那么标签内的代码就不会被框架渲染了~

文章H1~H6标题小风车转动效果

点击查看教程

效果预览

Your browser does not support the video tag.

  1. 修改主题配置文件 _config.butterfly.yml 文件的 beautify 配置项：
1
2
3
4
5
6
beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"
  1. 在 [BlogRoot]\source\css\custom.css 中加入以下代码，可以自己调节一下转速:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}
/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}
  1. 在主题配置文件 _config.butterfly.yml 的 inject 配置项进行引入（不再赘述）。

挂绳小猫咪(tzy大佬)

点击查看教程

详见： 请收下这只可爱的猫咪吧

效果预览

  1. 制作一个盛放内容的盒子，在 [BlogRoot]/node_modules/hexo-theme-butterfly/layout/includes/head.pug(如果是 git clone 安装在 [BlogRoot]/themes/butterfly/layout/includes/head.pug)最后一行加入如下代码：
1
#myscoll

其实随便放在哪里都行，只要能加载出来就行

  1. 在 [BlogRoot]/node_modules/hexo-theme-butterfly/source/js 文件夹下新建一个 cat.js，将以下代码复制到文件中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
if (document.body.clientWidth > 992) {
    function getBasicInfo() {
        /* 窗口高度 */
        var ViewH = $(window).height();
        /* document高度 */
        var DocH = $("body")[0].scrollHeight;
        /* 滚动的高度 */
        var ScrollTop = $(window).scrollTop();
        /* 可滚动的高度 */
        var S_V = DocH - ViewH;
        var Band_H = ScrollTop / (DocH - ViewH) * 100;
        return {
            ViewH: ViewH,
            DocH: DocH,
            ScrollTop: ScrollTop,
            Band_H: Band_H,
            S_V: S_V
        }
    };
    function show(basicInfo) {
        if (basicInfo.ScrollTop > 0.001) {
            $(".neko").css('display', 'block');
        } else {
            $(".neko").css('display', 'none');
        }
    }
    (function ($) {
        $.fn.nekoScroll = function (option) {
            var defaultSetting = {
                top: '0',
                scroWidth: 6 + 'px',
                z_index: 9999,
                zoom: 0.9,
                borderRadius: 5 + 'px',
                right: 60 + 'px',
                // 这里可以换为你喜欢的图片，例如我就换为了雪人，但是要抠图
                nekoImg: "https://bu.dusays.com/2022/07/20/62d812db74be9.png",
                hoverMsg: "喵喵喵~",
                color: "#6f42c1",
                during: 500,
                blog_body: "body",
            };
            var setting = $.extend(defaultSetting, option);
            var getThis = this.prop("className") !== "" ? "." + this.prop("className") : this.prop("id") !== "" ? "#" +
                this.prop("id") : this.prop("nodeName");
            if ($(".neko").length == 0) {
                this.after("<div class=\"neko\" id=" + setting.nekoname + " data-msg=\"" + setting.hoverMsg + "\"></div>");
            }
            let basicInfo = getBasicInfo();
            $(getThis)
                .css({
                    'position': 'fixed',
                    'width': setting.scroWidth,
                    'top': setting.top,
                    'height': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 + 'px',
                    'z-index': setting.z_index,
                    'background-color': setting.bgcolor,
                    "border-radius": setting.borderRadius,
                    'right': setting.right,
                    'background-image': 'url(' + setting.scImg + ')',
                    'background-image': '-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent)', 'border-radius': '2em',
                    'background-size': 'contain'
                });
            $("#" + setting.nekoname)
                .css({
                    'position': 'fixed',
                    'top': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 - 50 + 'px',
                    'z-index': setting.z_index * 10,
                    'right': setting.right,
                    'background-image': 'url(' + setting.nekoImg + ')',
                });
            show(getBasicInfo());
            $(window)
                .scroll(function () {
                    let basicInfo = getBasicInfo();
                    show(basicInfo);
                    $(getThis)
                        .css({
                            'position': 'fixed',
                            'width': setting.scroWidth,
                            'top': setting.top,
                            'height': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 + 'px',
                            'z-index': setting.z_index,
                            'background-color': setting.bgcolor,
                            "border-radius": setting.borderRadius,
                            'right': setting.right,
                            'background-image': 'url(' + setting.scImg + ')',
                            'background-image': '-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent)', 'border-radius': '2em',
                            'background-size': 'contain'
                        });
                    $("#" + setting.nekoname)
                        .css({
                            'position': 'fixed',
                            'top': basicInfo.Band_H * setting.zoom * basicInfo.ViewH * 0.01 - 50 + 'px',
                            'z-index': setting.z_index * 10,
                            'right': setting.right,
                            'background-image': 'url(' + setting.nekoImg + ')',
                        });
                    if (basicInfo.ScrollTop == basicInfo.S_V) {
                        $("#" + setting.nekoname)
                            .addClass("showMsg")
                    } else {
                        $("#" + setting.nekoname)
                            .removeClass("showMsg");
                        $("#" + setting.nekoname)
                            .attr("data-msg", setting.hoverMsg);
                    }
                });
            this.click(function (e) {
                btf.scrollToDest(0, 500)
            });
            $("#" + setting.nekoname)
                .click(function () {
                    btf.scrollToDest(0, 500)
                });
            return this;
        }
    })(jQuery);

    $(document).ready(function () {
        //部分自定义
        $("#myscoll").nekoScroll({
            bgcolor: 'rgb(0 0 0 / .5)', //背景颜色，没有绳子背景图片时有效
            borderRadius: '2em',
            zoom: 0.9
        }
        );
        //自定义（去掉以下注释，并注释掉其他的查看效果）
        /*
        $("#myscoll").nekoScroll({
            nekoname:'neko1', //nekoname，相当于id
            nekoImg:'img/猫咪.png', //neko的背景图片
            scImg:"img/绳1.png", //绳子的背景图片
            bgcolor:'#1e90ff', //背景颜色，没有绳子背景图片时有效
            zoom:0.9, //绳子长度的缩放值
            hoverMsg:'你好~喵', //鼠标浮动到neko上方的对话框信息
            right:'100px', //距离页面右边的距离
            fontFamily:'楷体', //对话框字体
            fontSize:'14px', //对话框字体的大小
            color:'#1e90ff', //对话框字体颜色
            scroWidth:'8px', //绳子的宽度
            z_index:100, //不用解释了吧
            during:1200, //从顶部到底部滑动的时长
        });
        */
    })
}
  1. 在 [BlogRoot]/node_modules/hexo-theme-butterfly/source/css 文件夹下新建一个 cat.css，将以下代码复制到文件中。当然你也可以选择不新建 css 文件，复制代码到 custom.css 也行，总之有地方引入就行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

body::-webkit-scrollbar {
    width: 0;
}

.neko {
    width: 64px;
    height: 64px;
    background-image: url("https://bu.dusays.com/2022/07/20/62d812db74be9.png");
    position: absolute;
    right: 32px;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(50%);
    cursor: pointer;
    font-family: tzy;
    font-weight: 600;
    font-size: 16px;
    color: #6f42c1;
    display: none;
}

.neko::after {
    display: none;
    width: 100px;
    height: 100px;
    background-image: url("https://bu.dusays.com/2022/07/20/62d812d95e6f5.png");
    background-size: contain;
    z-index: 9999;
    position: absolute;
    right: 50%;
    text-align: center;
    line-height: 100px;
    top: -115%;

}

.neko.showMsg::after {
    content: attr(data-msg);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neko:hover::after {
    content: attr(data-msg);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neko.fontColor::after {
    color: #333;
}

/**
 * @description: 滚动条样式  跟猫二选一
 */
@media screen and (max-width:992px) {
    ::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important
    }

    ::-webkit-scrollbar-track {
        border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgb(255 255 255 / .3);
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
        border-radius: 2em
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent
    }
}
  1. 在主题配置文件 _config.butterfly.yml 中引入 cat.js 和 cat.css，当然还有在bottom的最前面引入 jQuery，因为 cat.js 的语法依赖 jQuery。
1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="/css/cat.css">
  bottom:
    - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
    - <script defer data-pjax src="/js/cat.js"></script>
  1. 最后重新编译运行即可看见效果。
1
hexo cl; hexo s

配置手机PC页面白天黑夜共四个背景图(店长)

点击查看教程

详见： 糖果屋微调合集

  1. 首先是PC端的白天黑夜双背景，修改 [BlogRoot]\themes\butterfly\layout\includes\layout.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
+ - var DefaultBg = page.defaultbg ? page.defaultbg : theme.background.default
+ - var DDMBg = theme.background.darkmode ? theme.background.darkmode : DefaultBg
+ - var DarkmodeBg = page.darkmodebg ? page.darkmodebg : DDMBg
  if theme.background
    #web_bg
+     if page.defaultbg || page.darkmodebg
+       style.
+         #web_bg{
+           background: #{DefaultBg} !important;
+           background-attachment: local!important;
+           background-position: center!important;
+           background-size: cover!important;
+           background-repeat: no-repeat!important;
+         }
+         [data-theme="dark"]
+           #web_bg{
+             background: #{DarkmodeBg} !important;
+             background-attachment: local!important;
+             background-position: center!important;
+             background-size: cover!important;
+             background-repeat: no-repeat!important;
+           }
  1. 再是实现手机端的白天黑夜双背景，在 [BlogRoot]\themes\butterfly\source\css\_layout 目录下新建一个 web-bg.styl 文件，写入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$web-bg-night = hexo-config('background.darkmode') ? unquote(hexo-config('background.darkmode')) : $web-bg
$mobile-bg-day = hexo-config('background.mobileday') ? unquote(hexo-config('background.mobileday')) : $web-bg
$mobile-bg-night = hexo-config('background.mobilenight') ? unquote(hexo-config('background.mobilenight')) : $web-bg-night
[data-theme="dark"]
  #web_bg
    background: $web-bg-night
    background-attachment: local
    background-position: center
    background-size: cover
    background-repeat: no-repeat
@media screen and (max-width: 800px)
  #web_bg
    background: $mobile-bg-day !important
    background-attachment: local !important
    background-position: center !important
    background-size: cover !important
    background-repeat: no-repeat !important
  [data-theme="dark"]
    #web_bg
      background: $mobile-bg-night !important
      background-attachment: local !important
      background-position: center !important
      background-size: cover !important
      background-repeat: no-repeat !important
  1. 然后还要修改一下 [BlogRoot]\themes\butterfly\source\css\var.styl,大约35行的位置
1
2
3
4
  $text-line-height = 2
- $web-bg = hexo-config('background') && unquote(hexo-config('background'))
+ $web-bg = hexo-config('background.default') && unquote(hexo-config('background.default'))
  $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
  1. 再修改一下配置项，在 [BlogRoot]/_config.butterfly.yml 中找到 background 配置项，内容改为：
1
2
3
4
5
6
7
8
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background:
  default:  #【必选】默认背景
  darkmode: #【可选】PC端夜间模式背景
  mobileday: #【可选】移动端日间默认背景
  mobilenight: #【可选】移动端夜间模式背景
  1. 当开了 Pjax，还要再把 #web_bg 加到 pjax 选择器中。修改 [BlogRoot]\themes\butterfly\layout\includes\third-party\pjax.pug
1
2
3
4
5
6
7
8
9
10
11
  script(src=url_for(theme.CDN.pjax))
  script.
    let pjaxSelectors = [
      'title',
      '#config-diff',
      '#body-wrap',
      '#rightside-config-hide',
      '#rightside-config-show',
+     '#web_bg',
      '.js-pjax'
    ]

每页单独配置背景（店长）

点击查看教程

Butterfly 使用 id 为 web_bg 的 div(以下简称 #web_bg)来挂载背景图片，而背景图片是使用的 #web_bg 的 background 属性来配置,所以只需要改动这个css属性就可以。例如直接在md页面加入这样一条自定义样式。

1
2
3
4
5
6
7
8
9
10
11
{% raw %}
<style>
#web_bg{
  background: url(/img/newbg.png)!important;
  /*重新定义background会导致原有定位属性失效，所以也需要再声明一次加权的定位属性*/
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
</style>
{% endraw %}

而更好的方案自然是在 front-matter 中通过新增一个 background 配置项来配置页面背景。

注意：此魔改可能和 配置手机PC页面白天黑夜共四个背景图 冲突，最好不要同时改！

  1. 修改 [BlogRoot]\themes\butterfly\layout\includes\layout.pug
1
2
3
4
5
6
  if theme.background
-   #web_bg
+   if page.background
+     #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
+   else
+     #web_bg
  1. 如此即可在每个页面的 markdown 文件的 front-matter 中使用 background 配置项单独配置页面背景了,不写或留空则使用主题配置文件中的默认背景。
1
2
3
4
5
6
7
---
title: 糖果屋微调合集
top_img:
cover: 'https://npm.elemecdn.com/akilar-candyassets/image/20201115152231.png'
background: url(https://npm.elemecdn.com/akilar-candyassets/image/index.webp)
description: 将本站针对butterfly主题的亿点点小改动做个集锦。
---
  1. 当开了 Pjax，还要再把 #web_bg 加到 pjax 选择器中。修改 [BlogRoot]\themes\butterfly\layout\includes\third-party\pjax.pug
1
2
3
4
5
6
7
8
9
10
11
  script(src=url_for(theme.CDN.pjax))
  script.
    let pjaxSelectors = [
      'title',
      '#config-diff',
      '#body-wrap',
      '#rightside-config-hide',
      '#rightside-config-show',
+     '#web_bg',
      '.js-pjax'
    ]