文章配置

article

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

支持在 frontmatter 配置，如果在首页（index.md），格式为 tk.article.[key]，如果在文章页（非 index.md），格式为 article.[key]。

提示

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

config.ts

// .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, // 是否展示标签
  },
});

首页 index.md

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

文章页 xxx.md

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

配置项

interface TkThemeConfig {
  /**
   * 文章信息配置，支持在 frontmatter 配置，如果在首页（index.md），格式为 tk.article.[key]，如果在文章页（非 index.md），格式为 article.[key]
   */
  article?: Article;
}

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>;
}

export type ArticleInfoPosition = "post" | "article";

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

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

config.ts

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

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

文章页 xxx.md

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

breadcrumb

面包屑配置。

支持在文章页的 frontmatter 配置 breadcrumb.[key]。

config.ts

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

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

文章页 xxx.md

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

配置项

interface TkThemeConfig {
  /**
   * 面包屑配置，支持在文章页的 frontmatter 配置 breadcrumb.[key]
   */
  breadcrumb?: Breadcrumb;
}

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

pageStyle

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

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

提示

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

config.ts

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

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

文章页 xx.md

---
pageStyle: segment-nav
---