1

代码精简

配置代码路径精简,优化代码块显示的文件路径信息。通过调整代码块显示的文件名和路径格式,可以隐藏冗余的目录结构,只显示关键的文件名,让代码展示区域更加简洁清晰。在.vitepress目录新建config文件夹,并新建index.ts文件. ├─ docs │ ├─ .vit...
阅读全文
2

链接卡片

创建 Linkcard 组件,展示带 Logo、标题、描述的链接卡片样式。参考 Vuejs 官方中文仓库的实现方式,可以在文档中插入美观的外链卡片,包含网站 Logo、标题、描述和背景色,提升外部链接的展示效果和点击率。:::tip代码参考自 vuejs官网 的 中文仓库:...
阅读全文
3

代码组

配置代码组的标签页样式,支持多语言代码切换展示。VitePress 的代码组功能允许在同一个代码块中切换不同语言的示例,通过自定义标签页样式,可以让代码组切换器更加美观和易用。将代码组改成Mac风格,三个小圆点在.vitepress/theme/style目录新建一个vp-...
阅读全文
4

代码块

将代码块样式改为 Mac 风格,添加红绿黄三色窗口按钮。通过 CSS 样式覆盖,将 VitePress 的代码块顶部添加 Mac 系统的红绿黄三色圆形按钮,模拟 Mac 窗口外观,提升代码展示区域的视觉效果。将代码组改成Mac风格,三个小圆点在.vitepress/them...
阅读全文
5

导航栏毛玻璃

导航栏添加毛玻璃(blur)效果,增强页面层次感和现代感。通过 CSS backdrop-filter 属性和半透明背景的组合,可以让导航栏呈现出模糊磨砂效果,使内容在滚动时更加清晰可见,同时增添页面的现代设计感。在theme/style文件夹,然后新建blur.css并填...
阅读全文