给 Hugo 博客添加赞赏支持功能，支持微信和支付宝

今天有人在评论区问这个赞赏支持功能怎么实现的，我本来想在评论区直接回答的，但是我发现要回复的内容还挺长的，于是就新开了一篇文章分享下。

实现的效果可以在文章末尾看到，点击"赞赏支持"按钮即可显示支付宝和微信的个人收款码。再次点击折叠隐藏。

编写reward.html

首先在 layouts/partials 目录下任意位置创建一个 reward.html 文件，内容如下：

{{ if and .Site.Params.reward.enabled (ne .Params.reward false) }}
<div class="post-reward">
    <input type="checkbox" name="reward" id="reward" hidden/>
    <label class="reward-button" for="reward">{{ T "reward" }}</label>
    <div class="qr-code">
        {{/*  <div class="article-content">
            <span>{{ T "rewardMark" }}</span>
        </div>    */}}
        {{ $qrCode := .Site.Params.reward }}
        {{ with $qrCode.wechat -}}
        <label class="qr-code-image" for="reward">
            <img class="image" src="{{ $qrCode.wechat }}">
            <div class="article-content">
                <span>{{ T "rewardWechat" }}</span>
            </div>
        </label>
        {{- end }}
        {{ with $qrCode.alipay -}}
        <label class="qr-code-image" for="reward">
            <img class="image" src="{{ $qrCode.alipay }}">
            <div class="article-content">
             <span>{{ T "rewardAlipay" }}</span>
            </div>
        </label>
        {{- end }}
    </div>
</div>
{{- end }}

编写reward CSS

在 assets/scss/custom.scss 追加以下内容，没有的话新建一个

.post-reward {
    margin-top: 8px;
    padding-top: 0;
    text-align: center;
}

.post-reward .reward-button {
    margin: 10px 0 0 0;
    padding: 6px 18px;
    display: inline-block;
    color: #fff;
    background: linear-gradient(90deg, #c05b4d 0%, #e07a5f 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 2px 8px 0 rgba(192,91,77,0.10);
    transition: all 0.2s;
}

.post-reward .reward-button:hover {
    color: #fff;
    background: linear-gradient(90deg, #e07a5f 0%, #c05b4d 100%);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px 0 rgba(192,91,77,0.16);
}

.post-reward #reward:checked~.qr-code {
    display: block;
}

.post-reward #reward:checked~.reward-button {
    display: none;
}

.post-reward .qr-code {
    display: none;
}

.post-reward .qr-code .qr-code-image {
    display: inline-block;
    min-width: 200px;
    width: 40%;
    margin-top: 15px;
}

.post-reward .qr-code .qr-code-image span {
    display: inline-block;
    width: 100%;
    margin: 8px 0;
}

.post-reward .qr-code .image {
    width: 200px;
    height: 200px;
}

配置config.yaml

如果在 config.yaml 里面的 reward 参数设置为 true，并且在文章 front matter 里面没有设置 reward 为 false，那么就显示赞赏支持按钮。

config.yaml 追加以下内容，二维码图片放在static/images下面

params:
  reward:
    enabled: true
    wechat: /images/wechat.png
    alipay: /images/alipay.png

具体文章页面不需要配置默认开启，但可以手动关闭

reward: false

我是把赞赏按钮放在文章末尾的footer部分，所以需要在 layouts/partials/article/components/footer.html中追加以下内容：

{{ partial "reward.html" . }}

配置多语言

最后一步可以选择支持多语言，在i18n文件下面的所有语言配置中追加翻译配置，例如zh-cn.yaml增加：

reward:
    other: 赞赏支持
rewardWechat:
    other: 微信打赏
rewardAlipay:
    other: 支付宝打赏

编写reward.html

编写reward CSS

配置config.yaml

在footer中开启赞赏功能

配置多语言