给 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.1);
  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中开启赞赏功能

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

{{ partial "reward.html" . }}

配置多语言

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

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