卡片栏配置

homeCardSort

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

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

config.ts

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

const teekConfig = defineTeekConfig({
  homeCardSort: ["topArticle", "category", "tag", "friendLink", "docAnalysis"],
});

index.md

---
tk:
  homeCardSort:
    - topArticle
    - category
    - tag
    - friendLink
    - docAnalysis
---

bgColor

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

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

当在文章页的 frontmatter 配置时，如果颜色值有 # 号时请添加引号。

config.ts

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

const teekConfig = defineTeekConfig({
  bgColor: ["#e74c3c", "#409EFF", "#DAA96E", "#0C819F", "#27ae60", "#ff5c93", "#fd726d", "#f39c12", "#9b59b6"],
});

index.md

---
tk:
  bgColor:
    - "#e74c3c"
    - "#409EFF"
    - "#DAA96E"
    - "#0C819F"
    - "#27ae60"
    - "#ff5c93"
    - "#fd726d"
    - "#f39c12"
    - "#9b59b6"
---

blogger

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

config.ts

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

const teekConfig = defineTeekConfig({
  blogger: {
    name: "天客", // 博主昵称
    avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png", // 博主头像
    slogan: "朝圣的使徒，正在走向编程的至高殿堂！", // 博主签名
    shape: "square", // 头像风格：square 为方形头像，circle 为圆形头像，circle-rotate 可支持鼠标悬停旋转
  },
});

index.md

---
tk:
  blogger:
    name: 天客
    avatar: https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png
    slogan: 朝圣的使徒，正在走向编程的至高殿堂！
    shape: square
---

更多配置项

interface Blogger {
  /**
   * 博主昵称
   */
  name: string;
  /**
   * 博主头像
   */
  avatar: string;
  /**
   * 博主签名
   */
  slogan?: string;
  /**
   * 头像风格：square 为方形头像，circle 为圆形头像，circle-rotate 可支持鼠标悬停旋转
   *
   * @default 'square'
   */
  shape?: TkAvatarProps["shape"] | "circle-rotate";
}

topArticle

精选文章卡片配置。

config.ts

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

const teekConfig = defineTeekConfig({
  topArticle: {
    enabled: true, // 是否启用精选文章卡片
    limit: 5, // 一页显示的数量
    autoPage: false, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  },
});

index.md

---
tk:
  topArticle:
    enabled: true
    limit: 5
    autoPage: false
    pageSpeed: 4000
---

更多配置项

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

category

分类卡片配置。

config.ts

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

const teekConfig = defineTeekConfig({
  category: {
    enabled: true, // 是否启用分类卡片
    limit: 5, // 一页显示的数量
    autoPage: false, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  },
});

index.md

---
tk:
  category:
    enabled: true
    limit: 5
    autoPage: false
    pageSpeed: 4000
---

更多配置项

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 '暂无文章分类'
   */
  emptyLabel?: string;
  /**
   * 一页显示的数量
   *
   * @default 5
   */
  limit?: number;
  /**
   * 是否自动翻页
   *
   * @default false
   */
  autoPage?: boolean;
  /**
   * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
   *
   * @default 4000 (4秒)
   */
  pageSpeed?: number;
}

tag

标签卡片配置。

config.ts

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

const teekConfig = defineTeekConfig({
  tag: {
    enabled: true, // 是否启用标签卡片
    limit: 21, // 一页显示的数量
    autoPage: false, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  },
});

index.md

---
tk:
  tag:
    enabled: true
    limit: 5
    autoPage: false
    pageSpeed: 4000
---

更多配置项

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 '暂无热门标签'
   */
  emptyLabel?: string;
  /**
   * 一页显示的数量
   *
   * @default 21
   */
  limit?: number;
  /**
   * 是否自动翻页
   *
   * @default false
   */
  autoPage?: boolean;
  /**
   * 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
   *
   * @default 4000 (4秒)
   */
  pageSpeed?: number;
  /**
   * 自定义 tag 的背景颜色，默认取 theme.bgColor
   */
  bgColor?: string[];
}

friendLink

友情链接卡片配置。

config.ts

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

const teekConfig = defineTeekConfig({
  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 时生效
  },
});

index.md

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

更多配置项

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 '暂无友情链接'
   */
  emptyLabel?: 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

站点信息卡片配置。

config.ts

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

const teekConfig = defineTeekConfig({
  docAnalysis: {
    enabled: true,
    createTime: "2021-10-19",
    wordCount: true,
    readingTime: true,
    statistics: {
      provider: "busuanzi",
      siteView: true,
      pageView: true,
      siteIteration: 2000,
      pageIteration: 2000,
    },
    overrideInfo: [
      {
        key: "lastActiveTime",
        label: "活跃时间",
        value: (_, currentValue) => (currentValue + "").replace("前", ""),
        show: true,
      },
    ],
    appendInfo: [{ key: "index", label: "序号", value: "天客 99" }],
  },
});

index.md

---
tk:
  docAnalysis:
    enabled: true
    createTime: 2021-10-19
    wordCount: true
    readingTime: true
    statistics:
      provider: "busuanzi"
      siteView: true
      pageView: true
    appendInfo:
      - key: "index"
        label: "序号"
        value: "天客 99"
---

更多配置项

interface DocAnalysis {
  /**
   * 是否启用站点信息卡片
   *
   * @default true
   */
  enabled?: boolean;
  /**
   * 首页卡片标题
   *
   * @default '${svg}站点信息'
   */
  title?: string | ((svg: string) => string);
  /**
   * 项目创建时间
   */
  createTime?: string;
  /**
   * 是否开启文章页的字数统计
   *
   * @default true
   */
  wordCount?: boolean;
  /**
   * 是否开启文章页的阅读时长统计
   *
   * @default true
   */
  readingTime?: boolean;
  /**
   * 访问量、访客数统计配置
   */
  statistics?: {
    /**
     * 统计服务提供商
     *
     * @default ''
     */
    provider?: "" | "busuanzi";
    /**
     * 是否开启首页的访问量和排名统计
     *
     * @default true
     */
    siteView?: boolean;
    /**
     * 是否开启文章页的浏览量统计
     *
     * @default true
     */
    pageView?: boolean;
    /**
     * 是否开启重试机制，当获取访问量失败会尝试重新获取
     *
     * @default false
     */
    iteration?: 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, currentValue?: string | number) => 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;
  /**
   * 是否显示在站点信息
   *
   * @default true
   */
  show?: boolean;
}

提示

如果想开启访问量、访客数统计，请使用 statistics 配置项，目前支持 busuanzi 统计方式。

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

• originValue：站点信息卡片的原始值，如创建时间为 2021-10-19
• currentValue：站点信息卡片当前渲染的值，如创建时间渲染的值为 N 天前

比如想将 文章数目 改为 文章总数目：

config.ts

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

const teekConfig = defineTeekConfig({
  docAnalysis: {
    overrideInfo: [{ key: "totalPosts", label: "文章总数目" }],
  },
});

比如想隐藏最后活动时间：

config.ts

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

const teekConfig = defineTeekConfig({
  docAnalysis: {
    overrideInfo: [{ key: "lastActiveTime", show: false }],
  },
});

key 可选值如下：

• totalPosts：文章总数
• weekAddNum：近一周新增
• monthAddNum：近一月新增
• runtime：已运行时间
• totalWordCount：本站总字数
• lastActiveTime：最后活动时间
• viewCount：本站被访问了
• visitCount：本站曾来访过