hugo博客增加赞赏功能，基于LoveIt/LeaveIt/FixIt主题
hugo博客增加赞赏功能，基于LoveIt/LeaveIt/FixIt主题
警告
本文最后更新于 2022-10-04，文中内容可能已过时。
前言
博客赞赏，虽说打赏的人不一定会有很多，但这个功能不能少，赞赏是一种美德，有余力而为之。多数主题不自带赞赏功能，这篇文章的这套打赏支持方案，基于LoveIt，LeaveIt，FixIt这系列主题，他们本质都是由同一个主题演变迭代。其余博客主题可以自行尝试，区别不大，只要把主题中修改的模板直接改到hugo的模板里即可。
特别提示
赞赏功能需要用到.scss样式，hugo版本需要使用扩展版hugo_extended才能支持。大家编译时要选用对应系统的扩展版本。
配置赞赏开关
全局配置
在 config.toml 配置文件中修改中文预演代码为小写的 zh-cn，如下：
1 | defaultContentLanguage = "zh-cn" |
|---|
在 config.toml 添加以下变量。这里配置的全局生效，即所有文章都会生效。
1 2 3 4 | [params.reward] # 文章打赏 enable = true # true为开启 flase为关闭 wechat = "/images/wechat.png" # 微信二维码文件路径 alipay = "/images/alipay.png" # 支付宝二维码文件路径 |
|---|
单篇文章配置
也可对单篇文章单独配置，在文章的开头参数添加变量配置。
全局配置和单篇文章配置都设置的情况下，优先以文章的配置为生效依据。
1 | reward: false # true为开启 flase为关闭 |
|---|
修改主题中的文件
1.修改国际化文件
在 \themes\FixIt\i18n\zh-CN.toml 配置文件中添加如下配置：
1 2 3 4 5 6 7 8 | [reward] other = "赞赏支持" #other中的文字可以自由更改 [rewardAlipay] other = "支付宝打赏" [rewardWechat] other = "微信打赏" |
|---|
2.添加页面模板文件
在 \themes\FixIt\layouts\partials\single\ 中新建 reward.html html内容如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | {{ 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>标签，在其前添加下面代码：
1 2 | {{- /* Reward */ -}} {{- partial "single/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 42 43 44 45 46 47 48 49 50 51 52 53 | {{- /* 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这行，代码里已有说明。
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 | /* 打赏 */ 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 } |
|---|
小提示
这里主题文件的修改，你可以完全拷贝一份复制到hugo站点框架里对应目录下，如果无此目录则直接新建，然后再做修改，这样不会影响主题里文件，避免你主题升级之类直接覆盖更新。hugo会优先从站点框架里调用模板文件，匹配不到再在主题模板文件里调用。
测试查看效果
翻到文章文末，查看效果
参考资料
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