卡片栏配置
homeCardSort
- 类型:
("topArticle" | "category" | "tag" | "friendLink" | "docAnalysis")[]
- 默认值:
["topArticle", "category", "tag", "friendLink", "docAnalysis"]
首页卡片的位置排序,当设置了 homeCardSort
但没有全部补全内容,Teek 会将剩余内容按照 homeCardSort
的顺序进行添加。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
homeCardSort: ["topArticle", "category", "tag", "friendLink", "docAnalysis"],
});
yaml
---
tk:
homeCardSort:
- topArticle
- category
- tag
- friendLink
- docAnalysis
---
tagColor v1.1.5
- 类型:
string[]
- 默认值:
json
[
{ "border": "#bfdbfe", "bg": "#eff6ff", "text": "#2563eb" },
{ "border": "#e9d5ff", "bg": "#faf5ff", "text": "#9333ea" },
{ "border": "#fbcfe8", "bg": "#fdf2f8", "text": "#db2777" },
{ "border": "#a7f3d0", "bg": "#ecfdf5", "text": "#059669" },
{ "border": "#fde68a", "bg": "#fffbeb", "text": "#d97706" },
{ "border": "#a5f3fc", "bg": "#ecfeff", "text": "#0891b2" },
{ "border": "#c7d2fe", "bg": "#eef2ff", "text": "#4f46e5" }
]
标签背景色,用于精选文章卡片的 top + sticky
功能和标签卡片的标签,背景色按顺序显示。
当在文章页的 frontmatter
配置时,如果颜色值有 #
号时请添加引号。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
bgColor: ["#e74c3c", "#409EFF", "#DAA96E", "#0C819F", "#27ae60", "#ff5c93", "#fd726d", "#f39c12", "#9b59b6"],
});
yaml
---
tk:
bgColor:
- "#e74c3c"
- "#409EFF"
- "#DAA96E"
- "#0C819F"
- "#27ae60"
- "#ff5c93"
- "#fd726d"
- "#f39c12"
- "#9b59b6"
---
blogger
博主信息,显示在首页左边第一个卡片。
ts
// .vitepress/config.mts
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 可支持鼠标悬停旋转,circle-rotate-last 将会持续旋转 59s
},
});
yaml
---
tk:
blogger:
name: 天客
avatar: https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png
slogan: 朝圣的使徒,正在走向编程的至高殿堂!
shape: square
---
ts
interface Blogger {
/**
* 博主昵称
*/
name: string;
/**
* 博主头像
*/
avatar: string;
/**
* 博主签名
*/
slogan?: string;
/**
* 头像风格:square 为方形头像,circle 为圆形头像,circle-rotate 可支持鼠标悬停旋转,circle-rotate-last 将会持续旋转 59s
*
* @default 'square'
*/
shape?: TkAvatarProps["shape"] | "circle-rotate";
/**
* 背景图片地址,仅当 shape 为 circle 相关值时有效
*
* @since v1.1.5
*/
circleBgImg?: string;
}
topArticle
精选文章卡片配置。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
topArticle: {
enabled: true, // 是否启用精选文章卡片
limit: 5, // 一页显示的数量
autoPage: false, // 是否自动翻页
pageSpeed: 4000, // 翻页间隔时间,单位:毫秒。autoPage 为 true 时生效
dateFormat: "yyyy-MM-dd hh:mm:ss", // 精选文章的日期格式
},
});
yaml
---
tk:
topArticle:
enabled: true
limit: 5
autoPage: false
pageSpeed: 4000
---
ts
import type { VpRouter } from "@teek/composables";
interface TopArticle {
/**
* 是否启用精选文章卡片
*
* @default true
*/
enabled?: boolean;
/**
* 首页卡片标题
*
* @default '${icon}精选文章'
*/
title?: string | ((icon: string) => string);
/**
* 精选文章为空时的标签
*
* @default '暂无精选文章'
*/
emptyLabel?: string;
/**
* 一页显示的数量
*
* @default 5
*/
limit?: number;
/**
* 是否自动翻页
*
* @default false
*/
autoPage?: boolean;
/**
* 翻页间隔时间,单位:毫秒。autoPage 为 true 时生效
*
* @default 4000 (4秒)
*/
pageSpeed?: number;
/**
* 精选文章的日期格式
*
* @default 'yyyy-MM-dd hh:mm:ss'
*/
dateFormat?: "yyyy-MM-dd" | "yyyy-MM-dd hh:mm:ss" | ((date: number | string) => string);
/**
* 点击标题时触发,可以通过 router.go 跳转到其他页面,也可以通过 window.open 打开新窗口
*
* @since v1.1.2
*/
titleClick?: (router: VpRouter) => void;
}
category
分类卡片配置。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
category: {
enabled: true, // 是否启用分类卡片
limit: 5, // 一页显示的数量
autoPage: false, // 是否自动翻页
pageSpeed: 4000, // 翻页间隔时间,单位:毫秒。autoPage 为 true 时生效
},
});
yaml
---
tk:
category:
enabled: true
limit: 5
autoPage: false
pageSpeed: 4000
---
ts
interface Category {
/**
* 是否启用分类卡片
*
* @default true
*/
enabled?: boolean;
/**
* 分类页访问地址
*
* @default '/categories'
*/
path?: string;
/**
* 分类页卡片标题
*
* @default '${icon}全部分类'
*/
pageTitle?: string | ((icon: string) => string);
/**
* 首页卡片标题
*
* @default '${icon}文章分类'
*/
homeTitle?: string | ((icon: string) => string);
/**
* 查看更多分类标签
*
* @default '更多 ...'
*/
moreLabel?: string;
/**
* 分类为空时的标签
*
* @default '暂无文章分类'
*/
emptyLabel?: string;
/**
* 一页显示的数量
*
* @default 5
*/
limit?: number;
/**
* 是否自动翻页
*
* @default false
*/
autoPage?: boolean;
/**
* 翻页间隔时间,单位:毫秒。autoPage 为 true 时生效
*
* @default 4000 (4秒)
*/
pageSpeed?: number;
}
tag
标签卡片配置。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
tag: {
enabled: true, // 是否启用标签卡片
limit: 21, // 一页显示的数量
autoPage: false, // 是否自动翻页
pageSpeed: 4000, // 翻页间隔时间,单位:毫秒。autoPage 为 true 时生效
},
});
yaml
---
tk:
tag:
enabled: true
limit: 5
autoPage: false
pageSpeed: 4000
---
ts
interface Tag {
/**
* 是否启用标签卡片
*
* @default true
*/
enabled?: boolean;
/**
* 标签页访问地址
*
* @default '/tags'
*/
path?: string;
/**
* 标签页页卡片标题
*
* @default '${icon}全部标签'
*/
pageTitle?: string | ((icon: string) => string);
/**
* 首页卡片标题
*
* @default '${icon}热门标签'
*/
homeTitle?: string | ((icon: string) => string);
/**
* 查看更多分类标签
*
* @default '更多 ...'
*/
moreLabel?: string;
/**
* 标签为空时的标签
*
* @default '暂无标签'
*/
emptyLabel?: string;
/**
* 一页显示的数量
*
* @default 21
*/
limit?: number;
/**
* 是否自动翻页
*
* @default false
*/
autoPage?: boolean;
/**
* 翻页间隔时间,单位:毫秒。autoPage 为 true 时生效
*
* @default 4000 (4秒)
*/
pageSpeed?: number;
}
friendLink
友情链接卡片配置。
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
friendLink: {
enabled: true, // 是否启用友情链接卡片
list: [
{
name: "Teeker",
desc: "朝圣的使徒,正在走向编程的至高殿堂!",
avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png",
link: "http://notes.teek.top/",
},
{
name: "vuepress-theme-vdoing",
desc: "🚀一款简洁高效的VuePress 知识管理&博客 主题",
avatar: "https://doc.xugaoyi.com/img/logo.png",
link: "http://notes.teek.top/",
},
{
name: "vuepress-theme-vdoing",
desc: "🚀一款简洁高效的VuePress 知识管理&博客 主题",
avatar: "https://doc.xugaoyi.com/img/logo.png",
link: "https://doc.xugaoyi.com/",
},
{
name: "One",
desc: "明心静性,爱自己",
avatar: "https://onedayxyy.cn/img/xyy-touxiang.png",
link: "https://onedayxyy.cn/",
},
{
name: "Hyde Blog",
desc: "人心中的成见是一座大山",
avatar: "https://teek.seasir.top/avatar/avatar.webp",
link: "https://teek.seasir.top/",
},
{
name: "二丫讲梵",
desc: "💻学习📝记录🔗分享",
avatar: "https://wiki.eryajf.net/img/logo.png",
link: " https://wiki.eryajf.net/",
},
], // 友情链接数据列表
limit: 5, // 一页显示的数量
autoScroll: false, // 是否自动滚动
scrollSpeed: 2500, // 滚动间隔时间,单位:毫秒。autoScroll 为 true 时生效
autoPage: false, // 是否自动翻页
pageSpeed: 4000, // 翻页间隔时间,单位:毫秒。autoPage 为 true 时生效
},
});
yaml
---
tk:
friendLink:
enabled: true
list:
- name: 测试1
desc: 这是一个友链测试1
avatar: /img/bg1.jpg
link: https://github.com/Kele-Bingtang
- name: 测试2
desc: 这是一个友链测试2222111啊
avatar: /img/ui.png
limit: 5
autoScroll: false
scrollSpeed: 2500
autoPage: false
pageSpeed: 4000
---
ts
import type { VpRouter } from "vitepress-theme-teek";
interface FriendLink {
/**
* 是否启用友情链接卡片
*
* @default true
*/
enabled?: boolean;
/**
* 友情链接数据列表
*/
list?: {
/**
* 友链名称
*/
name: string;
/**
* 友链头像
*/
avatar?: string;
/**
* 友链描述
*/
desc?: string;
/**
* 友链链接
*/
link?: string;
/**
* img 标签的 alt
*
* @default name
*/
alt?: string;
}[];
/**
* 首页卡片标题
*
* @default '${icon}友情链接'
*/
title?: string | ((icon: 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;
/**
* 点击标题时触发,可以通过 router.go 跳转到其他页面,也可以通过 window.open 打开新窗口
*
* @since v1.1.2
*/
titleClick?: (router: VpRouter) => void;
}
docAnalysis
站点信息卡片配置。
ts
// .vitepress/config.mts
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,
},
overrideInfo: [
{
key: "lastActiveTime",
label: "活跃时间",
value: (_, currentValue) => (currentValue + "").replace("前", ""),
show: true,
},
],
appendInfo: [{ key: "index", label: "序号", value: "天客 99" }],
},
});
yaml
---
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"
---
ts
interface DocAnalysis {
/**
* 是否启用站点信息卡片
*
* @default true
*/
enabled?: boolean;
/**
* 首页卡片标题
*
* @default '${icon}站点信息'
*/
title?: string | ((icon: string) => string);
/**
* 项目创建时间
*/
createTime?: string;
/**
* 是否开启文章页的字数统计
*
* @default true
*/
wordCount?: boolean;
/**
* 是否开启文章页的阅读时长统计
*
* @default true
*/
readingTime?: boolean;
/**
* 访问量、访客数统计配置
*/
statistics?: {
/**
* 统计服务提供商
*
* @default ''
*/
provider?: "" | "busuanzi";
/**
* 是否开启首页的访问量和排名统计
*
* @default true
*/
siteView?: boolean;
/**
* 是否开启文章页的浏览量统计
*
* @default true
*/
pageView?: boolean;
/**
* 如果请求不蒜子接口失败,是否重试,类型 boolean
*
* @default false
*/
tryRequest?: boolean;
/**
* 重试次数,仅当 tryRequest 为 true 时有效
*
* @default 5
*/
tryCount?: number;
/**
* 重试间隔时间,单位毫秒,仅当 tryRequest 为 true 时有效
*
* @default 2000
*/
tryIterationTime?: number;
/**
* 是否只统计永久链接的浏览量,如果为 false,则统计 VitePress 默认的文档目录链接
*
* @default true
*/
permalink?: boolean;
};
/**
* 自定义现有信息
* 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 天前
比如想将 文章数目
改为 文章总数目
:
ts
// .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
docAnalysis: {
overrideInfo: [{ key: "totalPosts", label: "文章总数目" }],
},
});
比如想隐藏最后活动时间:
ts
// .vitepress/config.mts
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
:本站曾来访过