One

主题

卡片栏配置 ​

卡片栏配置 ​

homeCardSort ​

  • 类型：("topArticle" | "category" | "tag" | "friendLink" | "docAnalysis")[]
  • 默认值：["topArticle", "category", "tag", "friendLink", "docAnalysis"]

首页卡片的位置排序，当设置了 homeCardSort 但没有全部补全内容，Teeker 会将剩余内容按照 homeCardSort 的顺序进行添加。

homeCardSort 支持在首页 index.md 的 frontmatter 配置，格式为 tk.homeCardSort。

ts
import tkThemeConfig from "vitepress-theme-teek/config";

const tkConfig = tkThemeConfig({
  homeCardSort: ["topArticle", "category", "tag", "friendLink", "docAnalysis"],
});
yaml
---
tk:
  homeCardSort:
    - topArticle
    - category
    - tag
    - friendLink
    - docAnalysis
---

bgColor ​

  • 类型：string[]
  • 默认值：["#e74c3c", "#409EFF", "#DAA96E", "#0C819F", "#27ae60", "#ff5c93", "#fd726d", "#f39c12", "#9b59b6"]

主题背景色，用于精选文章卡片的 top + sticky 功能和标签卡片的标签，背景色按顺序显示。

bgColor 支持在首页 index.md 的 frontmatter 配置，格式为 tk.bgColor，且颜色值有 # 号时请添加引号。

ts
import tkThemeConfig from "vitepress-theme-teek/config";

const tkConfig = tkThemeConfig({
  bgColor: ["#e74c3c", "#409EFF", "#DAA96E", "#0C819F", "#27ae60", "#ff5c93", "#fd726d", "#f39c12", "#9b59b6"],
});
yaml
---
tk:
  bgColor:
    - "#e74c3c"
    - "#409EFF"
    - "#DAA96E"
    - "#0C819F"
    - "#27ae60"
    - "#ff5c93"
    - "#fd726d"
    - "#f39c12"
    - "#9b59b6"
---

blogger ​

博主信息，显示在首页左边第一个卡片。

blogger 支持在首页 index.md 的 frontmatter 配置，格式为 tk.blogger.[key]。

ts
const tkConfig = tkThemeConfig({
  blogger: {
    name: "天客", // 博主昵称
    avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png", // 博主头像
    slogan: "朝圣的使徒，正在走向编程的至高殿堂！", // 博主签名
    avatarStyle: "full", // 头像风格：radius 为圆形头像，可支持鼠标悬停旋转，full 为方形头像
  },
});
yaml
---
tk:
  blogger:
    name: 天客
    avatar: https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png
    slogan: 朝圣的使徒，正在走向编程的至高殿堂！
    avatarStyle: full
---
ts
interface TkThemeConfig {
  /**
   * 博主信息，显示在首页左边第一个卡片，支持在首页 `index.md` 的 `frontmatter` 配置，格式为 `tk.blogger.[key]`
   */
  blogger?: Blogger;
}

export interface Blogger {
  /**
   * 博主昵称
   */
  name: string;
  /**
   * 博主头像
   */
  avatar: string;
  /**
   * 博主签名
   */
  slogan?: string;
  /**
   * 头像风格：radius 为圆形头像，可支持鼠标悬停旋转，full 为方形头像
   *
   * @default 'full'
   */
  avatarStyle?: "radius" | "full";
}

topArticle ​

精选文章卡片配置。

支持在首页 index.md 的 frontmatter 配置，格式为 tk.topArticle.[key]。

ts
const tkConfig = tkThemeConfig({
  topArticle: {
    enabled: true, // 是否启用精选文章卡片
    limit: 5, // 一页显示的数量
    autoPage: false, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  },
});
yaml
---
tk:
  topArticle:
    enabled: true
    limit: 5
    autoPage: false
    pageSpeed: 4000
---
ts
interface TkThemeConfig {
  /**
   * 精选文章卡片配置，支持在首页 index.md 的 frontmatter 配置，格式为 tk.topArticle.[key]
   */
  topArticle?: TopArticle;
}

interface TopArticle {
  /**
   * 是否启用精选文章卡片
   *
   * @default true
   */
  enabled?: boolean;
  /**
   * 首页卡片标题
   *
   * @default '${svg}精选文章'
   */
  title?: string | ((svg: string) => string);
  /**
   * 一页显示的数量
   *
   * @default 5
   */
  limit?: number;
  /**
   * 是否自动翻页
   *
   * @default false
   */
  autoPage?: boolean;
  /**
   * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
   *
   * @default 4000 (4秒)
   */
  pageSpeed?: number;
}

category ​

分类卡片配置。

支持在首页 index.md 的 frontmatter 配置，格式为 tk.category.[key]。

ts
const tkConfig = tkThemeConfig({
  category: {
    enabled: true, // 是否启用分类卡片
    limit: 5, // 一页显示的数量
    autoPage: false, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  },
});
yaml
---
tk:
  category:
    enabled: true
    limit: 5
    autoPage: false
    pageSpeed: 4000
---
ts
interface TkThemeConfig {
  /**
   * 分类卡片配置，支持在首页 index.md 的 frontmatter 配置，格式为 tk.category.[key]
   */
  category?: Category;
}

interface Category {
  /**
   * 是否启用分类卡片
   *
   * @default true
   */
  enable?: boolean;
  /**
   * 分类页访问地址
   *
   * @default '/categories'
   */
  path?: string;
  /**
   * 分类页卡片标题
   *
   * @default '${svg}全部分类'
   */
  pageTitle?: string | ((svg: string) => string);
  /**
   * 首页卡片标题
   *
   * @default '${svg}文章分类'
   */
  homeTitle?: string | ((svg: string) => string);
  /**
   * 一页显示的数量
   *
   * @default 5
   */
  limit?: number;
  /**
   * 是否自动翻页
   *
   * @default false
   */
  autoPage?: boolean;
  /**
   * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
   *
   * @default 4000 (4秒)
   */
  pageSpeed?: number;
}

tag ​

标签卡片配置。

支持在首页 index.md 的 frontmatter 配置，格式为 tk.tag.[key]。

ts
const tkConfig = tkThemeConfig({
  tag: {
    enabled: true, // 是否启用标签卡片
    limit: 21, // 一页显示的数量
    autoPage: false, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  },
});
yaml
---
tk:
  tag:
    enabled: true
    limit: 5
    autoPage: false
    pageSpeed: 4000
---
ts
interface TkThemeConfig {
  /**
   * 标签卡片配置，支持在首页 index.md 的 frontmatter 配置，格式为 tk.tag.[key]
   */
  tag?: Tag;
}

interface Tag {
  /**
   * 是否启用标签卡片
   *
   * @default true
   */
  enabled?: boolean;
  /**
   * 标签页访问地址
   *
   * @default '/tags'
   */
  path?: string;
  /**
   * 标签页页卡片标题
   *
   * @default '${svg}全部标签'
   */
  pageTitle?: string | ((svg: string) => string);
  /**
   * 首页卡片标题
   *
   * @default '${svg}热门标签'
   */
  homeTitle?: string | ((svg: string) => string);
  /**
   * 一页显示的数量
   *
   * @default 21
   */
  limit?: number;
  /**
   * 是否自动翻页
   *
   * @default false
   */
  autoPage?: boolean;
  /**
   * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
   *
   * @default 4000 (4秒)
   */
  pageSpeed?: number;
  /**
   * 自定义 tag 的背景颜色，默认取 theme.bgColor
   */
  bgColor?: string[];
}

友情链接卡片配置。

支持在首页 index.md 的 frontmatter 配置，格式为 tk.friendLink.[key]。

ts
const tkConfig = tkThemeConfig({
  friendLink: {
    enabled: true, // 是否启用友情链接卡片
    list: [
      { avatar: "/img/bg1.jpg", name: "测试1", desc: "这是一个友链测试1", link: "https://github.com/Kele-Bingtang" },
      { avatar: "/img/ui.png", name: "测试2", desc: "这是一个友链测试2222111啊" },
      { avatar: "/img/web.png", name: "测试3测试3测试3测试3测试3测试3", desc: "这是一个友链测试3" },
      { avatar: "/img/more.png", name: "测试4", desc: "这是一个友链测试4" },
      { avatar: "/img/ui.png", name: "测试22", desc: "这是一个友链测试2" },
      { avatar: "/img/other.png", name: "测试11", desc: "这是一个友链测试1" },
      { avatar: "/img/more.png", name: "测试44", desc: "这是一个友链测试4" },
      { avatar: "/img/web.png", name: "测试33", desc: "这是一个友链测试3" },
      { avatar: "/img/other.png", name: "测试111", desc: "这是一个友链测试1" },
      { avatar: "/img/web.png", name: "测试333", desc: "这是一个友链测试3" },
      { avatar: "/img/more.png", name: "测试444", desc: "这是一个友链测试4" },
      { avatar: "/img/ui.png", name: "测试222", desc: "这是一个友链测试2" },
    ], // 友情链接数据列表
    limit: 5, // 一页显示的数量
    autoScroll: false, // 是否自动滚动
    scrollSpeed: 2500, // 滚动间隔时间，单位：毫秒。autoScroll 为 true 时生效
    autoPage: false, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  },
});
yaml
---
tk:
  friendLink:
    enabled: true
    list:
      - avatar: /img/bg1.jpg
        name: 测试1
        desc: 这是一个友链测试1
        link: https://github.com/Kele-Bingtang
      - avatar: /img/ui.png
        name: 测试2
        desc: 这是一个友链测试2222111啊
    limit: 5
    autoScroll: false
    scrollSpeed: 2500
    autoPage: false
    pageSpeed: 4000
---
ts
interface TkThemeConfig {
  /**
   * 友情链接卡片配置，支持在首页 index.md 的 frontmatter 配置，格式为 tk.friendLink.[key]
   */
  friendLink?: FriendLink;
}

interface FriendLink {
  /**
   * 是否启用友情链接卡片
   *
   * @default true
   */
  enabled?: boolean;
  /**
   * 友情链接数据列表
   */
  list?: {
    /**
     * 友链名称
     */
    name: string;
    /**
     * 友链头像
     */
    avatar?: string;
    /**
     * 友链描述
     */
    desc?: string;
    /**
     * 友链链接
     */
    link?: string;
    /**
     * img 标签的 alt
     *
     * @default name
     */
    alt?: string;
  }[];
  /**
   * 首页卡片标题
   *
   * @default '${svg}友情链接'
   */
  title?: string | ((svg: string) => string);
  /**
   * 一页显示的数量
   *
   * @default 5
   */
  limit?: number;
  /**
   * 是否自动滚动
   *
   * @default false
   */
  autoScroll?: boolean;
  /**
   * 滚动间隔时间，单位：毫秒。autoScroll 为 true 时生效
   *
   * @default 2500 (2.5秒)
   */
  scrollSpeed?: number;
  /**
   * 是否自动翻页
   *
   * @default false
   */
  autoPage?: boolean;
  /**
   * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
   *
   * @default 4000 (4秒)
   */
  pageSpeed?: number;
}

docAnalysis ​

站点信息卡片配置。

支持在首页 index.md 的 frontmatter 配置，格式为 tk.docAnalysis.[key]。

当想修改站点信息内置的信息时，可以使用 overrideInfo 配置项，该配置项是一个数组对象，对象的 key 为信息标识，value 是一个函数，接收两个参数 originValue 和 currentValue：

  • originValue：站点信息卡片的原始值，如创建时间为 2021-10-19
  • currentValue：站点信息卡片当前渲染的值，如创建时间渲染的值为 N 天前
ts
const tkConfig = tkThemeConfig({
  docAnalysis: {
    enabled: true,
    createTime: "2021-10-19",
    siteView: true,
    pageView: true,
    wordCount: true,
    readingTime: true,
    siteIteration: 2500,
    pageIteration: 2500,
    overrideInfo: [{ key: "lastActiveTime", value: (_, currentValue) => `${currentValue}前` }],
    appendInfo: [{ key: "index", label: "序号", value: "天客 99" }],
  },
});
yaml
---
tk:
  docAnalysis:
    enabled: true
    createTime: 2021-10-19
    siteView: true
    pageView: true
    wordCount: true
    readingTime: true
    siteIteration: 2500
    pageIteration: 2500
    appendInfo:
      - key: "index"
        label: "序号"
        value: "天客 99"
---
ts
import type { Ref } from "vue";

interface TkThemeConfig {
  /**
   * 站点信息卡片配置，支持在首页 index.md 的 frontmatter 配置，格式为 tk.docAnalysis.[key]
   */
  docAnalysis?: DocAnalysis;
}

interface DocAnalysis {
  /**
   * 是否启用站点信息卡片
   *
   * @default true
   */
  enabled?: boolean;
  /**
   * 首页卡片标题
   *
   * @default '${svg}站点信息'
   */
  title?: string | ((svg: string) => string);
  /**
   * 项目创建时间
   */
  createTime?: string;
  /**
   * 是否开启首页的访问量和排名统计
   *
   * @default true
   */
  siteView?: boolean;
  /**
   * 是否开启文章页的浏览量统计
   *
   * @default true
   */
  pageView?: boolean;
  /**
   * 是否开启文章页的字数统计
   *
   * @default true
   */
  wordCount?: boolean;
  /**
   * 是否开启文章页的阅读时长统计
   *
   * @default true
   */
  readingTime?: boolean;
  /**
   * 如果首页获取访问量失败，则每隔多少时间后获取一次访问量，直到获取成功或获取 5 次后
   *
   * @default 2000 (2秒)
   */
  siteIteration?: number;
  /**
   * 如果文章页获取访问量失败，则每隔多少时间后获取一次访问量，直到获取成功或获取 5 次后
   *
   * @default 2000 (2秒)
   */
  pageIteration?: number;
  /**
   * 自定义现有信息
   * originValue 为计算前的数据，currentValue 为计算后的数据（加单位的数据），针对 lastActiveTime 这些需要判断 N 分、N 时、N 天的 key，originValue 为具体的时间，需要自行计算
   */
  overrideInfo?: (Omit<PartialKey<DocAnalysisInfo, "label">, "value"> & {
    value?: (
      originValue: string | number | Ref<string>,
      currentValue?: string | number | Ref<string>
    ) => string | Ref<string>;
  })[];
  /**
   * 自定义额外信息，类型和 overrideInfo 一样
   * @default []
   */
  appendInfo?: (Omit<DocAnalysisInfo, "key"> & { key: string })[];
}

interface DocAnalysisInfo {
  /**
   * 站点信息唯一标识
   */
  key:
    | "totalPosts"
    | "weekAddNum"
    | "monthAddNum"
    | "runtime"
    | "totalWordCount"
    | "lastActiveTime"
    | "viewCount"
    | "visitCount"
    | string;
  /**
   * 站点信息标签
   */
  label: string;
  /**
   * 站点信息值的描述
   */
  value: string | Ref<string>;
  /**
   * 是否显示在站点信息
   * @default true
   */
  show?: boolean;
}