配置打赏功能
配置打赏功能
2025年1月15日已解决。
次功能由《Hydoc的小站》前端大佬贡献，感谢大佬。💖💖
环境
自己开源的 《vuepress-theme-vdoing-one-public》网站模板。
此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️
借鉴
原文章链接：
https://wiki.eryajf.net/pages/2e6f3a/
作者的效果：
配置
docs\.vuepress\config\themeConfig.ts文件：
完整代码：
详细信息
ts
import { VdoingThemeConfig } from "vuepress-theme-vdoing/types";
import nav from "../common/nav";
import footer from "../common/footer";
import htmlModules from './htmlModules' // 自定义插入的html块
import {
readFileList,
readTotalFileWords,
readEachFileWords,
} from "../webSiteInfo/readFile";
import { penName, link, avatar, name, slogan } from "../common/info";
import { hitokoto } from "./hitokoto";
// 主题配置
export default <VdoingThemeConfig>{
nav, // 导航栏
sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
logo: "/img/xyy-logo.ico", // 导航栏logo
// repo: "onlyonexl/vuepress-theme-vdoing-one", // 导航栏右侧生成Github链接
searchMaxSuggestions: 10, // 搜索结果显示最大数
lastUpdated: "更新时间", // 开启更新时间，并配置前缀文字 string | boolean (取值为git提交时间)
docsDir: "docs", // 指定根目录
editLinks: true, // 启用编辑
editLinkText: "编辑此页",
//*** 以下配置是Vdoing主题改动和新增的配置 ***//
// category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。
// tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。
// archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。
categoryText: "随笔", // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
// pageStyle: 'card', // 页面风格，card 时背景显示灰色衬托出卡片样式，line 时背景显示纯色，并且部分模块带线条边框（未设置 bodyBgImg 时才生效），默认 card
// defaultMode: 'auto', // 默认主题外观模式，用户未在页面手动修改过模式时才生效，否则以用户设置的模式为准，可选值：'auto' | 'light' | 'dark' | 'read'
// bodyBgImg: "/img/index/bg.jpg",
bodyBgImg: [
'/img/bg/1.webp',
'/img/bg/2.webp',
'/img/bg/3.webp',
'/img/bg/4.webp',
'/img/bg/5.webp',
'/img/bg/6.webp',
'/img/bg/7.webp',
'/img/bg/8.webp',
'/img/bg/9.webp',
'/img/bg/10.webp',
'/img/bg/11.webp',
'/img/bg/12.webp',
'/img/bg/13.webp',
'/img/bg/14.webp',
'/img/bg/15.webp',
'/img/bg/16.webp',
'/img/bg/17.webp',
'/img/bg/18.webp',
'/img/bg/19.webp',
'/img/bg/20.webp',
'/img/bg/21.webp',
'/img/bg/22.webp',
'/img/bg/23.webp',
'/img/bg/24.webp',
'/img/bg/25.webp',
'/img/bg/26.webp',
// '/img/bg/27.webp',
// '/img/bg/28.webp',
// '/img/bg/29.webp',
// '/img/bg/30.webp',
// '/img/bg/31.webp',
// '/img/bg/32.webp',
// '/img/bg/33.webp',
// '/img/bg/34.webp',
// '/img/bg/35.webp',
// '/img/bg/36.webp',
// '/img/bg/37.webp',
// '/img/bg/38.webp',
// '/img/bg/39.webp',
],
// body背景大图(即整个页面的背景图)，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
bodyBgImgOpacity: 1, // body背景图透明度，选值 0 ~ 1.0, 默认0.5
bodyBgImgInterval: 8,
// titleBadge: false, // 文章标题前的图标是否显示，默认true
// titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
// '图标地址1',
// '图标地址2'
// ],
// contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 => 方格 | 2 => 横线 | 3 => 竖线 | 4 => 左斜线 | 5 => 右斜线 | 6 => 点状
// updateBar: { // 最近更新栏
// showToArticle: true, // 显示到文章页底部，默认true
// moreArticle: '/archives' // 「更多文章」跳转的页面，默认'/archives'
// },
// rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示)
// sidebarOpen: false, // 初始状态是否打开侧边栏，默认true
// pageButton: false, // 是否显示快捷翻页按钮，默认true
sidebar: "structuring", // 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
// 站点配置（首页 & 文章页）
blogInfo: {
blogCreate: "2021-10-19", // 博客创建时间
indexView: true, // 开启首页的访问量和排名统计，默认 true（开启）
pageView: true, // 开启文章页的浏览量统计，默认 true（开启）
readingTime: true, // 开启文章页的预计阅读时间，条件：开启 eachFileWords，默认 true（开启）。可在 eachFileWords 的 readEachFileWords 的第二个和第三个参数自定义，默认 1 分钟 300 中文、160 英文
eachFileWords: readEachFileWords([""], 300, 160), // 开启每个文章页的字数。readEachFileWords(['xx']) 关闭 xx 目录（可多个，可不传参数）下的文章页字数和阅读时长，后面两个参数分别是 1 分钟里能阅读的中文字数和英文字数。无默认值。readEachFileWords() 方法默认排除了 article 为 false 的文章
mdFileCountType: "archives", // 开启文档数。1. archives 获取归档的文档数（默认）。2. 数组 readFileList(['xx']) 排除 xx 目录（可多个，可不传参数），获取其他目录的文档数。提示：readFileList() 获取 docs 下所有的 md 文档（除了 `.vuepress` 和 `@pages` 目录下的文档）
totalWords: "archives", // 开启本站文档总字数。1. archives 获取归档的文档数（使用 archives 条件：传入 eachFileWords，否则报错）。2. readTotalFileWords(['xx']) 排除 xx 目录（可多个，可不传参数），获取其他目录的文章字数。无默认值
moutedEvent: ".tags-wrapper", // 首页的站点模块挂载在某个元素后面（支持多种选择器），指的是挂载在哪个兄弟元素的后面，默认是热门标签 '.tags-wrapper' 下面，提示：'.categories-wrapper' 会挂载在文章分类下面。'.blogger-wrapper' 会挂载在博客头像模块下面
// 下面两个选项：第一次获取访问量失败后的迭代时间
indexIteration: 2500, // 如果首页获取访问量失败，则每隔多少时间后获取一次访问量，直到获取成功或获取 5 次后。默认 3 秒。注意：设置时间太低，可能导致访问量 + 2、+ 3 ......
pageIteration: 2500, // 如果文章页获取访问量失败，则每隔多少时间后获取一次访问量，直到获取成功或获取 5 次后。默认 3 秒。注意：设置时间太低，可能导致访问量 + 2、+ 3 ......
// 说明：成功获取一次访问量，访问量 + 1，所以第一次获取失败后，设置的每个隔段重新获取时间，将会影响访问量的次数。如 100 可能每次获取访问量 + 3
},
// 私密文章配置
privatePage: {
openPrivate: true, // 开启私密文章验证，默认开启（true），如果不开启（false），则下面配置都失效
username: "youngkbt", // 管理员用户名
password: "kbt648621", // 管理员密码
expire: "1d", // 登录过期时间：1d 代表 1 天，1h 代表 1 小时，仅支持这两个单位，不加单位代表秒。过期后访问私密文章重新输入用户名和密码。默认一天
loginPath: "/vdoing/login/", // 引用登录组件的 md 文章的 permalink（必须），无默认值
loginKey: "vdoing_manager", // 存储用户名信息的 key，默认是 vdoing_manager。系统通过该 key 验证是否登录、是否过期
loginSession: false, // 开启是否在网页关闭或刷新后，清除登录状态，这样再次访问网页，需要重新登录，默认为 false（不开启）
firstLogin: 0, // 第一次进入网站需要验证。用于封锁整个网站，默认为 0（不开启），1 和 2 都代表开启，区别：1 代表虽然进入网站成功，但是网站内的私密文章仍需要单独验证，2 代表进入网站成功，网站内的私密文章不需要单独验证，也就是网站内的私密文章和普通文章一样可以访问
firstLoginKey: "vdoing_first_login", // 存储用户名信息的 key，firstLogin 开启后该配置生效，默认为 vdoing_first_login，系统通过该 key 验证是否登录、是否过期
// 私密文章多组用户名密码
loginInfo: {
"/private/test1/": [{ username: "vdoing", password: "123456" }],
vdoing_first_login: [
// 对应 firstLoginKey 的值
{ username: "vdoing", password: "123456" },
],
},
},
// // 首页大图片配置
indexImg: {
navColor: 2, // 导航栏左侧名字、中间搜索框、右侧字体的颜色，1 是黑色，2 是白色。默认是 1
switchNavColor: true, // 页面移出大图片的位置后，navColor 是否变换，如由白色变黑色，黑色变白色。默认是 false
// 因为本主题的默认背景色偏向白色，如果 navColor 是 2，建议需要开启(true)，否则白背景 + 白字体 = 看不见
bgTimeColor: true, // 是否开启图片的背景色随一天的不同时间而变化，并且开启时间窗口提示，默认是 false。时间分为四种：白天（原图）、黄昏（偏黄）、晚上（偏黑）、深夜（偏深黑）
bgTimeColorArray: [
"transparent",
"transparent",
"transparent",
"transparent",
], // 第一个是白天的颜色（默认原图），第二个是黄昏的颜色，第三个是晚上的颜色，第四个是深夜的颜色。bgTimeColor 为 true 生效
descFade: true, // 是否开启图片中间描述的淡入淡出效果，默认为 false
desc: hitokoto, // 多条描述，如果填写则覆盖 index.md 的 tagline，不填写则默认读取 index.md 的 tagline，descFadeIn 为 true 生效
descFontSize: "1.4rem", // desc 的字体大小，默认 1.4rem。提示：原主题是 1.1rem
descFadeInTime: 200, // 描述的淡入效果持续时间，descFade 为 true 生效，默认 200 毫秒
descFadeOutTime: 100, // 描述的淡出效果持续时间，descFade 为 true 生效，默认 100 毫秒
descNextTime: 800, // 当有多个 desc 时，一个 desc 展示完后或准备开始时，多少时间后出现下一个 desc，默认 800 毫秒
bubble: false, // 是否开启图片的气泡效果，默认为 false
bubblePosition: 0, // 气泡效果的位置，范围：0-100，不同数值代表不同的起始位置，0是整个图片，50是半张图（一半的下方）。bubble 为 true 生效。默认是 0
bubbleNum: 200, // 气泡的个数，bubble 为 true 生效，默认 200 个
},
author: {
// 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}
name: penName, // 必需
link, // 可选的
},
blogger: {
// 博主信息，显示在首页侧边栏
avatar,
name,
slogan, // 个性签名
},
social: {
// 社交图标，显示于博主信息栏和页脚栏
// iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
icons: [
{
iconClass: "icon-github",
title: "GitHub",
link: "https://github.com/OnlyOnexl",
},
{
iconClass: "icon-gitee",
title: "Gitee",
link: "https://gitee.com/onlyonexl/",
},
{
iconClass: "icon-rss",
title: "网站首页",
link: "https://onedayxyy.cn/",
},
{
iconClass: "icon-QQ",
title: "QQ",
link: "http://wpa.qq.com/msgrd?v=3&uin=2675263825&site=qq&menu=yes",
},
{
iconClass: "icon-youjian",
title: "联系我",
link: "https://onedayxyy.cn/?contact=true",
},
],
},
footer,
htmlModules // 插入hmtl模块
};docs\.vuepress\config\htmlModules.ts文件：
完整代码：
详细信息
ts
// 目前该文件没有用到
import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
/** 插入自定义html模块 (可用于插入广告模块等)
* {
* homeSidebarB: htmlString, 首页侧边栏底部
*
* sidebarT: htmlString, 所有左侧边栏顶部
* sidebarB: htmlString, 所有左侧边栏底部
*
* pageT: htmlString, 页面顶部
* pageB: htmlString, 页面底部
* pageTshowMode: string, 页面顶部-显示方式：未配置默认所有页面；'article' => 仅文章页①； 'custom' => 仅自定义页①
* pageBshowMode: string, 页面底部-显示方式：未配置默认所有页面；'article' => 仅文章页①； 'custom' => 仅自定义页①
*
* windowLB: htmlString, 全局窗口左下角②
* windowRB: htmlString, 全局窗口右下角②
* }
*
* ①注：在.md文件front matter配置`article: false`的页面是自定义页，未配置的默认是文章页（首页除外）。
* ②注：windowLB 和 windowRB：1.展示区块宽高最大是200*200px。2.请给自定义元素定一个不超过200px的固定宽高。3.在屏宽小于960px时无论如何都不会显示。
*/
const htmlModule: VdoingThemeConfig['htmlModules'] = {
homeSidebarB:
`<div style="padding: 0.95rem">
<p style="
color: var(--textColor);
opacity: 0.9;
font-size: 20px;
font-weight: bold;
margin: 0 0 8px 0;
">公众号</p>
<img src="https://onedayxyy.cn/images/wechat-gzh.jpg" style="width:100%;" />
关注公众号，回复[<b>One</b>]，可获取 <a href="https://onedayxyy.cn/" arget="_blank" >我的学习网站<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
</p>
</div>`,
pageB: `<div class="donation">
<button>打赏</button>
<div class="main">
<div class="pic">
<img src="/img/alipay/One-wechat.jpg" alt="微信">
<img src="/img/alipay/One-zhifubao.jpg" alt="支付宝">
</div>
</div>
</div>`,
// `<div style="padding: 0.95rem">
// <p style="
// color: var(--textColor);
// opacity: 0.9;
// font-size: 20px;
// font-weight: bold;
// margin: 0 0 8px 0;
// ">公众号</p>
// <img src="https://open.weixin.qq.com/qr/code?username=gh_0cf4b813918c" style="width:100%;" />
// 关注公众号，回复[<b>前端资源</b>]，可获取 <a href="https://game.xugaoyi.com" arget="_blank" >前端学习资源<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
// </p>
// </div>`,
// `<!-- 纵向自适应 -->
// <ins class="adsbygoogle"
// style="display:block;padding: 0.95rem;"
// data-ad-client="ca-pub-7828333725993554"
// data-ad-slot="7802654582"
// data-ad-format="auto"
// data-full-width-responsive="true"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>`,
// sidebarT:
// `<!-- 固定100% * 150px可显示，max-height:150px 未见显示-->
// <ins class="adsbygoogle"
// style="display:inline-block;width:100%;max-height:150px"
// data-ad-client="ca-pub-7828333725993554"
// data-ad-slot="6625304284"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>`,
// sidebarB:
// `<!-- 正方形 -->
// <ins class="adsbygoogle"
// style="display:block"
// data-ad-client="ca-pub-7828333725993554"
// data-ad-slot="3508773082"
// data-ad-format="auto"
// data-full-width-responsive="true"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>`,
// pageT:
// `<!-- 固定100% * 90px可显示，max-height:90px未见显示-->
// <ins class="adsbygoogle"
// style="display:inline-block;width:100%;max-height:90px"
// data-ad-client="ca-pub-7828333725993554"
// data-ad-slot="6625304284"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>`,
// // pageTshowMode: 'article',
// pageB:
// `<!-- 横向自适应 -->
// <ins class="adsbygoogle"
// style="display:block"
// data-ad-client="ca-pub-7828333725993554"
// data-ad-slot="6620245489"
// data-ad-format="auto"
// data-full-width-responsive="true"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>`,
// pageBshowMode: 'article',
// windowLB: // 会遮挡部分侧边栏
// `<!-- 固定200*200px -->
// <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
// <ins class="adsbygoogle"
// style="display:inline-block;width:200px;height:200px"
// data-ad-client="ca-pub-7828333725993554"
// data-ad-slot="6625304284"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>`,
// windowRB:
// `<!-- 固定160*160px -->
// <ins class="adsbygoogle"
// style="display:inline-block;max-width:160px;max-height:160px"
// data-ad-client="ca-pub-7828333725993554"
// data-ad-slot="8377369658"></ins>
// <script>
// (adsbygoogle = window.adsbygoogle || []).push({});
// </script>
// `,
}
// const htmlModule = {
// homeSidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// sidebarT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// sidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// pageT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// pageB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// windowLB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// windowRB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// }
export default htmlModule预览
每篇文章尾部都会出现这个赞赏功能哦。
配置赞赏流线边框按钮
2025.2.15(已解决)
环境
自己开源的 《vuepress-theme-vdoing-one-public》网站模板。
此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️
版权
次配置来源于《Hyde Blog》大佬贡献的代码，原文为《流线边框按钮》十分感谢。
预览
配置
配置docs\.vuepress\styles\index.styl文件，在最后添加如下代码：
css
// 文章底部打赏按钮
.donation
position relative
text-align: center
margin-top: 10px
button
width 5rem
height 2.5rem
border: 0
border-radius .5rem
color: #fff
background-color #ffffff00
font-weight: bold
opacity 0.9
transition: all .5s
cursor: pointer
position: relative;
z-index: 1;
overflow: hidden;
&:hover,&:focus
opacity 1
transform: scale(1.05)
~.main
.pic
visibility: visible
opacity 1
transform: translateY(-1.5rem)
.main
position absolute
bottom 3rem
left: 0
right: 0
pointer-events: none
.pic
position relative
visibility hidden
display: inline-block
padding:10px 12px
background-color:#fff6
backdrop-filter: blur(6px);
box-shadow: 0 0 10px 0 #3336
border-radius: 1rem
opacity 0
transition: all .5s
pointer-events: all
z-index 10
&:hover
visibility visible
opacity 1
transform: translateY(-1.5rem)
&::before
content: ''
position absolute
bottom -@padding[0]
left: 50%
right: 50%
filter: drop-shadow(0px 4px 4px #3336);
transform: translateX(-50%)
border-width: (-@bottom) (-@bottom) 0;
border-style: solid;
border-color: rgba(#fff,.8) transparent transparent;
&::after
content: ''
display block
position absolute
width 100%
height 2.5rem
img
width 10rem
max-width 40vw
.donation button::before{
content: ''
position: absolute
width: 200%;
height: 200%;
background: linear-gradient(
114.2deg,
rgba(184, 215, 21, 1) -15.3%,
rgba(148, 187, 233, 1) 14.5%,
rgba(21, 215, 182, 1) 38.7%,
rgba(129, 189, 240, 1) 58.8%,
rgba(219, 108, 205, 1) 77.3%,
rgba(240, 129, 129, 1) 88.5%
);
z-index: -2;
left: 50%;
top: 50%;
transform-origin: left top;
animation: rotation 4s linear infinite;
}
@keyframes rotation {
to {
transform: rotate(360deg);
}
}
.donation button::after {
content: "";
position: absolute;
inset: 4px;
/* 设置边距 */
background:#FFA500;
z-index: -1;
border-radius: inherit;
}