hugo博客增加赞赏功能，基于LoveIt/LeaveIt/FixIt主题

博客赞赏，虽说打赏的人不一定会有很多，但这个功能不能少，赞赏是一种美德，有余力而为之。多数主题不自带赞赏功能，这篇文章的这套打赏支持方案，基于 LoveIt，LeaveIt，FixIt 这系列主题，他们本质都是由同一个主题演变迭代。其余博客主题可以自行尝试，区别不大，只要把主题中修改的模板直接改到 hugo 的模板里即可。

配置赞赏开关

在 config.toml 配置文件中修改中文预演代码为小写的 zh-cn，如下：

defaultContentLanguage = "zh-cn"

在 config.toml 添加以下变量。这里配置的全局生效，即所有文章都会生效。

[params.reward]                           # 文章打赏
  enable = true                           # true为开启 flase为关闭
  wechat = "/images/wechat.png"           # 微信二维码文件路径
  alipay = "/images/alipay.png"           # 支付宝二维码文件路径

单篇文章配置

也可对单篇文章单独配置，在文章的开头参数添加变量配置。

全局配置和单篇文章配置都设置的情况下，优先以文章的配置为生效依据。

reward: false  # true为开启 flase为关闭

修改主题中的文件

1. 修改国际化文件

在 \themes\FixIt\i18n\zh-CN.toml 配置文件中添加如下配置：

[reward]
other = "赞赏支持"                          #other中的文字可以自由更改

[rewardAlipay]
other = "支付宝打赏"

[rewardWechat]
other = "微信打赏"

2. 添加页面模板文件

在 \themes\FixIt\layouts\partials\single\ 中新建 reward.html html 内容如下：

{{ if or .Params.reward (and .Site.Params.reward.enable (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">
        {{ $qrCode := .Site.Params.reward }}
        {{- $cdnPrefix := .Site.Params.cdnPrefix -}}
        {{ with $qrCode.wechat -}}
        <label class="qr-code-image" for="reward">
            <img class="image" src="{{ $cdnPrefix }}{{ . }}">
            <span>{{ T "rewardWechat" }}</span>
        </label>
        {{- end }}
        {{ with $qrCode.alipay -}}
        <label class="qr-code-image" for="reward">
            <img class="image" src="{{ $cdnPrefix }}{{ . }}">
            <span>{{ T "rewardAlipay" }}</span>
        </label>
        {{- end }}
    </div>
</div>
{{- end }}

3. 修改文章模板文件

修改 /themes/FixIt/layouts/posts/single.html 找到 {{- /* Content */ -}}，由于不同版本这里模块内容比较多，避免混淆，这里小技巧，找到 {{- /* Content */ -}} 模块里的 </div> 标签，在其前添加下面代码：

  {{- /* Reward */ -}}                 
  {{- partial "single/reward.html" . -}} 

修改后如下【（# 添加打赏模块）字眼需删除】：

  {{- /* Content */ -}}

  {{- $content := dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome"

  $params.fontawesome | partial "function/content.html" | safeHTML -}}

  {{- if $params.password -}}

  {{- $saltLen := strings.RuneCount (trim $params.password "") -}}

  {{- $saltLen = cond (eq (mod $saltLen 2) 0) (add $saltLen 1) $saltLen -}}

  {{- $base64EncodeContent := $content | base64Encode -}}

  {{- $content = printf "%v%v%v"

  (substr $base64EncodeContent 0 $saltLen)

  (substr (sha256 $params.password) $saltLen)

  (substr $base64EncodeContent $saltLen)

  -}}

  {{- end -}}

  <div class="content" id="content" {{ with $params.password }}data-password="{{ md5 $params.password }}" {{ end }} {{

    with $params.password }}data-content="{{ $content }}" {{ end }}>

    {{- if not $params.password -}}

    {{- /* Expiration Reminder */ -}}

    {{- partial "single/expiration-reminder.html" . -}}

    {{- $content -}}

    {{- else -}}

    {{- partial "single/fixit-decryptor.html" . -}}

    {{- end -}}

    {{- /* promote */ -}}  

    {{- partial "single/promote.html" . -}}

    {{- /* Reward */ -}}                   #添加打赏模块

    {{- partial "single/reward.html" . -}} #添加打赏模块

  </div>

4. 增加 css 样式代码

在 themes\FixIt\assets\css\_custom.scss 中，添加以下样式代码： 以下代码实现效果是赞赏码自动折叠，点击【赞赏支持】按钮，展开二维码，如果你想让赞赏码直接展示而不是折叠，注释掉 display: none 这行，代码里已有说明。

/* 打赏 */

article .post-reward {

    margin-top: 20px;

    padding-top: 10px;

    text-align: center;

    border-top: 1px dashed #e6e6e6

}

  

article .post-reward .reward-button {

    margin: 15px 0;

    padding: 3px 7px;

    display: inline-block;

    color: #c05b4d;

    border: 1px solid #c05b4d;

    border-radius: 5px;

    cursor: pointer

}

  

article .post-reward .reward-button:hover {

    color: #fefefe;

    background-color: #c05b4d;

    transition: .5s

}

  

article .post-reward #reward:checked~.qr-code {

    display: block

}

  

article .post-reward #reward:checked~.reward-button {

    display: none  //如果要让赞赏码直接展示而不是折叠，这行直接注释掉

}

  

article .post-reward .qr-code {

    display: none //如果要让赞赏码直接展示而不是折叠，这行直接注释掉

}

  

article .post-reward .qr-code .qr-code-image {

    display: inline-block;

    min-width: 200px;

    width: 40%;

    margin-top: 15px

}

  

article .post-reward .qr-code .qr-code-image span {

    display: inline-block;

    width: 100%;

    margin: 8px 0

}

  

article .post-reward .qr-code .image {

    width: 200px;

    height: 200px

}

测试查看效果

翻到文章文末，查看效果，我这里还添加了关注公众号的二维码，添加过程和赞赏模式一样的。

https://cywhat.cn/Loveit%E4%B8%BB%E9%A2%98%E5%BC%80%E5%90%AF%E6%96%87%E7%AB%A0%E8%B5%9E%E8%B5%8F/#%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E6%89%93%E8%B5%8F%E5%8A%9F%E8%83%BD http://imfang.net/web/119.html

关注一下有惊喜

公众号

赞赏支持

微信打赏 支付宝打赏