本站-文章
这里主要记录关于文章页面的一些配置，例如 Front Matter，文章评论，文章目录。
Front Matter
如果你新写的文章没有添加 Front Matter，那么每次本地运行 Teek 会自动帮你填充，生成包括 date，title，permalink，categories 四项内容。
categories
- 如果当前
categories的值为空，Teek 会进行填充- 如果你的文章位于一级文件夹里，那么
categories就取值当前文件夹的名称 - 如果你的文章位于二级文件夹里，那么
categories就取值当前两级文件夹的名称（一级和二级都生成）
- 如果你的文章位于一级文件夹里，那么
- 如果当前
categories不会空，Teek 不会进行填充
文章评论
Twikoo 的配置分为两个部分，后端和前端。
- 后端部署在 Vercel 上面，细节不再详述。
- 前端属于 Teek 已经内置的配置项，直接在
config.mts按照文档配置即可。
文章目录
文章右侧的导航目录，这个组件在 VitePress 官方文档内称作「大纲」。该组件的样式归属 VitePress 的默认主题，在 .vitepress/config.mts 内的 defineConfig.outline 属性进行配置，详情请参考 VitePress 默认主题配置。
ts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";
// Teek 主题配置
const teekConfig = defineTeekConfig({
pageStyle: "segment-nav",
author: { name: "Alowree", link: "https://github.com/Alowree" },
banner: {
enabled: true,
name: "MaraPython", // Banner 标题，默认读取 vitepress 的 title 属性
bgStyle: "fullImg", // Banner 背景风格：pure 为纯色背景，partImg 为局部图片背景，fullImg 为全屏图片背景
pureBgColor: "#28282d", // Banner 背景色，bgStyle 为 pure 时生效
imgSrc: ["/img/banner-bg1.jpg", "/img/banner-bg2.jpg"], // Banner 图片链接。bgStyle 为 partImg 或 fullImg 时生效
imgInterval: 15000, // 当多张图片时（imgSrc 为数组），设置切换时间，单位：毫秒
imgShuffle: false, // 图片是否随机切换，为 false 时按顺序切换，bgStyle 为 partImg 或 fullImg 时生效
imgWaves: true, // 是否开启 Banner 图片波浪纹，bgStyle 为 fullImg 时生效
mask: true, // Banner 图片遮罩，bgStyle 为 partImg 或 fullImg 时生效
maskBg: "rgba(0, 0, 0, 0.4)", // Banner 遮罩颜色，如果为数字，则是 rgba(0, 0, 0, ${maskBg})，如果为字符串，则作为背景色。bgStyle 为 partImg 或 fullImg 且 mask 为 true 时生效
textColor: "#ffffff", // Banner 字体颜色，bgStyle 为 pure 时为 '#000000'，其他为 '#ffffff'
titleFontSize: "3.2rem", // 标题字体大小
descFontSize: "1.4rem", // 描述字体大小
descStyle: "types", // 描述信息风格：default 为纯文字渲染风格（如果 description 为数组，则取第一个），types 为文字打印风格，switch 为文字切换风格
description: [
"Your time is limited, so don’t waste it living someone else’s life. — Steve Jobs",
"The way to get started is to quit talking and begin doing. — Walt Disney",
"I find that the harder I work, the more luck I seem to have. — Thomas Jefferson",
"Don’t watch the clock; do what it does. Keep going. — Sam Levenson",
"Strive not to be a success, but rather to be of value. — Albert Einstein",
"It always seems impossible until it’s done. — Nelson Mandela",
"You miss 100% of the shots you don’t take. — Wayne Gretzky",
"Dream big and dare to fail. — Norman Vaughan",
"Do one thing every day that scares you. — Eleanor Roosevelt",
], // 描述信息
switchTime: 4000, // 描述信息切换间隔时间，单位：毫秒。descStyle 为 switch 时生效
switchShuffle: false, // 描述信息是否随机切换，为 false 时按顺序切换。descStyle 为 switch 时生效
typesInTime: 100, // 输出一个文字的时间，单位：毫秒。descStyle 为 types 时生效
typesOutTime: 50, // 删除一个文字的时间，单位：毫秒。descStyle 为 types 时生效
typesNextTime: 800, // 打字与删字的间隔时间，单位：毫秒。descStyle 为 types 时生效
typesShuffle: false, // 描述信息是否随机打字，为 false 时按顺序打字，descStyle 为 types 时生效
},
post: {
postStyle: "list", // 文章列表风格
excerptPosition: "top", // 文章摘要位置
showMore: false, // 是否显示更多按钮
moreLabel: "阅读全文 >", // 更多按钮文字
coverImgMode: "default", // 文章封面图模式
showCapture: true, // 是否在摘要位置显示文章部分文字，当为 true 且不使用 frontmatter.describe 和 <!-- more --> 时，会自动截取前 400 个字符作为摘要
},
page: {
pageSize: 20,
},
blogger: {
name: "Alowree", // 博主昵称
avatar: "/img/blogger-avatar.jpg", // 博主头像
slogan: "道阻且长，行则将至；行而不辍，未来可期", // 博主签名
shape: "square", // 头像风格：square 为方形头像，circle 为圆形头像，circle-rotate 可支持鼠标悬停旋转
},
docAnalysis: {
createTime: "2021-10-19",
statistics: {
provider: "busuanzi",
},
},
vitePlugins: {
autoFrontmatter: true,
autoFrontmatterOption: {
globOptions: {
ignore: ["**/00.目录页/**", "**/*目录.md"],
},
},
sidebarOption: {
collapsed: true, // 打开侧边栏 收缩/展开 功能
},
},
codeBlock: {
disabled: false, // 是否禁用新版代码块
collapseHeight: 700, // 超出高度后自动折叠，设置 true 则默认折叠，false 则默认不折叠
copiedDone: (TkMessage: Message) => TkMessage.success("复制成功！"),
},
articleShare: { enabled: true },
comment: {
provider: "twikoo", // 评论区提供者
options: {
envId: "https://twikoo.marapython.com",
},
},
footerInfo: {
copyright: {
createYear: 2021,
suffix: "MaraPython",
},
customHtml: `<span id="runtime"></span>`, // 搭配 .vitepress/theme/helper/useRuntime.ts 使用
},
});
// https://vitepress.dev/reference/site-config
export default defineConfig({
// 1. Features and Functions offered by VitePress
title: "MaraPython",
description: "A VitePress Site",
head: [
[
"link",
{
rel: "icon",
type: "image/png",
sizes: "32x32",
href: "/img/favicon.ico",
},
],
// [
// "link",
// {
// rel: "icon",
// type: "image/png",
// sizes: "16x16",
// href: "/favicon/favicon-180x180.png",
// },
// ],
// import font-awesome so you could use its icons on your website
[
"link",
{
rel: "stylesheet",
href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css",
},
],
],
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
logo: "/favicon/logo.png",
nav: [
{ text: "首页", link: "/" },
{
text: "前端",
items: [
{ text: "HTML", link: "/pages/76b51d" },
{ text: "CSS", link: "/pages/79c1f6" },
{
text: "JavaScript",
link: "/08.frontend/03.javascript/01.语法基础.md",
},
{
text: "文章",
items: [
{ text: "分类", link: "/categories/" },
{ text: "标签", link: "/tags/" },
{ text: "归档", link: "/archives/" },
],
},
],
},
{
text: "关于",
items: [
{ text: "本站", link: "/site/intro" },
{ text: "开始", link: "/site/start" },
{ text: "写作", link: "/site/compose" },
{
text: "文章",
items: [
{ text: "分类", link: "/categories/" },
{ text: "标签", link: "/tags/" },
{ text: "归档", link: "/archives/" },
{ text: "清单", link: "/articleOverview/" },
],
},
],
},
],
// sidebar: [
// {
// text: "Examples",
// items: [
// { text: "Markdown Examples", link: "/markdown-examples" },
// { text: "Runtime API Examples", link: "/api-examples" },
// ],
// },
// ],
socialLinks: [
{ icon: "github", link: "https://github.com/Alowree/marapython-teek" },
],
search: {
provider: "local",
},
设置之后，文章的导航目录将只显示 H2-H4 标题。