00:00:00
📘 Teek 主题文档与 Markdown 扩展语法指南
一、图片插入与语法
1. 基本语法
Markdown 图片语法和链接类似，只是前面多了一个感叹号 !：
markdown
示例：
markdown
📌 区别说明：
![ ]→ 表示"插入图片"；[ ]→ 表示"插入超链接"。
2. 使用变量引用图片
可以像链接一样对图片地址使用变量：
markdown
![示例图片][img]
[img]: /assets/example.png这样方便在文档中统一管理图片路径。
3. 设置图片宽高
Markdown 语法本身不支持设置图片大小，可用 HTML <img> 标签实现：
html
<img src="https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png" width="50px" height="30px">预览：
<img src="https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png" width="50px" height="30px">
二、视频插入语法
Teek 主题扩展了自定义的 ::: video 语法块，用于多平台或自定义视频嵌入。
1. 哔哩哔哩（Bilibili）
markdown
::: video bilibili
BV11e411m7e8
:::2. 外部链接视频
markdown
::: video
https://b23.tv/jyTyw3h
:::3. 本地视频
markdown
::: video
/video/1.mp4
:::三、首页主题配置（Frontmatter）
可以在首页的 index.md 的 frontmatter 中覆盖 .vitepress/config.ts 中的主题配置：
配置项 功能说明
banner 首页横幅 topArticle 精选文章 category 分类展示 tag 标签展示 friendLink 友情链接 docAnalysis 站点分析 post 文章列表 article 文章信息（作者、创建时间、分类、标签等） page 分页设置
示例：
yaml
---
tk.banner: true
tk.topArticle: true
tk.friendLink: false
---📘 说明：
tk.前缀优先级最高；- 不带
tk.也可生效，但优先级较低。
四、文章页配置（Frontmatter）
用于覆盖文章页级别的主题功能。
选项 类型 默认值 说明
author string - 作者信息 article boolean true 是否显示文章信息（作者、时间等） breadcrumb boolean true 是否显示面包屑导航 articleShare boolean true 是否启用文章分享 appreciation boolean true 是否显示赞赏功能
五、文章配置扩展选项
配置项 类型 默认值 说明
title string 文件名 页面标题，可含 HTML 标签
date string - 文章创建时间
permalink string - 页面永久链接（vitepress-plugin-permalink）
categories string[] - 分类信息
tags string[] - 标签信息
titleTag string - 标题标记（如"原创"、"推荐"）
top boolean false 是否为精选文章（显示在首页精选卡片）
sticky number - 文章置顶权重（越大越靠前）
sidebar boolean true 是否显示侧边栏
article boolean true 是否为文章页（false 表示为自定义页）
comment boolean true 是否开启评论
description string - 文章摘要
coverImg string - 封面图片
inCatalogue boolean true 是否纳入目录页（vitepress-plugin-catalogue）
docAnalysis boolean true 是否参与站点分析统计
autoTitle boolean true 自动生成一级标题（vitepress-plugin-md-h1）
articleUpdate boolean true 是否显示"最近更新"栏
inHomePost boolean true 是否在首页文章列表显示
articleBanner boolean true 是否显示文章页 Banner 栏（无侧边栏时生效）
coverColor string "" Banner 背景色
六、综合示例
yaml
---
title: "VitePress + Teek 使用指南"
date: "2025-10-08"
categories: ["教程"]
tags: ["VitePress", "Teek", "主题配置"]
titleTag: "原创"
top: true
sticky: 1
sidebar: true
comment: true
coverImg: "/img/cover/vitepress.png"
description: "详细介绍 VitePress Teek 主题的图片、视频与 Frontmatter 配置用法"
inCatalogue: true
articleBanner: true
coverColor: "#84d2ff"
---
评论