ArticleAppreciation 赞赏

使用赞赏组件可以在文章页使用赞助功能。

文章页底部赞赏

import { defineComponent, h, provide } from "vue";
import DefaultTheme from "vitepress/theme";
import { TkDocAfterAppreciation, teekConfigContext } from "vitepress-theme-teek";
import "vitepress-theme-teek/theme-chalk/tk-article-appreciation.css";

export default {
  extends: DefaultTheme,
  Layout: defineComponent({
    name: "LayoutProvider",
    setup() {
      provide(teekConfigContext, {
        appreciation: {
          options: {
            icon: "weChatPay", // 赞赏图标，内置 weChatPay 和 alipay
            expandTitle: "打赏支持", // 展开标题，支持 HTML
            collapseTitle: "下次一定", // 折叠标题，支持 HTML
            content: `<img src='/teek-logo-large.png'>`, // 赞赏内容，支持 HTML
            expand: false, // 是否默认展开，默认 false

            // ... 更多配置请看配置系列文章
          },
        },
      });

      return () =>
        h(DefaultTheme.Layout, null, {
          "doc-after": () => h(TkDocAfterAppreciation),
        });
    },
  }),
};

大纲栏底部赞赏

import { defineComponent, h, provide } from "vue";
import DefaultTheme from "vitepress/theme";
import { TkAsideBottomAppreciation, teekConfigContext } from "vitepress-theme-teek";

export default {
  extends: DefaultTheme,
  Layout: defineComponent({
    name: "LayoutProvider",
    setup() {
      provide(teekConfigContext, {
        appreciation: {
          options: {
            title: "打赏支持", // 赞赏标题，支持 HTML
            content: `<img src='/teek-logo-large.png'>`, // 赞赏内容，支持 HTML
          },
        },
      });

      return () =>
        h(DefaultTheme.Layout, null, {
          "aside-bottom": () => h(TkAsideBottomAppreciation),
        });
    },
  }),
};