--- theme: channing-cyan highlight: agate --- 参考链接
[VitePress 快速上手中文教程](https://vitepress.yiov.top/) —— 主要就是参考着人家做的
以下优化是我个人觉得喜欢的，上面这个链接是真的很全面，你肯定能找到自己喜欢的配置
[Demo](https://swkende.github.io/vitepress-doc/) —— 这是文章中的 demo ### 准备工作首先我们要新建文件和目录，目录结构参考这个图片，内容我们先保留为空 ![新建目录结构.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9a1a232b806c4484b19d88779d1d6f34~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=2V7OfELl6RHOZIuFNkXWwhWUt8A%3D) > 接下来复制粘贴以下内容到对应的文件中，注意文件名 ```css [var.css] /* var.css */ :root { --vp-c-brand-1: #18794e; --vp-c-brand-2: #299764; --vp-c-brand-3: #30a46c; } .dark { --vp-c-brand-1: #3dd68c; --vp-c-brand-2: #30a46c; --vp-c-brand-3: #298459; } /* 以前的vp-c-brand已弃用 */ :root { /* hero标题渐变色 */ --vp-home-hero-name-color: transparent; --vp-home-hero-name-background: -webkit-linear-gradient( 120deg, #bd34fe, #41d1ff ); /*hero logo背景渐变色 */ --vp-home-hero-image-background-image: linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); --vp-home-hero-image-filter: blur(40px); } /* 也可自行单独修改brand按钮 */ /* :root { --vp-button-brand-border: #F6CEEC; --vp-button-brand-text: #F6CEEC; --vp-button-brand-bg: #D939CD; --vp-button-brand-hover-border: #F6CEEC; --vp-button-brand-hover-text: #fff; --vp-button-brand-hover-bg: #D939CD; --vp-button-brand-active-border: #F6CEEC; } */ ``` ```css [index.css] /* index.css */ @import "./var.css"; ``` ```ts [index.ts] import DefaultTheme from "vitepress/theme"; import "./style/index.css"; //引入自定义的样式 export default { extends: DefaultTheme, // ...DefaultTheme, //或者这样写也可 }; ``` 准备工作完成后
当你做完以上步骤后，你会发现你的 `主页` 应该发生了变化，变得好看了
如果你是懂 css 样式的话，这一步开始你就已经可以做一些自己喜欢的优化了
如果看不懂没事，一步一步复制也能达到还不错的效果
`我就是复制别人的，后期有空再修改成自己喜欢的颜色，嘿嘿嘿` ![美化后的主页不带图片.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6a249e0807574062afb63492c4730144~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=0ptwWO1oer%2BZcGfNyxFabee2RQI%3D) 补充首页图片
到这一步其实还少了一个地方，就是首页的图片，图片背景也有一个渐变，我们需要自行找一个图片，然后在根目录下创建一个 `public` 文件夹，然后将想要的图片放进去，就像是这样 ![创建public.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d50be679167a447196db3f2bc30088eb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=dut6VBd2e2z6tFPl60fVH7cc2JI%3D) 然后在 `index.md` 中填入以下代码，代码行数：`5、6、7` ```md hero: name: "My Awesome Project" text: "A VitePress Site" tagline: My great project tagline image: src: /home-icon.png alt: 背景图 actions: - theme: brand text: Markdown Examples link: /markdown-examples - theme: alt text: API Examples link: /api-examples ``` 刷新一下，是不是一下子就生动多了 ![美化后的主页带图片.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ab86fcb2989243d58479fe7eac21d324~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=2y2OYBP8mb75Eci5P3BLTAD4%2BtU%3D) 至此前期准备工作就算是完成了 ### Badge 颜色 代码部分
之前有人提到我的这个颜色怎么弄的，其实就是在 `var.css` 加了一些样式 ```css /* var.css */ /* 提示框背景颜色 */ :root { --vp-custom-block-tip-bg: var(--vp-c-green-soft); } /* 提示框 */ .custom-block.tip { border-color: var(--vp-c-green-2); } /* 警告框 */ .custom-block.warning { /* border-color: #d97706; */ border-color: var(--vp-c-yellow-2); } /* 危险框 */ .custom-block.danger { /* border-color: #f43f5e; */ border-color: var(--vp-c-red-2); } ``` 效果
再看看你的 badge，是不是漂亮多了，当然你也可以继续优化 `Info` 和 `Details` ![美化Badge.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5dfebec347ed41b692295fa7b5dc906d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=TbLAq5fTAdZ1GIeX75EzT%2FeEu0k%3D) ### 毛玻璃 代码部分
在 `theme/style` 目录下创建一个 `blur.css` 然后复制以下代码进去
然后再到 `index.css` 引入 ```css /* .vitepress/theme/style/blur.css */ :root { /* 首页导航 */ .VPNavBar { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } /* 文档页导航两侧 */ .VPNavBar:not(.home) { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } @media (min-width: 960px) { /* 文档页导航两侧 */ .VPNavBar:not(.home) { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } /* 首页下滑后导航两侧 */ .VPNavBar:not(.has-sidebar):not(.home.top) { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } } @media (min-width: 960px) { /* 文档页导航中间 */ .VPNavBar:not(.home.top) .content-body { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } /* 首页下滑后导航中间 */ .VPNavBar:not(.has-sidebar):not(.home.top) .content-body { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } } /* 分割线 */ @media (min-width: 960px) { /* 文档页分割线 */ .VPNavBar:not(.home.top) .divider-line { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } /* 首页分割线 */ .VPNavBar:not(.has-sidebar):not(.home.top) .divider { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } } /* 搜索框 VPNavBarSearchButton.vue */ .DocSearch-Button { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); } /* 移动端大纲栏 */ .VPLocalNav { background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(10px); /* 隐藏分割线 */ /* border-bottom: 5px solid var(--vp-c-gutter); */ border-bottom: 0px; } } ``` ```css{3} /* index.css */ @import "./var.css"; @import "./blur.css"; ``` 效果
然后你就能获得类似以下的效果，如果是暗色模式会更加适合哦 ![毛玻璃特效.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/849345a67f8346fc84a4c9fa375bd121~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=HyiEK0b7fKFwPLucwZb1kb7G3bY%3D) ### 不蒜子浏览量插件你们应该注意到了我的首页有个浏览量的插件，这个是下载了 `不蒜子` 插件并做了一个封装实现的
我们先下载插件 ```sh pnpm add -D busuanzi.pure.js ``` 代码部分
接下来就要封装一下，在 `theme/components` 中创建 `DataPanel.vue` 组件
其中 `heart.gif` 这个图片可以自行替换，我就随便找了一个有意思的图片贴上去了 ```vue // DataPanel.vue ``` 然后需要在 `theme/index.ts` 中引入我们刚弄好的组件，以及添加不蒜子的配置 ```ts // .vitepress/theme/index.ts import DefaultTheme from "vitepress/theme"; import { inBrowser } from "vitepress"; import busuanzi from "busuanzi.pure.js"; import DataPanel from "./components/DataPanel.vue"; export default { extends: DefaultTheme, enhanceApp({ app, router }) { app.component("DataPanel", DataPanel);//注册全局组件 if (inBrowser) { router.onAfterRouteChanged = () => { busuanzi.fetch(); }; } }, }; ``` 好，最后再到首页 `index.md`，直接把这个放到最下面就行 ```md /* 根目录index.md 删除这行 */ ``` 效果
现在你应该能看到这样的效果，有数字就对了，部署后就会是真实的数字 ![浏览量效果图.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8d6ce7e9a9da43c99118a42149058115~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=BGSvGvZhknM24kDjq7vzqDv0za4%3D) ### 五彩纸屑花里胡哨的部分，但是我喜欢嘿嘿嘿，继续下载插件 ```sh pnpm add -D canvas-confetti ``` 代码部分
一样是在 `theme/components` 中创建 `Confetti.vue` 组件
接下来和上面不蒜子套路一样，我就放一起表示了 ```vue // Confetti.vue ``` ```ts // .vitepress/theme/index.ts import DefaultTheme from "vitepress/theme"; import Confetti from "./components/Confetti.vue"; export default { extends: DefaultTheme, enhanceApp({ app, router }) { app.component("Confetti", Confetti); //注册全局组件 }, }; ``` ```md /* 根目录index.md 删除这行 */ ``` 效果
回到首页，刷新一下，漂亮吧 ![五彩纸屑效果.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/338249fb81914e1486549227189fef97~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oeS576K576K55qE5aaZ5aaZ5bGL:q75.awebp?rk3s=f64ab15b&x-expires=1758236919&x-signature=90i3YK2Wd14CnPr3uxsy9QPLHn8%3D) ## 最后未来还会继续更新更加实用的两个功能，一个是`自动生成侧边栏`，另一个是`图片缩放`，最快明天就能更新