2023-01-05更新：总觉得哪里怪怪的，原来是忘了把时间写上了。已更新，已经用上的直接覆盖即可(js,styl,md内样式都需要覆盖)。

一、前言

之所以写这么个东西是因为之前的打赏展示实在过于潦草，一点仪式感都没有。
不能这样对待这些贵宾！要做出改变！！！
请看前后对比：(图1为旧，图二为新)


二、教程

完整示例

1
{% reward Leonus,66.66,2023-01-01,qq,990320751,https://blog.leonus.cn/,1 %}
友链

Leonus

66.66￥ 2023-01-01

参数

注意：内容不能有英文逗号，不然会出bug

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

添加reward.js

在 \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 })

添加reward.styl

在 \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

关于ICON问题

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

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

3. 页面内使用

下面说一下如何在页面中实现如下样式：

只需要在页面的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: 2023-01-04 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>

三、致谢

再次感谢各位的支持（不仅限于金钱），让我们一起进步！奥利给！