概要

支持读者对作者进行赞赏，在文章章末添加对赞赏按钮，读者点击按钮，弹出支付宝/微信赞赏码。

赞赏页面

创建 reward.html 文件：

html
layouts/partials/reward.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

{{- $button := .Params.rewardButton | default "" }}
{{- $subtitle := .Params.rewardSubtitle | default "如果本文对你有所帮助，可以点击上方按钮请作者喝杯咖啡！" }}

<div class="pe-reward-wrap">
    <div class="pe-reward">
        <div class="pe-reward-btn">
            <a href="javascript:void(0);"
               onclick="document.querySelector('.pe-reward-overlay').classList.remove('hidden')">
                {{ if eq $button "" }}
               <svg t="1715776042195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17691" width="20" height="20"><path d="M835.52 337.824a159.04 159.04 0 0 1 124.544 59.52 155.904 155.904 0 0 1 30.4 134.08l-80.896 341.632a157.952 157.952 0 0 1-56.224 87.68 160.544 160.544 0 0 1-98.688 33.952H166.72c-75.712 0-137.44-60.96-137.44-136.256v-363.84c0-75.296 61.76-136.288 137.44-136.288h80.704c50.176 0 71.232-12.48 85.792-36.544 10.368-17.12 17.472-41.376 23.04-76 1.728-10.656 2.88-19.392 5.408-38.72 11.712-90.944 21.888-124.736 62.528-155.168 25.504-19.072 56.768-25.984 90.72-20.992 64.672 9.504 115.936 43.52 145.824 97.6 23.36 42.272 32.64 95.584 27.904 154.24-1.056 12.832-2.752 25.888-5.12 38.912-0.64 3.68-1.856 9.024-3.712 16.192h155.68z m-261.472 80l14.72-51.104c9.472-32.704 15.04-53.376 16.064-59.2 1.92-10.56 3.264-21.024 4.096-31.296 3.584-43.84-3.04-81.6-18.208-109.056-17.472-31.68-46.88-51.2-87.392-57.12-13.696-2.016-23.456 0.128-31.168 5.888-15.808 11.84-22.4 33.792-31.136 101.312-2.56 20.16-3.84 29.44-5.76 41.248-7.04 43.872-16.704 76.8-33.536 104.64-28.736 47.52-75.424 75.2-154.24 75.2H166.72c-31.744 0-57.44 25.376-57.44 56.224v363.872c0 30.88 25.696 56.256 57.44 56.256h587.904c17.824 0 35.424-6.08 49.344-16.96 13.856-10.848 23.68-26.24 27.712-43.104l80.896-341.6a75.904 75.904 0 0 0-14.944-65.6 79.04 79.04 0 0 0-62.144-29.6H574.08z m-212.8 205.984l97.28 72.64 242.24-209.28s16.224-13.888 30.4-3.008c4.256 3.264 9.12 12.512-1.856 27.008l-252.896 277.856s-19.392 24.864-42.4-0.288l-109.12-138.208s-12.96-18.688 3.264-29.92c5.44-3.744 17.888-9.6 33.12 3.2z" fill="currentColor" p-id="17692"></path></svg>
                {{ else }}
                {{ $button }}
                {{ end }} </a>
        </div>
        <div class="pe-reward-overlay hidden">
            <div class="pe-reward-qr-wrap">
                <div class="pe-reward-img">
                    <a class="fancybox" rel="group">
                        <img src="{{ .Site.Params.WechatPay | absURL }}" alt="wechat_pay"></a>
                    <p>微信</p>
                </div>
                <div class="pe-reward-img">
                    <a class="fancybox" rel="group">
                        <img src="{{ .Site.Params.Alipay | absURL }}" alt="alipay"></a>
                    <p>支付宝</p>
                </div>
            </div>
        </div>
        {{- if not .Params.hideRewardSubtitle  }}
        <p>
            {{- $subtitle -}}
        </p>
        {{ end }}
    </div>
</div>

<script>
    document.querySelector('.pe-reward-overlay').addEventListener('click', evt =>  {
        evt.target.classList.add('hidden');
    });
</script>

样式

以下样式的遮罩层显示二维码对手机端适配存在问题

添加赞赏按钮及其遮罩层样式。创建 reward.css 文件：

css
assets/css/extended/reward.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

.pe-reward-wrap {
    margin-top: 2rem;
}

.pe-reward {
    padding: 0 ;
    margin: 0;
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
}

.pe-reward-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
}

.pe-reward-btn a {
    width: 6rem;
    height: 6rem;
    padding: 1rem;
    font-size: 1.6rem;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 37, 37, 0.6);
    color: var(--pe-btn-font-color);
    border-radius: 50%;
    -webkit-animation: pe-reward-btn-frames 2s alternate infinite;
    animation: pe-reward-btn-frames 2s alternate infinite;
    margin-top: 4rem;
    margin-bottom: 4rem;
    font-weight: 500;
    line-height: 4rem;
    border: none;
    outline: none;
    cursor:pointer;
}


@keyframes pe-reward-btn-frames {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 .1rem rgba(255, 37, 37, 0);
    }

    10% {
        box-shadow: 0 0 0 .1rem rgba(0, 0, 0, 0), 0 0 0 .2rem rgba(255, 37, 37, 0.1);
    }

    20% {
        box-shadow: 0 0 0 .2rem rgba(0, 0, 0, 0), 0 0 0 .4rem rgba(255, 37, 37, 0.2);
    }

    40% {
        box-shadow:
                0 0 0 0 rgba(0, 0, 0, 0),
                0 0 0 .1rem rgba(255, 37, 37, 0.1),
                0 0 0 .4rem rgba(0, 0, 0, 0),
                0 0 0 .6rem rgba(255, 37, 37, 0.3);
    }

    50% {
        box-shadow:
                0 0 0 .1rem rgba(0, 0, 0, 0),
                0 0 0 .3rem rgba(255, 37, 37, 0.2),
                0 0 0 .5rem rgba(0, 0, 0, 0),
                0 0 0 .8rem rgba(255, 37, 37, 0.4);
    }

    60% {
        box-shadow:
                0 0 0 .2rem rgba(0, 0, 0, 0),
                0 0 0 .5rem rgba(255, 37, 37, 0.3),
                0 0 0 .6rem rgba(0, 0, 0, 0),
                0 0 0 1rem rgba(255, 37, 37, 0.5);
    }

    70% {
        box-shadow:
                0 0 0 .3rem rgba(0, 0, 0, 0),
                0 0 0 .6rem rgba(255, 37, 37, 0.4),
                0 0 0 .7rem rgba(0, 0, 0, 0),
                0 0 0 1.1rem rgba(255, 37, 37, 0.4);
    }

    80% {
        box-shadow:
                0 0 0 .4rem rgba(0, 0, 0, 0),
                0 0 0 .7rem rgba(255, 37, 37, 0.3),
                0 0 0 .8rem rgba(0, 0, 0, 0),
                0 0 0 1.2rem rgba(255, 37, 37, 0.3);
    }

    90% {
        box-shadow:
                0 0 0 .5rem rgba(0, 0, 0, 0),
                0 0 0 .6rem rgba(255, 37, 37, 0.2),
                0 0 0 .9rem rgba(0, 0, 0, 0),
                0 0 0 1.3rem rgba(255, 37, 37, 0.2);
    }

    100% {
        box-shadow:
                0 0 0 .7rem rgba(0, 0, 0, 0),
                0 0 0 .7rem rgba(255, 37, 37, 0.1),
                0 0 0 1rem rgba(0, 0, 0, 0),
                0 0 0 1.4rem rgba(255, 37, 37, 0);
    }
}

.pe-reward-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 1.6rem;
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
    z-index: 9999;
}

.hidden {
    display: none;
}

.pe-reward-qr-wrap {
    background-color: var(--theme);
    max-width: 80rem;
    height: 32rem;
    border-radius: .5rem;
    margin: 9.6rem auto;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
}

.pe-reward-img {
    margin: 4.8rem;
}

.pe-reward-qr-wrap img {
    width: 100%;
    height: 100%;
    display: inline-block;
}

@media screen and (max-width: 568px) {
    .pe-reward-qr-wrap {
        max-width: 40rem;
        height: 20rem;
        margin: 20rem auto;
    }

    .pe-reward-img {
        margin: 3rem;
    }
}

将赞赏按钮添加到文章章末

在 footer 节点上添加如下内容：

html
layouts/_default/single.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<article class="post-single">
    {{- if .Content }}
    <div class="post-content">
        ...
    </div>
    {{- end }}

    {{ if .Param "enableReward" }}
    {{ partial "reward.html" . }}
    {{ end }}

    <footer class="post-footer">
        ...
    </footer>
</article>

启用赞赏

在 hugo 配置文件中添加以下配置：

yaml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

param:
  # 启用赞赏功能
  enableReward: true
  # 赞赏按钮显示字符 (可在文章 `frontmatter` 中设置)，默认为赞赏图标
  # rewardButton: 赞赏
  # 赞赏描述 (可在文章 `frontmatter` 中设置)
  rewardDescription: 如果本文对你有所帮助，可以点击上方按钮请作者喝杯咖啡！
  # 设置微信收款码图片 (路径相对于博客工程的 static 目录。如下文件在 `static/images/wechat_pay.jpg`)
  WechatPay: images/wechat_pay.jpg
  # 设置支付宝收款码图片 (路径相对于博客工程的 static 目录。如下文件在 `static/images/alipay.jpg`)
  Alipay: images/alipay.jpg

源码

本站主题已开源，最新源码请参考：PaperMod-PE