增加文章赞赏功能
一、前因
赞赏还需要前因！！！，世间熙攘皆为利嘛。咳咳，嗯，我也只是看别地方有，搬过来罢了。
二、添加页面
对应目录新建 layouts\partials\reward.html 文件。
甩入以下代码：
<div class="post-reward" data-html2canvas-ignore>
<input type="checkbox" name="reward" id="reward" hidden />
<label class="reward-button" for="reward">赞赏支持</label>
<div class="qr-code">
{{ if .Site.Params.Reward.wechat }}
<label class="qr-code-image" for="reward">
<img class="image" src="{{ .Site.Params.Reward.wechat }}">
<span>微信打赏</span>
</label>
{{ end }}
{{ if .Site.Params.Reward.alipay }}
<label class="qr-code-image" for="reward">
<img class="image" src="{{ .Site.Params.Reward.alipay }}">
<span>支付宝打赏</span>
</label>
{{ end }}
{{ if .Site.Params.Reward.paypal }}
<label class="qr-code-image" for="reward">
<img class="image" src="{{ .Site.Params.Reward.paypal }}">
<span>PayPal打赏</span>
</label>
{{ end }}
</div>
</div>
看着来，要加qq钱包啥的随便加。
文章对应位置引入页面，一般在single.html中。
{{ if .Site.Params.Reward.enable }}
{{ partial "reward.html" . }}
{{ end }}
三、添加样式
custom.css中添加样式：
/* 打赏 */
.post-reward {
margin-top: 20px;
padding-top: 10px;
text-align: center;
border-top: 1px dashed #e6e6e6
}
.post-reward .reward-button {
margin: 15px 0;
padding: 3px 7px;
display: inline-block;
color: #c05b4d;
border: 1px solid #c05b4d;
border-radius: 5px;
cursor: pointer
}
.post-reward .reward-button:hover {
color: #fefefe;
background-color: #c05b4d;
transition: .5s
}
.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;
background-color: transparent;
}
四、增加配置
config.toml中加入：
[params.reward]
enable = true # 是否启用
wechat = "xxxx.png" # 微信
alipay = "" # 支付宝
paypal = "" # paypal
为空不会显示。
五、效果
六、总结
聊胜于无。
收工！
