开发指南
开发指南 开发环境 | 类型 | 名称 | 版本 | | :------------ | :---------------- | :--------------- | | 操作系统 | Windows 11 专业版 | 26100.3476 | | 开发工具 | Microsoft VS Code | 1.96.2 | | 调试工具 | Microsoft Edge |...
51.Teek
2025年9月28日
浏览量：--
共找到 39 篇文章
显示 30 / 39 篇文章
frontmatter 配置
frontmatter 配置 frontmatter 支持基于页面的配置。在每个 Markdown 文件中，可以使用 frontmatter 配置来覆盖 主题配置 中的大部分选项。 首页配置 description Teek 提供了 description 选项，用于在首页 Banner 展示一些描述信息，您可以通过 tk.description 或者 tk.banner.description...
私密文章
私密文章 私密文章需要一个登录页进行登录，如果你想先体验登录页的效果，在导航栏 功能页 -> 登录页 点击查看。 您也可以通过 teek-login-page 插槽自定义登录页。 `vue import Teek from "vitepress-theme-teek"; import Your Login Page Component from "./Your Login Page...
功能页配置
功能页配置 私密文章（登录页） 什么是登录页？在导航栏 功能页 -> 登录页 点击查看效果。 您可以通过 teek-login-page 插槽自定义登录页。 使用登录页需要 2 个步骤： - 创建一个登录页，如何创建请看 登录页 - 开启私密文章监听 `ts // .vitepress/config.mts import { define Teek Config } from...
站点统计
站点统计 Teek 集成了三种常见的站点统计工具： - 百度分析 Baidu Analytics - 谷歌分析 Google Analytics - Umami 分析 让你可以轻松地在 Vite Press 网站中集成并管理这些分析工具。无论是谷歌分析的强大功能，还是百度统计对中国市场的适配，或者是 Umami 的隐私友好型方案，都可以通过这个插件快速集成并使用。 百度统计 `ts //...
开发技巧
开发技巧 介绍 Teek 开发路程的一些技巧。 规范 Teek 建议在进行项目开发时，一个文件的代码行数推荐 300 行以下，最好不超过 500 行，禁止超过 1000 行。 如果超过 300+ 行，应该考虑下是否可以拆分为多个文件，这是一个良好的 结构化思维和分治思维。 ::: tip Teek 建议您在开发前先思考有哪些模块，然后分别创建模块文件，而不是先在一个文件写完，再拆分。 :::...
路由钩子
路由钩子 Vite Press 提供的 use Router 有 4 个路由钩子，分别为： - on Before Route Change：路由变化前触发，如果在该钩子函数中返回 false，则不会进行路由跳转 - on Before Page Load：页面加载前执行，在 on Before Route Change 之后触发，如果在该钩子函数中返回 false，则不会进行路由跳转 - on...
贡献指南
感谢您使用 Teek。 以下是关于向 Teek 提交反馈或代码的指南。在向 Teek 提交 Issue 或者 PR 之前，请先花几分钟时间阅读以下内容。 Issue 规范 - 遇到问题时，请先确认这个问题是否已经在 Issue 中有记录或者已被修复 - 提 Issue 时，请用简短的语言描述遇到的问题，并添加出现问题时的环境和复现步骤，必要时需提供可复现问题最小代码仓库 环境包含 - 浏览器...
鸣谢
鸣谢 本文记录 Teek 在成长过程中帮忙测试、开发的小伙伴们，以及 Teek 参考的其他优质 Vite Press、Vue Press 主题，感谢你们让 Teek 更加优秀。 主题 Teek 的灵感主要来自于 vuepress-theme-vdoing，在 Vite Press 没有出来之前，Teek 使用 vuepress-theme-vdoing 搭建的博客站，因此 Teek 含有...
样式增强
样式增强 Teek 提供了一些样式文件来加强 Vite Press 和 Teek 的样式，比如： > Vite Press 文档风格首页添加彩色渐变动画、文章一级标题添加渐变色、Banner 描述添加渐变效果、侧边栏标题组字号加粗等。 > Teek 首页 Banner 描述添加渐变效果、首页 Banner 壁纸添加缩放动画等 这些样式文件并不会直接生效，您需要手动引入这些文件。 Vite...
主题配置
主题配置 在主题开发中，往往需要提供一些配置来丰富主题的功能，最简单的是和 Vite Press 的 theme Config 配置合在一起： `ts {8} // .vitepress/config.mts import { define Config } from "vitepress"; export default define Config({ // ... theme Config:...
样式布局
样式布局 样式与组件分离 Teek 并没有和普通的 Vue 项目一样，使用如下模板进行编写组件： `vue // 组件逻辑 / 组件样式 / ` 而是使用： `vue // 组件逻辑 ` 那么组件样式去哪里了呢？ Teek 专门创建 theme-chalk/src/components 目录用于存放组件样式，然后将所有的组件样式汇总到一个 index.scss（入口样式文件），最后在...
Vite 插件
Vite 插件 Vite Press 处于 Vite 环境下，因此天然支持 Vite 插件。 Teek 有过一个想法，那就是将所有功能完全插件化，通过 NPM 下载各个插件来合并成主题： - 目录页插件 - 归档页插件 - 文章信息插件 - Footer 插件 - ... 这完全是可行的，每个插件都是独立的，支持任何 Vite Press 项目。 但是目前没有太多精力去实现这个计划，您可以通过...
目录结构
目录结构 Teek 的目录结构如下： `sh packages. ├─ components 组件目录，具体内容请看「组件布局的目录结构」 ├─ config 配置文件目录，在 .vitepress/config.mts 文件中引入 ├─ helper 工具类目录 ├─ composables composables 目录 ├─ locale 国际化文件目录 ├─ markdown...
组件结构
组件结构 一个项目的功能组件虽然有很多，但是入口组件只有一个，如果您不知道这些功能组件都在哪里执行，不妨从入口组件开始解读，一步一步往下延伸，最终把项目功能吃透。 Teek 在首页、文章页、空白页、全局都写了组件来实现功能，但是这些组件并不是分开引入，而是统一在 Layout 组件里引入，并派发到 Vite Press 不同的插槽，如： `vue import Default Theme...
容器自定义
容器自定义 Teek 提供了两种创建容器的 API，这两种容器 Teek 分别命名为 Simple 容器、Card 容器。 Teek 容器都有哪些？请看 Markdown 拓展。 容器 API 请看 Markdown 插件工具 Simple 容器 Vite Press 的 info、tip、warning、danger 容器都是 Simple 容器，其原理是添加 div 来包裹 Markdown...
插槽布局
插槽布局 Teek 提供了很多的插槽，能够被用来在页面的特定位置注入内容，下面这个例子展示了将一个组件注入到首页右侧卡片栏底部： `ts // .vitepress/theme/index.ts import Teek from "vitepress-theme-teek"; import My Layout from "./My Layout.vue"; import...
开发思路
开发思路 ::: note 摘要 只要会编写 Vue 组件，那么就可以发挥您天马行空的想象力，来构建自己的主题。 ::: right 2025-03-17 @Teek ::: 本系列为 主题开发，主要介绍 Teek 的开发思路，当然这只是提供思路，不会细到每一个文件的逻辑讲解。 在阅读完本系列内容后，您可以去阅读 Teek 的源码，了解 Teek 的实现思路，也许对您的主题开发之路有些帮助。...
全局配置
全局配置 全局配置是影响范围较广的配置。 teek Theme - 类型：boolean - 默认值：true 是否启用主题，如果为 false，则不会启用主题的 99% 功能，只保留如下功能： - 自动添加侧边栏 - 自动添加一级标题 - 自动添加永久链接 - 文档内容分析（作者、创建时间、文章字数、预计阅读时间等信息） - 锚点滚动 - 深色/浅色模式过渡动画 ::: tip...
Banner 配置
Banner 配置 banner 首页 Banner 配置，位于首页顶部。 ::: tip 在首页 index.md 的 frontmatter 中，description 配置项除了 tk.banner.description 设置，也可以使用 tk.description 设置。 ::: ::: code-group `ts [config.mts] //...
文章列表配置
文章列表配置 post 文章列表配置。 ::: code-group `ts [config.mts] // .vitepress/config.mts import { define Teek Config } from "vitepress-theme-teek/config"; const teek Config = define Teek Config({ post: { post...
卡片栏配置
卡片栏配置 home Card Sort - 类型：("top Article" | "category" | "tag" | "friend Link" | "doc Analysis")[] - 默认值：["top Article", "category", "tag", "friend Link", "doc Analysis"] 首页卡片的位置排序，当设置了 home Card Sort...
页脚配置
页脚配置 social 社交信息配置，通常为一个社交图标，点击后将会跳转到社交软件的个人主页。 ::: tip social 在卡片栏的博主信息区和页脚都会生效。 ::: ::: code-group `ts [config.mts] // .vitepress/config.mts import { define Teek Config } from...
文章配置
文章配置 article Analyze 文章信息分析配置，分别作用在首页和文章页。 ::: tip 如果在 config.mts 中配置，则首页和文章页都生效。 文章页的图片点击可以预览，但是当图片元素的 class 里存在 no-preview，则不会触发预览，这对于兼容 Teek 的图片相关插件有所帮助。 ::: ::: code-group `ts [config.mts] //...
评论配置
comment 评论配置，目前内置 Giscus、Twikoo、Waline、Artalk 四种评论插件。 ::: tip 支持每个文章页配置不同的在评论区提供者 provider。 ::: ::: code-group `ts [config.mts] // .vitepress/config.mts import { define Teek Config } from...
插件配置
插件配置 vite Plugins 内置 Vite 插件配置。 Teek 内置的 Vite 插件详细介绍请看 Vite 插件。 ::: code-group `ts [config.mts] // .vitepress/config.mts import { define Teek Config } from "vitepress-theme-teek/config"; const teek...
摘要与封面
摘要与封面 首页的文章列表中，可以显示文章摘要和封面图。 文章摘要 文章摘要的设置有三种方式： - 使用 frontmatter.description 属性 - 使用 注释 - 使用 post.show Capture 属性 如果三种方式都设置，只有一种生效，优先级为：使用 frontmatter.description 属性 > 使用 注释 > 使用 post.show Capture 属性...
主题增强
主题增强 Teek 内置了 4 种布局模式、8 种主题风格可供切换，请将鼠标移到右上角的主题增强面板进行体验。 布局模式 4 种布局模式分别为： - full Width：全部展开，使侧边栏和内容区域占据整个屏幕的全部宽度 - sidebar Width Adjustable Only：全部展开，侧边栏宽度可调，但内容区域宽度不变，调整后的侧边栏将可以占据整个屏幕的最大宽度 - both...
写作排版
写作排版 ::: tip 序言 统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质 ::: 空格 「有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。 与大家共勉之。 ::: right ——...
主题增强拓展
主题增强拓展 在 主题增强 中介绍了主题风格的使用，而不同的用户有不同的审美需求，因此 Teek 支持用户修改自带的主题模式，也可以拓展全新的主题模式。 主题风格 主题风格修改 Teek 使用 Vite Press 的 css var 变量来实现主题风格。当切换尺寸时，Teek 会修改 html 标签的 theme-color 属性，进而改变 css var 变量，从而达到修改主题风格的效果。...