跳到主要内容

配置首页风格

最后更新于:

配置首页风格

(修改首页风格为2种风格同时存在)

版权

作者指导,自己测试。

环境

配置环境:

Youbg Kbt》大佬开源的《vitepress-theme-teek》一个博客项目(知识库+博客 二合一),它是一个轻量、简易的VitePress主题框架,非常简约唯美,且也在持续迭代更新,感谢大佬开源的这款优秀产品,大佬威武。💖💖💖

风格1:同时具备网站和文档风格(正在使用)

(1)将demo\docs-base\index.md文件做个备份,然后把docs\index.md文件拷贝到demo\docs-base\,进而替换掉老的index.md文件,

同时,将tkHome的值改为true

具体代码:

编辑demo\docs-base\index.md文件:

image-20250312063928646

(2)编辑demo\docs-base\.vitepress\theme\index.ts文件,取消注释如下一行代码

 1import Teeker from "vitepress-theme-teek";
 2import NoticeContent from "./components/NoticeContent.vue";
 3import { defineComponent, h, nextTick, watch } from "vue";
 4import { useData } from "vitepress";
 5// import "vitepress-theme-teek/index.css";
 6import "vitepress-theme-teek/vp-plus/code-block-mobile.scss";
 7import "vitepress-theme-teek/vp-plus/sidebar.scss";
 8import "vitepress-theme-teek/vp-plus/nav.scss";
 9import "vitepress-theme-teek/vp-plus/aside.scss";
10import "vitepress-theme-teek/vp-plus/doc-h1.scss";
11import "vitepress-theme-teek/vp-plus/nav-blur.scss";
12import "vitepress-theme-teek/vp-plus/container.scss";
13import "vitepress-theme-teek/vp-plus/container-flow.scss";
14import "vitepress-theme-teek/vp-plus/blockquote.scss";
15import "vitepress-theme-teek/vp-plus/rainbow.scss";

image-20250316160043120

(3)编辑demo\docs-base\.vitepress\config.mts文件banner内容:

具体代码

编辑demo\docs-base\.vitepress\config.mts文件:

image-20250323063942590

风格2:网站风格

作者demo/docs-base风格。

详情

编辑demo\docs-base\index.md文件:

风格3:文档风格

作者docs风格。

详情

编辑docs\index.md文件:
最新文章

文档导航