Loveit主题开启文章赞赏

小tips

该文章仅仅针对Loveit主题有效，其他自己尝试。

添加文章打赏功能

注意

PS: 使用hugo版本必须为拓展版hugo_extended，如下图

1.配置添加

在 config.toml 添加下面的变量

代码语言：text复制

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

注意一下

这里是对全局文章生效，也可以在每篇文章的文件头里添加如下变量来控制是否启用该功能：

代码语言：text复制

title: "xxxx"
date: 2021-10-21T16:36:41 08:00 
draft: false 
tags: ["xxx","xxx"]
categories: ["xxx","xxx"]
reward: false                               # flase关闭该文章打赏功能

2.修改主题中的国际化文件

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

代码语言：text复制

defaultContentLanguage = "zh-cn"

在 themesLoveIti18nzh-CN.toml 中添加如下配置：

代码语言：text复制

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

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

[rewardWechat]
other = "微信打赏"

3.添加模板文件

在 themeslayoutspartialssingle 中新建 reward.html 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 }}

4.修改模板文件

修改 /themes/LoveIt/layouts/posts/single.html 找到 {{- /* Content */ -}}

修改前内容

代码语言：text复制

{{- /* Content */ -}}
<div class="content" id="content">
    {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
</div>

修改为如下内容

修改后内容

代码语言：text复制

{{- /* Content */ -}}
<div class="content" id="content">
    {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}

	{{- /* Reward */ -}}  #新增 
	{{- partial "single/reward.html" . -}}  #新增
</div>

5.新增css代码

在 /themes/assets/css/ 中的 _custom.scss 添加如下内容

代码语言：css复制

/* 打赏 */
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
}

6.测试查看

代码语言：shell复制

hugo server -D

html 腾讯云开发者社区 css 编程算法

0 人点赞