配置赞赏功能

配置赞赏功能

目录

• 配置赞赏功能
• 目录
• 版权
• 环境
• 原文
• 效果
• 配置

[toc]

版权

警告

本着开源共享、共同学习的精神：

本文是在 《群主~Teeker》的《文章配置》 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境

2025.4.6(已解决)

警告

次配置适用于Teek@1.0.0-alpha.9-2025.4.6版本（其它版本可自行测试）。

提示

自己开源的 《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

原文

https://vp.teek.top/reference/article-config#appreciation 《文章配置》

效果

配置

赞赏功能配置。

赞赏功能提供 2 个位置选择：

• doc-after：文章页底部，评论区上方
• aside-bottom：文章页大纲栏下方

2 个位置分别有不同的配置项。

文章页底部文章页大纲栏下方更多配置项

文章页底部

// .vitepress/config.ts
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  appreciation: {
    position: "doc-after",
    options: {
      icon: "weChatPay", // 赞赏图标，内置 weChatPay 和 alipay
      expandTitle: "打赏支持", // 展开标题，支持 HTML
      collapseTitle: "下次一定", // 折叠标题，支持 HTML
      content: `<img src='/teek-logo-large.png'>`, // 赞赏内容，支持 HTML
      expand: false, // 是否默认展开，默认 false
    },
  },
});

文章页大纲栏下方

// .vitepress/config.ts
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  appreciation: {
    position: "aside-bottom",
    options: {
      title: `<span style="color: var(--tk-theme-color)">欢迎打赏支持</span>`, // 赞赏标题，支持 HTML
      content: `<img src='/teek-logo-large.png'>`, // 赞赏内容，支持 HTML
    },
  },
});

更多配置项

type Appreciation<T extends keyof AppreciationPosition = ""> = {
  /**
   * 赞赏位置
   */
  position?: T;
  /**
   * 赞赏配置
   */
  options?: AppreciationPosition[T];
};

type AppreciationPosition = {
  "": object;
  "doc-after": {
    /**
     * 自定义按钮 HTML
     */
    buttonHtml?: string;
    /**
     * 赞赏图标，内置 weChatPay 和 alipay
     */
    icon?: string | "weChatPay" | "alipay";
    /**
     * 展开标题，支持 HTML
     */
    expandTitle?: string;
    /**
     * 折叠标题，支持 HTML
     */
    collapseTitle?: string;
    /**
     * 赞赏内容，支持 HTML
     */
    content?: string;
    /**
     * 是否默认展开
     *
     * @default false
     */
    expand?: boolean;
  };
  "aside-bottom": {
    /**
     * 赞赏标题，支持 HTML
     */
    title?: string;
    /**
     * 赞赏内容，支持 HTML
     */
    content?: string;
  };
};

Teek 内置两个 icon：

• weChatPay：微信支付图标
• alipay：支付宝图标

如果您需要自定义图标，则通过 icon 配置项传入。

赞赏功能同样支持在单个 Markdown 的 frontmatter 配置来覆盖全局配置。

---
appreciation:
  position: doc-after
  options:
    icon: weChatPay
    expandTitle: 打赏支持
    collapseTitle: 下次一定
    content: "<img src='/teek-logo-large.png'>"
    expand: false
---

---

自己配置位置：

编辑docs\.vitepress\config.mts文件：（注意是在defineTeekConfig部分）

  // 赞赏在文章下方
  appreciation: {
    position: "doc-after",
    options: {
      icon: "weChatPay", // 赞赏图标，内置 weChatPay 和 alipay
      expandTitle: "打赏支持", // 展开标题，支持 HTML
      collapseTitle: "下次一定", // 折叠标题，支持 HTML
      content: `<img src='/img/alipay/1.png'>`, // 赞赏内容，支持 HTML
      expand: false, // 是否默认展开，默认 false
    },
  },

结束。