本帖教程基于Hexo博客程序的 Butterfly主题编写 ，其中魔改/美化内容大部分收集至各位大神的博客以及网络。

由于每位用户的根目录名称各不相同，本文中博客的根目录将统一使用[BlogRoot]这一标识符表示。

其中配置文件_config.yml，其路径为【BlogRoot/_config.yml】。

主题的配置文件_config.butterfly.yml进行相应修改，该文件位于【BlogRoot/_config.butterfly.yml】路径下。

本文包含有关修改源代码的内容，将会使用diff代码块来标记变更。在复制这些代码段时，请记得移除前面的加号（+）和减号（-）符号，其中（+）号代码添加的代码，（-）代表这整行代码需要删除。

自定义CSS/JS方法

CSS：在[BlogRoot]/source/css/目录下新建：daliyuer.css，名称可自定义。

JS：在[BlogRoot]/source/js/目录下新建：daliyuer.js，名称可自定义。

如没有 css跟 js 目录需自建。

点击查看教程

编辑主题配置文件_config.butterfly.yml在inject->head or inject->bottom添加如下两行。

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="/css/daliyuer.css">

  bottom:
    - <script type="text/javascript" src="/js/daliyuer.js"></script>

文章页调整

文章顶部添加波浪效果

教程地址：

给Butterfly主题文章顶部添加波浪效果
ZeroLatency

文章版权样式微调

在自建的CSS文件内 [blogRoot]/source/css/daliyuer.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
/* 版权样式调整 */
#post .post-copyright {
    background: var(--daliyuer-card-bg);
    padding: 1rem 1.3rem;
    overflow: hidden;
    border: var(--style-border);
    border-width: 1px;
    transition: 0.3s;
    position: relative;
    margin: 1.5rem 0px 0.5rem;
    border-radius: 8px;
}

#post .post-copyright:before {
    position: absolute;
    right: 22px;
    top: -77px;
    content: "\e039";
    font-size: 180px;
    font-family: "iconfont";
    color: var(--icat-fontcolor);
    opacity: 0.1;
    filter: blur(7px);
}

/* 版权样式调整end */

全局Css变量：

1
2
3
4
5
6
:root {
       --daliyuer-card-bg: #fff;
}
[data-theme='dark'] {
       --daliyuer-card-bg: #1b1c20;
}

Twikoo评论表情包放大效果

效果图：

点击查看教程

  1. 粘贴以下js内容到自定义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
    /* 表情包放大 end */

    // 如果当前页有评论就执行函数
    if (document.getElementById('post-comment')) owoBig();
    // 表情放大
    function owoBig() {
        let flag = 1, // 设置节流阀
            owo_time = '', // 设置计时器
            m = 3; // 设置放大倍数
        // 创建盒子
        let div = document.createElement('div'),
            body = document.querySelector('body');
        // 设置ID
        div.id = 'owo-big';
        // 插入盒子
        body.appendChild(div)

        // 构造observer
        let observer = new MutationObserver(mutations => {

            for (let i = 0; i < mutations.length; i++) {
                let dom = mutations[i].addedNodes,
                    owo_body = '';
                if (dom.length == 2 && dom[1].className == 'OwO-body') owo_body = dom[1];
                // 如果需要在评论内容中启用此功能请解除下面的注释
                // else if (dom.length == 1 && dom[0].className == 'tk-comment') owo_body = dom[0];
                else continue;

                // 禁用右键（手机端长按会出现右键菜单，为了体验给禁用掉）
                if (document.body.clientWidth <= 768) owo_body.addEventListener('contextmenu', e => e.preventDefault());
                // 鼠标移入
                owo_body.onmouseover = (e) => {
                    // 检查父元素的 className 是否包含 'OwO-packages'
                    if (e.target.parentElement.parentElement.parentElement && e.target.parentElement.parentElement.parentElement.className.includes('OwO-packages')) return;
                    if (flag && e.target.tagName == 'IMG') {
                        flag = 0;
                        // 移入300毫秒后显示盒子
                        owo_time = setTimeout(() => {
                            let height = e.target.clientHeight * m, // 盒子高 2023-02-16更新
                                width = e.target.clientWidth * m, // 盒子宽 2023-02-16更新
                                left = (e.x - e.offsetX) - (width - e.target.clientWidth) / 2, // 盒子与屏幕左边距离 2023-02-16更新
                                top = e.y - e.offsetY; // 盒子与屏幕顶部距离

                            if ((left + width) > body.clientWidth) left -= ((left + width) - body.clientWidth + 10); // 右边缘检测，防止超出屏幕
                            if (left < 0) left = 10; // 左边缘检测，防止超出屏幕
                            // 设置盒子样式
                            div.style.cssText = `display:flex; height:${height}px; width:${width}px; left:${left}px; top:${top}px;`;
                            // 在盒子中插入图片
                            div.innerHTML = `<img src="${e.target.src}">`
                        }, 300);
                    }
                };
                // 鼠标移出隐藏盒子
                owo_body.onmouseout = () => { div.style.display = 'none', flag = 1, clearTimeout(owo_time); }
            }

        })
        observer.observe(document.getElementById('post-comment'), { subtree: true, childList: true }) // 监听的 元素 和 配置项
    }
    /* 表情包放大 end */

  2. 在将以下CSS内容粘贴到自定义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
    #owo-big {
        position: fixed;
        align-items: center;
        background-color: rgb(255, 255, 255);
        border: 1px #aaa solid;
        border-radius: 10px;
        z-index: 9999;
        display: none;
        transform: translate(0, -105%);
        overflow: hidden;
        animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11);
    }

    [data-theme=dark] #owo-big {
        background-color: #4a4a4a
    }

    #owo-big img {
        width: 100%;
    }

    /* 动画效果代码由 Heo：https://blog.zhheo.com/ 提供 */
    @keyframes owoIn {
        0% {
            transform: translate(0, -95%);
            opacity: 0;
        }
        100% {
            transform: translate(0, -105%);
            opacity: 1;
        }
    }

参考文章：

引用站外地址，不保证站点的可用性和安全性
评论表情包放大功能，超实用
Leonus

本站同款Twikoo自定义表情包（持续更新）

点击查看详细教程
  1. 输入暗号进入评论管理界面->配置管理->插件->EMOTION_CDN将EMOTION_CDN内的内容替换成：https://cdn.cbd.int/daliyuer-static@latest/bq/twikoo.json
  2. 如果你想自定义自己的表情包可参考：
    引用站外地址，不保证站点的可用性和安全性
    Twikoo自定义表情列表 |HexoPlusPlus自定义表情列表（其实基于OwO的项目都可以用的啦
    GitHub
    引用站外地址，不保证站点的可用性和安全性
    表情速查
    Twikoo

Twikoo评论区美化

自定义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
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
/* Twikoo 评论美化 */
#post-comment .comment-privacy a:hover {
    color: #409eff;
}

#post-comment .comment-headline {
    display: flex;
    align-items: center;
}

#post-comment .comment-headline>i {
    padding: 0 0 0 6px;
    font-size: 1em;
}

blockquote> :last-child {
    margin: auto !important;
}

.el-input--small .el-input__inner {
    height: 40px !important;
}

.el-input-group__prepend {
    border-radius: 8px 0 0 8px !important;
}

.el-input__inner {
    border-radius: 0 8px 8px 0 !important;
}

.el-textarea__inner {
    border-radius: 8px !important;
}

.el-textarea>textarea {
    height: 120px !important;
}

.el-button--small {
    border-radius: 4px !important;
}

/* 评论编辑块调整 */

/* .tk-submit-action-icon.__markdown {
    display: none;
} */

/* markdown编辑快隐藏 */

.tk-avatar {
    border-radius: 4px !important;
}

.tk-comment .tk-submit .tk-avatar,
.tk-replies .tk-avatar {
    height: 2.5rem !important;
    width: 2.5rem !important;
}

.tk-comment .tk-submit .tk-avatar .tk-avatar-img,
.tk-replies .tk-avatar .tk-avatar-img {
    height: 2.5rem !important;
}

.tk-ruser {
    color: #409eff;
    opacity: .8;
}

@media screen and (max-width: 768px) {

    .tk-comment .tk-submit .tk-avatar,
    .tk-replies .tk-avatar {
        height: 2rem !important;
        width: 2rem !important;
    }

    .tk-comment .tk-submit .tk-avatar .tk-avatar-img,
    .tk-replies .tk-avatar .tk-avatar-img {
        height: 2rem !important;
    }
}

.tk-nick,
.tk-meta a strong {
    font-size: 18px;
    color: #409eff;
}

.tk-tag-green {
    border: var(--style-border) !important;
    border-radius: 4px !important;
    margin-left: 0.2rem;
}

.tk-time {
    margin-left: 0.4rem;
}

.tk-extras {
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--hr-border);
}

.tk-extra {
    border: var(--style-border-always);
    padding: 4px 6px 4px 6px;
    border-radius: 8px;
    margin-right: 4px !important;
}

.tk-expand {
    margin-top: 8px;
    background-color: var(--daliyuer-background);
    color: var(--daliyuer-fontcolor);
    border-radius: 8px;
    border: var(--style-border);
}

.tk-footer {
    padding-bottom: 1em;
}

.tk-footer a {
    color: #999999;
}

.tk-footer a:hover {
    color: #409eff;
}

.tk-admin-comment-item {
    padding: 1em;
    background: var(--global-bg);
    border-radius: 12px;
    border: var(--style-border-always);
    margin-bottom: 12px;
}

.tk-admin-comment-meta,
.tk-content {
    color: var(--daliyuer-fontcolor);
}

.tk-admin-actions {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}

/* 评论管理 */

.tk-panel {
    border: var(--style-border-always);
}

.tk-admin-config-groups {
    padding: 0.5em;
    background: var(--global-bg);
    border-radius: 12px;
    border: var(--style-border-always);
}

.tk-admin-config-groups .tk-admin-config-group-title {
    background: var(--daliyuer-background) !important;
    border-radius: 6px;
    border: var(--style-border-always);
    color: var(--daliyuer-fontcolor);
}

.tk-admin-config-item {
    color: var(--daliyuer-fontcolor);
}

/* 配置管理 */

/* 评论区样式 */
/* Twikoo 评论美化 end*/

全局css变量：

1
2
3
4
5
6
7
8
:root {
    --daliyuer-background: #fff;
    --daliyuer-fontcolor: #363636;
}
[data-theme='dark'] {
    --daliyuer-fontcolor: #F7F7FA;
    --daliyuer-background: #18171d;
}

给外链添加一个跳转页面（插件版）

效果图：

点击查看详细教程

  1. 安装以下两个插件：

    1
    2
    npm install cheerio --save
    npm install hexo-safego --save

  2. 在hexo根目录的_config.yml文件中添加如下配置：

    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
    # hexo-safego安全跳转插件
    # see https://blog.liushen.fun/posts/1dfd1f41/
    hexo_safego:
      # 基本功能设置
      general:
        enable: true                # 启用插件
        enable_base64_encode: true  # 使用 Base64 编码
        enable_target_blank: true   # 打开新窗口
      # 安全设置
      security:
        url_param_name: 'u'         # URL 参数名
        html_file_name: 'go.html'   # 重定向页面的文件名
        ignore_attrs:               # 忽略处理的 HTML 属性
          - 'data-fancybox'
      # 容器与页面设置
      scope:
        apply_containers:           # 应用的容器选择器
          - '#article-container'
        apply_pages:                # 应用的页面路径
          - "/archives/"
          - "/about/"
        exclude_pages:              # 排除的页面路径
      # 域名白名单
      whitelist:
        domain_whitelist:           # 允许的白名单域名
          - "3ms.run"
          - "blog.3ms.run"
          - "www.muooy.com"
          - "muooy.com"
          - "github.com"
      # 页面外观设置
      appearance:
        avatar: /img/avatar-icon.jpg    # 头像路径
        title: "ZeroLatency"            # 页面标题
        subtitle: "安全中心"         # 页面副标题
        darkmode: false             # 是否启用深色模式
        countdowntime: 3           # 倒计时秒数
      # 调试设置
      debug:
        enable: false               # 启用调试模式

    以上的配置内容请自行修改

    参考原文：

    引用站外地址，不保证站点的可用性和安全性
    安全跳转页面·插件版
    LiuShen

打赏卡片标签外挂

效果：

友链

ZeroLatency

66.66￥ 2025-01-01

匿名

0.00￥

ZeroLatency

88.88￥ 2025-01-01

点击查看详细教程
1
2
3
4
5
6
7
8
9
10
11
<!-- 参数如下： -->
{% reward 名字,金额,时间，渠道,头像,链接,是否友链好友 %}
<!-- 示例如下： -->
{% reward ZeroLatency,66.66,2023-01-01,qq,990320751,https://blog.3ms.run,1 %}
<!-- 你也可以什么都不填，将会全部使用默认值，如下： -->
{% reward %}
<!-- 你也可以省略部分内容，如下： -->
{% reward ZeroLatency,88.88,2023-01-01,zfb %}
<!-- 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
<!-- 昵称和时间不填，以及渠道后面的全部省略 -->
{% reward ,66.66,,qq %}
参数描述默认值
名字这还需要描述？匿名
金额这也不需要描述吧0.00
时间直接填就行，不填则不显示无
渠道打赏渠道。可填：qq、wx、zfb，其他渠道留空即可
头像图片链接，可以直接填QQ号获取QQ头像
链接打赏者的网站链接，设置之后卡片会变成a标签，可点击无
是否友链1表示是，0或者不填表示不是无

教程开始：

  1. 在 [BlogRoot]\themes\butterfly\scripts\tag 文件夹下面新建 reward.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
    /**
     * reward
     * {% reward name,money,time,channel,avatar,url,friend %}
     * {% reward 名字,金额,时间,渠道,头像,链接,是否友链好友 %}
     */

    'use strict'

    function reward(args) {
        args = args.join(' ').split(',')

        // 获取参数
        let name = (args[0] || '匿名').trim(),
            money = Number(args[1] ? args[1] : 0).toFixed(2),
            time = (args[2] || '').trim(),
            channel = args[3],
            avatar = args[4] ? `<img class="no-lightbox" src="${isNaN(args[4]) ? args[4].trim() : `https://q1.qlogo.cn/g?b=qq&nk=${args[4]}&s=5`}">` : '<svg t="1672803307818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13647" width="200" height="200"><path d="M512 0C229.236338 0 0 229.236338 0 512s229.236338 512 512 512 512-229.224912 512-512S794.775088 0 512 0z m-6.443844 190.801776c94.681097 0 171.710173 75.886551 171.710173 169.185192s-77.029076 169.208042-171.710173 169.208042-171.698748-75.909401-171.698749-169.185191S410.886484 190.801776 505.556156 190.801776zM793.141276 771.638944c0 61.536429-100.473702 61.536429-216.817084 61.536429H447.664383c-121.107714 0-216.794234 0-216.794234-61.536429v-12.670609c0-117.680137 97.240354-213.48091 216.794234-213.480909h128.659809c119.553879 0 216.817084 95.777922 216.817084 213.480909z" fill="#e5e5e5" p-id="13648"></path><path d="M576.324192 545.487426H447.664383c-119.553879 0-216.794234 95.755071-216.794234 213.480909v12.670609c0 61.536429 95.68652 61.536429 216.794234 61.536429h128.659809c116.343383 0 216.817084 0 216.817084-61.536429v-12.670609c0-117.702988-97.263205-213.48091-216.817084-213.480909zM505.556156 529.19501c94.681097 0 171.710173-75.875126 171.710173-169.185191S600.237253 190.801776 505.556156 190.801776s-171.698748 75.932252-171.698749 169.208043 77.029076 169.185192 171.698749 169.185191z" fill="#ffffff" p-id="13649"></path></svg>',
            url = args[5],
            friend = Number(args[6]);

        if (channel == 'wx') channel = '<svg t="1672813125726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1210" width="200" height="200"><path d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z" fill="#09BB07" p-id="1211"></path></svg>'
         else if (channel == 'zfb') channel = '<svg t="1672813142459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1349" width="200" height="200"><path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z" fill="#02A9F1" p-id="1350"></path></svg>'
         else if (channel == 'qq') channel='<svg t="1672813064588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1062" width="200" height="200"><path d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z" fill="#FAAD08" p-id="1063"></path><path d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z" fill="#FAAD08" p-id="1064"></path><path d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z" fill="#000000" p-id="1065"></path><path d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017" fill="#000000" p-id="1066"></path><path d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453" fill="#FFFFFF" p-id="1067"></path><path d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498" fill="#FAAD08" p-id="1068"></path><path d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135" fill="#000000" p-id="1069"></path><path d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927" fill="#FFFFFF" p-id="1070"></path><path d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574" fill="#EB1C26" p-id="1071"></path><path d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z" fill="#EB1C26" p-id="1072"></path></svg>'
         else channel='<svg t="1672812669835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2998" width="200" height="200"><path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#FFBD27" p-id="2999"></path><path d="M413.776 279.52l32.256 41.92h112.864l32.256-41.92 3.232-6.448v-3.232c0-6.448-3.232-9.664-9.68-12.896 0 0-45.152-9.664-83.84-9.664-38.72 0-83.856 9.664-83.856 9.664-16.128 6.448-3.232 22.576-3.232 22.576z m154.8 70.96H452.48C362.176 382.72 288 482.704 288 576.24c0 116.08 64.496 170.912 222.528 170.912 158.032 0 222.528-54.832 222.528-170.928 0-93.52-74.176-193.504-164.48-225.76z m22.576 238.64c6.448 0 12.896 6.448 12.896 12.912 0 6.448-6.448 12.896-12.896 12.896h-64.496v45.152c0 6.448-6.448 12.896-12.896 12.896-6.464 0-12.912-6.448-12.912-12.896v-41.92h-64.496c-6.448 0-12.896-6.464-12.896-12.912s6.448-12.896 12.896-12.896h64.496v-35.472h-64.496c-6.448 0-12.896-6.448-12.896-12.912 0-6.448 6.448-12.896 12.896-12.896h67.728v-3.216s-3.232 0-3.232-3.232l-51.6-61.28c-6.448-3.216-6.448-12.896 0-19.344s16.128-3.232 19.36 3.232l45.152 51.6 45.136-51.6c6.464-6.464 12.912-6.464 19.36-3.232 6.448 6.448 6.448 12.896 3.216 19.36l-51.6 61.28c0 3.2-3.216 3.2-6.448 3.2h67.728c6.448 0 12.896 6.464 12.896 12.912s-6.448 12.896-12.896 12.896h-64.496v35.472h64.496z" fill="#FFFFFF" p-id="3000"></path></svg>'
        
        return `<${url?`a href="${url}"`:'div'}  class="reward_card">
          ${friend?'<div class="isFriends">友链</div>':''}
          ${avatar}
          <div class="reward_info">
            <p class="reward_name">${name}</p>
            <div class="reward_bottom">
              <span class="reward_money">${channel}${money}<span style="font-size:13px">￥</span></span>
              <span class="reward_time">${time}</span>
            </div>
          </div>
        </${url?'a':'div'}>`
    }

    hexo.extend.tag.register('reward', reward, { ends: false })

  2. 在 [BlogRoot]\themes\butterfly\source\css\_tags 文件夹下面新建 reward.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
    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
    .reward_card
      width: 280px
      position relative
      display: flex
      text-decoration: none !important
      color: var(--font-color) !important
      background: var(--card-bg)
      align-items: center
      border: 1px solid #e0e3ed
      border-radius: 12px
      padding: 1rem
      overflow hidden
      margin: .5rem
      transition: .3s
      &:hover
        background: #4976f5
        scale: 1.02
        color: white !important
        .isFriends
          transform: translate(100%)
      .reward_info
        display: flex
        margin-left: 10px
        flex-direction: column
        flex: 1
        line-height: 1.5
        font-size: 1.2rem
        p
          margin: 0 !important
        .reward_name
          font-weight: bold
          font-size: 21px
        .reward_bottom
          display: flex
          align-items: baseline
          justify-content: space-between
          .reward_money
            svg
              margin-right: 3px
          span.reward_time
            font-size: 12px
            opacity: .8

      &>img,&>svg
        width: 65px !important
        height: 65px !important
        object-fit: cover
        border-radius: 50% !important
        margin: 0 !important
      .isFriends
        position: absolute
        transition: .3s
        right: 0
        top: 0
        background: #4976f5
        color: white
        padding: 0 10px
        border-radius: 0 0 0 10px

如果你没有使用过阿里图标，没有添加过对应的css，图标会变得非常大。只需要在自定义css文件添加下面代码：

1
2
3
4
5
6
7
8
9
/* 阿里图标 */
svg.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 20px;
}

如何实现下图一样的效果

只需要在页面的markdown内加入如下内容即可：

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
---
title: 测试页
date: 2025-01-01 16:10:18
type:
aside: false
aplayer: 
comments:
description:
highlight_shrink:
---
<!-- 复制下面内容，上面是页面配置信息，防止有人看不懂在什么页面内插入 -->

<style>
.reward_box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.reward_card {
    margin: 0;
    width: calc(100% / 4 - 6px);
    box-shadow: 0 2px 10px -4px #2c2d300c;
}
@media screen and (max-width: 1080px) {
    .reward_box {
        gap: 9px;
    }
    .reward_card {
        width: calc(100% / 3  - 6px);
    }
}

@media screen and (max-width: 850px) {
    .reward_box {
        gap: 8px;
    }
    .reward_card {
        width: calc(100% / 2  - 4px);
    }
}
@media screen and (max-width: 568px) {
    .reward_card {
        width: 100%;
    }
}
</style>


<div class="reward_box">

{% reward %}
{% reward ,666.66 %}
{% reward Leonus,888.88,zfb %}
{% reward Leonus,188.88,wx,https://q1.qlogo.cn/g?b=qq&nk=990320751&s=5 %}
{% reward Leonus,88.88,wx,990320751 %}
{% reward Leonus,66.66,qq,990320751,https://blog.leonus.cn/,1 %}

</div>

原文地址：

引用站外地址，不保证站点的可用性和安全性
打赏卡片标签外挂
Leonus

语雀同款链接卡片外挂

效果如下：

Daliyuer
进一寸有进一寸的欢喜。
点击查完整的教程

  1. 在 [BlogRoot]\themes\butterfly\scripts\tag 文件夹下面新建 yqlink.js 并粘贴如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /**
     * yqlink
     * {% yqlink url,title,favicon,desc %}
     * {% yqlink 链接,标题,图标,介绍 %}
     */

    'use strict'

    let defaultIcon = '<svg t="1670307855063" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19066" width="200" height="200"><path d="M504.064 516.608m-384.256 0a384.256 384.256 0 1 0 768.512 0 384.256 384.256 0 1 0-768.512 0Z" fill="#009CF5" p-id="19068"></path><path d="M746.112 270.464L472.448 485.12l63.104 63.104L750.08 274.56c2.304-2.688-1.28-6.144-3.968-4.096z" fill="#FF4C3A" p-id="19069"></path><path d="M262.016 762.752l273.664-214.528-63.104-63.104-214.656 273.536c-2.176 2.688 1.28 6.144 4.096 4.096z" fill="#FFFFFF" p-id="19070"></path><path d="M505.216 155.136c-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.56 5.888 5.888 5.888s5.888-2.56 5.888-5.888v-53.504c-0.128-3.2-2.688-5.888-5.888-5.888zM442.368 160.512c-3.2 0.512-5.376 3.584-4.736 6.784l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736zM396.288 234.368c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552l-18.304-50.304c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552l18.304 50.304zM348.928 257.408c1.664 2.816 5.248 3.712 7.936 2.176s3.712-5.248 2.176-7.936l-26.752-46.336c-1.664-2.816-5.248-3.712-7.936-2.176-2.816 1.664-3.712 5.248-2.176 7.936l26.752 46.336zM306.304 288.256c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.432 2.048-2.816 5.76-0.768 8.192l34.432 40.96zM269.696 326.144c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-2.048 2.432-1.792 6.144 0.768 8.192l40.96 34.432zM193.792 342.912l46.336 26.752c2.816 1.664 6.4 0.64 7.936-2.176 1.664-2.816 0.64-6.4-2.176-8.064L199.552 332.8c-2.816-1.664-6.4-0.64-7.936 2.176-1.664 2.688-0.64 6.272 2.176 7.936zM168.32 399.488l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM207.872 457.344l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784zM201.984 509.568H148.48c-3.2 0-5.888 2.56-5.888 5.888 0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888zM205.44 562.176l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.376 6.784 4.736l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784s-3.584-5.248-6.784-4.736zM217.856 613.376l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 3.072 4.48 4.608 7.552 3.456l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456zM238.976 661.504l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.816 5.248 3.712 8.064 2.176l46.336-26.752c2.816-1.664 3.712-5.248 2.176-8.064-1.664-2.816-5.248-3.712-8.064-2.176zM268.16 705.408l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.432 5.76 2.816 8.192 0.768l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-1.92-2.56-5.632-2.816-8.192-0.768zM304.512 743.424l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.304-1.92-6.016-1.664-8.192 0.768zM347.008 774.656l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.664 6.4 0.64 8.064-2.176l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.536-6.4-0.64-8.064 2.176zM394.24 798.08l-18.304 50.304c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.152 6.4-0.512 7.552-3.456l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.528 0.384-7.552 3.456zM440.192 872.32c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.64 3.2 1.536 6.272 4.736 6.784zM502.912 878.08c3.2 0 5.888-2.56 5.888-5.888v-53.504c0-3.2-2.56-5.888-5.888-5.888-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.688 5.888 5.888 5.888zM549.632 815.232l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736-3.2 0.512-5.248 3.584-4.736 6.784zM600.832 802.816l18.304 50.304c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552L611.84 798.72c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552zM649.088 781.696l26.752 46.336c1.664 2.816 5.248 3.712 8.064 2.176 2.816-1.664 3.712-5.248 2.176-8.064l-26.88-46.336c-1.664-2.816-5.248-3.712-8.064-2.176-2.816 1.664-3.712 5.248-2.048 8.064zM692.864 752.384l34.432 40.96c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.56 2.048-2.816 5.76-0.768 8.192zM730.88 716.032l40.96 34.432c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-1.92 2.432-1.664 6.144 0.768 8.192zM762.112 673.664l46.336 26.752c2.816 1.664 6.4 0.64 8.064-2.176 1.664-2.816 0.64-6.4-2.176-7.936L768 663.552c-2.816-1.664-6.4-0.64-8.064 2.176-1.536 2.688-0.64 6.272 2.176 7.936zM785.536 626.432l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM800.256 575.872l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784zM800.256 517.76c0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888h-53.504c-3.328 0-5.888 2.56-5.888 5.888zM802.688 471.04l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784-0.512-3.2-3.584-5.376-6.784-4.736l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.248 6.784 4.736zM790.272 419.84l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 2.944 4.48 4.608 7.552 3.456zM769.152 371.584l46.336-26.752c2.816-1.664 3.712-5.248 2.176-7.936-1.664-2.816-5.248-3.712-8.064-2.176l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.688 5.248 3.712 8.064 2.048zM739.84 327.808l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-2.048-2.432-5.76-2.816-8.192-0.768l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.56 5.76 2.816 8.192 0.768zM703.488 289.664l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.432-2.048-6.144-1.792-8.192 0.768l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768zM661.12 258.56l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.664-6.4-0.64-8.064 2.176l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.536 6.4 0.64 8.064-2.176zM613.888 235.136l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.4 0.512-7.552 3.456L602.88 231.168c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.024 6.4-0.512 7.552-3.584zM556.544 225.152c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.512 3.2 1.536 6.144 4.736 6.784zM273.536 290.432c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96l21.12 21.12zM237.824 333.824c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536s-1.28 6.912 1.536 8.832l24.448 17.152zM183.04 370.176l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 7.04 3.072 8.448zM194.688 423.68l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.152 6.912 4.48 7.808l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808zM183.168 478.72l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.456 2.304 6.656 5.76 6.912l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.384-3.456-2.176-6.528-5.76-6.912zM181.504 535.04l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.456 6.144 6.912 5.76l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.328-6.016-6.912-5.76zM191.36 590.72l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.352 5.376 7.808 4.48l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.328-4.352-5.376-7.808-4.48zM207.232 644.224l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.2 5.248 4.608 8.448 3.072l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.408-3.2-5.248-4.48-8.448-3.072zM233.984 693.888l-24.448 17.152c-2.944 2.048-3.584 6.016-1.536 8.832 2.048 2.944 6.016 3.584 8.832 1.536l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536zM310.912 775.552L293.76 800c-2.048 2.944-1.28 6.912 1.536 8.832 2.944 2.048 6.912 1.28 8.832-1.536l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.816-2.048-6.912-1.408-8.832 1.536zM349.184 840.704c3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.536-3.2 0.128-7.04-3.072-8.448-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.408 3.2-0.128 6.912 3.072 8.448zM407.808 862.72c3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c0.896-3.456-1.152-6.912-4.48-7.808-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.328 1.152 6.912 4.48 7.808zM469.376 874.112c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.584 2.304 6.656 5.76 6.912zM522.496 839.168l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.456-6.144-6.912-5.76-3.456 0.256-6.016 3.328-5.76 6.912zM578.176 830.976l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928c-0.896-3.456-4.352-5.376-7.808-4.48-3.328 0.896-5.376 4.48-4.48 7.808zM631.68 813.312l12.672 27.136c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.248 3.072-8.448l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.48 5.248-3.072 8.448zM681.344 786.688l17.152 24.448c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 1.92-3.584 5.888-1.536 8.832zM725.504 751.744l21.12 21.12c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96zM763.008 709.76l24.448 17.152c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536-2.048 2.816-1.408 6.784 1.536 8.832zM792.576 661.888l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 6.912 3.072 8.448zM813.44 609.536l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.024 6.912 4.48 7.808zM824.832 554.368l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.256-3.456-2.304-6.656-5.76-6.912l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.584 2.304 6.656 5.76 6.912zM826.624 498.176l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.456-6.144-6.912-5.76l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.328 6.016 6.912 5.76zM818.432 442.368l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.456-4.352-5.376-7.808-4.48l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.48 5.376 7.808 4.48zM800.768 388.992l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.536-3.2-5.248-4.608-8.448-3.072l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.072 5.248 4.48 8.448 3.072zM774.144 339.328l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536L766.848 328.96c-2.944 2.048-3.584 6.016-1.536 8.832 1.92 2.816 5.888 3.584 8.832 1.536zM697.216 257.664l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.944-2.048-6.912-1.28-8.832 1.536l-17.152 24.448c-2.048 2.944-1.28 6.912 1.536 8.832 2.816 2.048 6.784 1.408 8.832-1.536zM658.944 192.512c-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.536 3.2-0.128 7.04 3.072 8.448 3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.408-3.2 0-7.04-3.072-8.448zM600.192 170.496c-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.456 1.152 6.912 4.48 7.808 3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c1.024-3.328-1.024-6.912-4.48-7.808zM534.912 201.6c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.456 2.304 6.528 5.76 6.912zM476.032 158.464c-3.456 0.256-6.144 3.456-5.76 6.912l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.328-6.016-6.912-5.76zM422.144 173.312c-0.896-3.456-4.352-5.376-7.808-4.48-3.456 0.896-5.376 4.352-4.48 7.808l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928zM376.448 219.776l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.608 5.248-3.072 8.448L364.8 225.28c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.376 3.2-8.576zM316.416 253.824c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 2.048-3.584 6.016-1.536 8.832l17.152 24.448z" fill="#FFFFFF" p-id="19071"></path></svg>'

    function yqlink(args) {
        args = args.join(' ').split(',');
        // 获取参数
        let url = (args[0] || '').trim(),
            title = (args[1] || '点击直达链接').trim(),
            favicon = (args[2] ? `<img src="${args[2]}" class="no-lightbox">` : defaultIcon).trim(),
            desc = (args[3] || '').trim()

        return `<a href="${url}" ${url.includes('http') ? 'target="_blank"' : ''} title="${title}" referrerPolicy="no-referrer" class="yqlink_card"><div class="yqlink_icon">${favicon}</div><div class="yqlink_content"><div class="yqlink_title">${title}</div>${desc ? `<div class="yqlink_desc">${desc}</div>` : ''}</div></a>`
    }

    hexo.extend.tag.register('yqlink', yqlink, { ends: false })

  2. 在 [BlogRoot]\themes\butterfly\source\css\_tags 文件夹下面新建 yqlink.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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    .link_card
      display: flex
      margin: 10px 0
      color: var(--font-color) !important
      text-decoration: none !important
      background: var(--reward-pop)
      border-radius: 10px
      padding: 12px
      &:hover
        background: #4976f5
        color: white !important
      .link_icon,.link_content
        height: 4rem
      .link_icon
        img,svg
          height: 4rem
          width: 4rem
      .link_content
        margin-left: 1rem
        width: calc(100% - 6rem)
        overflow: hidden
        line-height: 1.5
        display: flex
        flex-direction: column
        justify-content: center
        .link_title
          font-weight: bold
          font-size: 1.2rem
        .link_title,.link_desc
          word-break: break-all
          overflow:hidden
          text-overflow: ellipsis
        &:not(:has(.link_desc)) .link_title
          display:-webkit-box
          -webkit-box-orient:vertical
          -webkit-line-clamp:2
        .link_desc
          opacity: .6
        .link_desc,&:has(.link_desc) .link_title
          white-space: nowrap

  3. 使用方法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- 使用html是为了高亮代码，不必在意 -->
    <!-- 参数如下： -->
    {% yqlink 链接,标题,图标,介绍 %}
    <!-- 示例如下： -->
    {% yqlink https://blog.3ms.run,ZeroLatency,https://blog.3ms.run/favicon.ico,进一寸有进一寸的欢喜。 %}
    <!-- 你也可以什么都不填，将会全部使用默认值，如下： -->
    {% yqlink %}
    <!-- 你也可以省略部分内容，如下： -->
    {% yqlink https://blog.3ms.run %}
    <!-- 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
    {% yqlink https://blog.3ms.run,,,进一寸有进一寸的欢喜。 %}

    参数描述默认值
    链接如果连接中包含http则新标签打开，否则本标签页打开无
    标题网站的标题点击直达链接
    图标网站favicon链接
    介绍网站的description无

原文地址：

引用站外地址，不保证站点的可用性和安全性
语雀同款链接卡片—butterfly主题标签外挂
Leonus

给留言板添加一个弹幕

适用twikoo，其他评论请自行移植。

效果：

留言板 | ZeroLatency
进一寸有进一寸的欢喜。
点击查完整的教程

下载js文件：easy-Danmaku

把上面js文件下载到本地。放到博客的[blogRoot]/source/js文件夹下面，没有的话创建一个或者自己决定放在哪个文件夹里。
然后在butterfly配置文件内的inject下的bottom里引入该文件，如：

1
2
3
bottom:
  - <script src="/js/easy-Danmaku.js"></script>
  - <script src="/js/XXXX.js"></script> # 自定义js位置，要放在弹幕插件下面

然后在自定义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
function danmu() {
  if (location.pathname != '/collect/' || document.body.clientWidth < 768) return //判断是否是留言板页面
  console.log(1);
  const Danmaku = new EasyDanmaku({
    page: '/collect/', // 即留言板地址
    el: '#danmu', //弹幕挂载节点
    line: 10, //弹幕行数
    speed: 20, //弹幕播放速度
    hover: true,
    loop: true, //开启循环播放
  })
  let data = saveToLocal.get('danmu')
  if (data) Danmaku.batchSend(data, true);
  else {
    let ls = []
    fetch('https://twikoo.xxx.cn/', { // 此处替换成自己的twikoo地址
      method: "POST",
      body: JSON.stringify({
        "event": "GET_RECENT_COMMENTS",
        "includeReply": false,
        "pageSize": 100
      }),
      headers: { 'Content-Type': 'application/json' }
    }).then(res => res.json()).then(({ data }) => {
      data.forEach(i => {
        if (i.avatar == undefined) i.avatar = 'https://cravatar.cn/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp'
        ls.push({ avatar: i.avatar, content: i.nick + '：' + formatDanmaku(i.comment), url: i.url + '#' + i.id })
      });
      Danmaku.batchSend(ls, true);
      saveToLocal.set('danmu', ls, 0.02)
    });
    // 格式化评论
    function formatDanmaku(str) {
      str = str.replace(/<\/*br>|[\s\uFEFF\xA0]+/g, '');
      str = str.replace(/<img.*?>/g, '[图片]');
      str = str.replace(/<a.*?>.*?<\/a>/g, '[链接]');
      str = str.replace(/<pre.*?>.*?<\/pre>/g, '[代码块]');
      str = str.replace(/<.*?>/g, '');
      return str
    }
  }
  document.getElementById('danmuBtn').innerHTML = `<button class="hideBtn" onclick="document.getElementById('danmu').classList.remove('hidedanmu')">显示弹幕</button> <button class="hideBtn" onclick="document.getElementById('danmu').classList.add('hidedanmu')">隐藏弹幕</button>`
}
danmu()
document.addEventListener("pjax:complete", danmu)

使用hexo n page xxx创建一个页面，我是放在了留言板里面

打开 xxx/index.md 文件，粘贴如下代码并替换数据（已注释位置）

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
<style>
#article-container a:not(.headerlink, .fancybox, .default-style a) {
    font-weight: 700;
    color: var(--font-color);
    padding: 0 3px;
    border-bottom: 2px var(--leonus-main) solid;
}

#article-container a:not(.headerlink, .fancybox, .default-style a):hover {
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    background-color: var(--leonus-main);
}

#danmu {
    width: 100%;
    height: calc(100% - 60px);
    position: fixed;
    left: 0;
    top: 60px;
    z-index: 1;
    pointer-events: none;
}

.hidedanmu {
    opacity: 0;
}

.hidedanmu * {
    pointer-events: none !important;
}

div#danmuBtn {
    display: flex;
    justify-content: center;
}

div#danmuBtn button {
    background: var(--leonus-main);
    color: white;
    padding: 8px 20px;
    margin: 0 20px;
    border-radius: 100px;
}

.default-style {
    pointer-events: all;
    cursor: pointer;
    font-size: 16px;
    border-radius: 100px;
    overflow: hidden;
}

.default-style a {
    background-color: rgba(0, 0, 0, 0.5);
    transition: .3s;
    color: #eee !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px 6px 6px;
    text-decoration: none !important;
}

.default-style a:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.default-style img {
    pointer-events: none;
    height: 30px;
    width: 30px;
    margin: 0 5px 0 0 !important;
    border-radius: 50% !important;
}

.default-style p {
    line-height: 1;
    pointer-events: none;
    margin: 0 !important;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

{% note success  flat %}
如果有什么 **想说的**、**想问的** 或者 **发现了本站的BUG**，欢迎留言告知😊。
{% endnote %}

{% note pink 'fa-solid fa-link'  flat %}
若想 **添加友链** 请前往 [友情链接](/link/) 页面进行友链申请😄
{% endnote %}

<div id="danmuBtn"></div>
<div id="danmu"></div>

原文地址：

引用站外地址，不保证站点的可用性和安全性
给你的留言板添加一个弹幕吧（重制）
Leonus

网址卡片外置标签

效果：

引用站外地址，不保证站点的可用性和安全性
3MS s Blog'
Daliyuer

点击查完整的教程
引用站外地址，不保证站点的可用性和安全性
Hexo的Butterfly魔改教程：网址卡片外置标签
张洪Heo