文章配置

article

文章信息配置，分别作用在首页和文章页。

提示

如果在 config.ts 中配置，则首页和文章页都生效。

config.ts首页 index.md文章页 xxx.md更多配置项

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

const teekConfig = defineTeekConfig({
  article: {
    showIcon: true, // 作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息的图标是否显示
    dateFormat: "yyyy-MM-dd hh:mm:ss", // 文章日期格式，首页和文章页解析日期时使用
    showInfo: true, // 是否展示作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息，分别作用于首页和文章页
    showAuthor: true, // 是否展示作者
    showCreateDate: true, // 是否展示创建日期
    showUpdateDate: false, // 是否展示更新日期，仅在文章页显示
    showCategory: false, // 是否展示分类
    showTag: false, // 是否展示标签
  },
});

yaml

---
tk:
  article:
    showIcon: true
    dateFormat: yyyy-MM-dd hh:mm:ss
    showInfo: true
    showAuthor: true
    showCreateDate: true
    showUpdateDate: false
    showCategory: false
    showTag: false
---

yaml

---
article:
  showIcon: true
  dateFormat: yyyy-MM-dd hh:mm:ss
  showInfo: true
  showAuthor: true
  showCreateDate: true
  showUpdateDate: false
  showCategory: false
  showTag: false
---

interface Article {
  /**
   * 作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息的图标是否显示
   *
   * @default true
   */
  showIcon?: boolean;
  /**
   * 文章日期格式，首页和文章页解析日期时使用
   *
   * @default 'yyyy-MM-dd'
   */
  dateFormat?: "yyyy-MM-dd" | "yyyy-MM-dd hh:mm:ss" | ((date: string) => string);
  /**
   * 是否展示作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息，分别作用于首页和文章页
   * 如果 showInfo 为数组，则控制在哪里显示，如 ["post"] 只在首页的 Post 列表显示基本信息；如果为 boolean 值，则控制基本信息是否展示，如 false 则在首页和文章页都不显示基本信息
   *
   * @default true
   */
  showInfo?: boolean | ArticleInfoPosition[];
  /**
   * 是否展示作者
   *
   * @default true
   */
  showAuthor?: boolean | ArticleInfoPosition[];
  /**
   * 是否展示创建日期
   *
   * @default true
   */
  showCreateDate?: boolean | ArticleInfoPosition[];
  /**
   * 是否展示更新日期，仅在文章页显示
   *
   * @default false
   */
  showUpdateDate?: boolean;
  /**
   * 是否展示分类
   *
   * @default false
   */
  showCategory?: boolean | ArticleInfoPosition[];
  /**
   * 是否展示标签
   *
   * @default false
   */
  showTag?: boolean | ArticleInfoPosition[];
  /**
   * 指定文章信息的传送位置，仅限在文章页生效，默认在文章页顶部
   */
  teleport?: {
    /**
     * 指定需要传送的元素选择器
     */
    selector?: string;
    /**
     * 指定传送到元素的位置，before 在元素前，after 在元素后
     *
     * @default 'after'
     */
    position?: "before" | "after";
    /**
     * 指定一个 class 名，如果传送的位置和其他元素太接近，可以利用 class 来修改 margin
     *
     * @default teleport
     */
    className?: string;
  };
  /**
   * 文章页顶部使用 Vitepress 容器添加提示
   *
   * @param frontmatter 文档 frontmatter
   * @param localeIndex 当前国际化语言
   * @param page 文章信息，即 useData().page 的信息
   */
  topTip?: (frontmatter: PageData["frontmatter"], localeIndex: string, page: PageData) => VpContainerProps | void;
  /**
   * 文章页的图片查看器配置，完全是 ElImageViewer 的 props
   */
  imageViewer?: Partial<ImageViewerProps>;
  /**
   * 鼠标悬停时标题提示文案
   */
  titleTip?: {
    /**
     * @default '作者'
     */
    author?: string;
    /**
     * @default '创建时间'
     */
    createTime?: string;
    /**
     * @default '更新时间'
     */
    updateTime?: string;
    /**
     * @default '分类'
     */
    category?: string;
    /**
     * @default '标签'
     */
    tag?: string;
    /**
     * @default '文章字数'
     */
    wordCount?: string;
    /**
     * @default '预计阅读时长'
     */
    readingTime?: string;
    /**
     * @default '浏览量'
     */
    pageView?: string;
  };
}

配置项中，teleport 可以将文章信息传送到指定位置，仅限在文章页生效，默认在文章页顶部。

如将文章信息传到一级标题下面：

config.ts文章页 xxx.md

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

const teekConfig = defineTeekConfig({
  article: {
    teleport: {
      selector: "h1",
      position: "after",
      className: "h1-bottom-info",
    },
  },
});

yaml

---
tk:
  article:
    teleport:
      selector: h1
      position: after
      className: h1-bottom-info
---

面包屑配置。

config.ts文章页 xxx.md更多配置项

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

const teekConfig = defineTeekConfig({
  breadcrumb: {
    enabled: true, // 是否启用面包屑
    showCurrentName: false, // 面包屑最后一列是否显示当前文章的文件名
    separator: "/", // 面包屑分隔符
  },
});

yaml

---
tk:
  breadcrumb:
    enabled: true
    showCurrentName: false
    separator: /
---

interface Breadcrumb {
  /**
   * 是否启用面包屑
   *
   * @default true
   */
  enabled?: boolean;
  /**
   * 面包屑最后一列是否显示当前文章的文件名
   *
   * @default false
   */
  showCurrentName?: boolean;
  /**
   * 面包屑分隔符
   *
   * @default '/'
   */
  separator?: string;
  /**
   * 鼠标悬停首页图标的提示文案
   *
   * @default '首页'
   */
  homeLabel?: string;
}

pageStyle

类型："default" | "card" | "segment" | "card-nav" | "segment-nav"
默认值：default

文章页的样式风格，default 为 Vitepress 原生风格，card 为单卡片风格，segment 为片段卡片风格，card-nav 和 segment-nav 会额外修改导航栏样式。

提示

在文章页的 frontmatter 配置 pageStyle，可以针对不同的文章页开启不同的样式风格。

config.ts文章页 xx.md

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

const teekConfig = defineTeekConfig({
  pageStyle: "segment-nav",
});

yaml

---
pageStyle: segment-nav
---

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 配置来覆盖全局配置。

yaml

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

文章配置 ​

article ​

breadcrumb ​

pageStyle ​

appreciation ​

文章配置

article

breadcrumb

pageStyle

appreciation