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

  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文件(太懒了不想自己写)

博客搭建与魔改系列教程导航🚥🚥🚥

  1. 🥬Hexo博客搭建基础教程(一)
  2. 🍒Hexo博客搭建基础教程(二)
  3. 🥪Hexo博客搭建基础教程(三)
  4. 🍀博客魔改教程总结(一)
  5. 🍚博客魔改教程总结(二) ⇦当前位置🪂
  6. 🎋博客魔改教程总结(三)
  7. 🥕博客魔改教程总结(四)
  8. 🍊博客魔改教程总结(五)
  9. 🧄博客魔改教程总结(六)
  10. 🎨综合美化模块教程

外挂标签的引入（店长）

点击查看教程

详见：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

  2. 添加配置信息，以下为写法示例
    在站点配置文件_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

  3. 参数释义

参数备选值/类型释义
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}`

  2. 在[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);
    }

  3. 在主题配置文件_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>

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

    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;
    }

  2. 参数说明：

    • --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的过滤器，这是亚克力效果的一种实现方法;

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

  3. 记住在主题配置文件_config.butterfly.yml的inject配置项中引入该css文件：

    1
    2
    3
    inject: 
      head: 
    +    - <link rel="stylesheet" href="/css/custom.css">

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

    1
    hexo cl; hexo s

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

点击查看教程

详见：Iconfont Inject

新建图标项目

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

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

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

    p4

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

    image-20221029212836645image-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>

  2. 同时可以在自定义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;
    }

  3. 可以通过自己的阿里图标库的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;
    }

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

    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

  2. 接下来就是改文了，注意到第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: 目录

  3. 最后重新编译运行即可看见效果。

    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

  2. 修改[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

  3. 默认项的配置

    • 作者：[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/

  4. 页面覆写配置项，修改对应文章的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

  2. 在网站配置文件_config.yml中修改aplayer 配置项为：

    1
    2
    3
    4
    # 音乐插件
    aplayer: 
      meting: true
      asset_inject: false

  3. 在主题配置文件_config.butterfly.yml中修改aplayerInject配置项为：

    1
    2
    3
    4
    # Inject the css and script (aplayer/meting)
    aplayerInject:
      enable: true
      per_page: false

  4. 在你想要加入音乐播放器的页面加入以下语句：

    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
    }

  2. 在主题配置文件_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;
    }

  2. 直接复制插入你的 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标题小风车转动效果

点击查看教程

  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"

  2. 在[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;
    }

  3. 在主题配置文件_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

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

  2. 在[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, //从顶部到底部滑动的时长
            });
            */
        })
    }

  3. 在[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
        }
    }

  4. 在主题配置文件_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>

  5. 最后重新编译运行即可看见效果。

    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;
    +           }

  2. 再是实现手机端的白天黑夜双背景，在[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

  3. 然后还要修改一下[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

  4. 再修改一下配置项，在[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: #【可选】移动端夜间模式背景

  5. 当开了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

  2. 如此即可在每个页面的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主题的亿点点小改动做个集锦。
    ---

  3. 当开了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'
        ]

🍕🍕🍕写在最后

  • 大家有啥教程想看的可以在评论区留言，如果搭建或者魔改过程中遇到不懂的可以加下面的群讨论，同时本人在B站有空也会做一些魔改系列的视频教程，点这里可以进入我的B站账号个人空间–Fomalhaut

    二维码