One

主题

文章配置 ​

article ​

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

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

提示

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

ts
const tkConfig = tkThemeConfig({
  article: {
    showIcon: true, // 作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息的图标是否显示
    dateFormat: "yyyy-MM-dd hh:mm:ss", // 文章日期格式，首页和文章页解析日期时使用
    showInfo: true, // 是否展示作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息，分别作用于首页和文章页
    showAuthor: true, // 是否展示作者
    showDate: true, // 是否展示日期
    showCategory: false, // 是否展示分类
    showTag: false, // 是否展示标签
  },
});
yaml
---
tk:
  article:
    showIcon: true
    dateFormat: yyyy-MM-dd hh:mm:ss
    showInfo: true
    showAuthor: true
    showDate: true
    showCategory: false
    showTag: false
---
yaml
---
article:
  showIcon: true
  dateFormat: yyyy-MM-dd hh:mm:ss
  showInfo: true
  showAuthor: true
  showDate: true
  showCategory: false
  showTag: false
---
ts
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 | ("post" | "article")[];
  /**
   * 文章页是否展示作者
   *
   * @default true
   */
  showAuthor?: boolean;
  /**
   * 文章页是否展示日期
   *
   * @default true
   */
  showDate?: boolean;
  /**
   * 文章页是否展示分类
   *
   * @default false
   */
  showCategory?: boolean;
  /**
   * 文章页是否展示标签
   *
   * @default false
   */
  showTag?: boolean;
  /**
   * 指定文章信息的传送位置，仅限在文章页生效，默认在文章页顶部
   */
  teleport?: {
    /**
     * 指定需要传送的元素选择器
     */
    selector?: string;
    /**
     * 指定传送到元素的位置，before 在元素前，after 在元素后
     *
     * @default 'after'
     */
    position?: "before" | "after";
    /**
     * 指定一个 class 名，如果传送的位置和其他元素太接近，可以利用 class 来修改 margin
     *
     * @default teleport
     */
    className?: string;
  };
}

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

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

ts
const tkConfig = tkThemeConfig({
  article: {
    teleport: {
      selector: "h1",
      position: "after",
      className: "h1-bottom-info"
    }
  },
});
yaml
---
tk:
  article:
    teleport:
      selector: h1
      position: after
      className: h1-bottom-info
---

面包屑配置。

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

ts
const tkConfig = tkThemeConfig({
  breadcrumb: {
    enabled: true, // 是否启用面包屑
    showCurrentName: false, // 面包屑最后一列是否显示当前文章的文件名
    separator: "/", // 面包屑分隔符
  },
});
yaml
---
tk:
  breadcrumb:
    enabled: true
    showCurrentName: false
    separator: /
---
ts
interface TkThemeConfig {
  /**
   * 面包屑配置，支持在文章页的 frontmatter 配置 breadcrumb.[key]
   */
  breadcrumb?: Breadcrumb;
}

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