@evgenest / vitepress-theme-contour
一个主题 VitePress 2 .增加了一些变化，以股票的外观：一个更宽的布局，框架代码块和一些小的工具，阅读长代码。它扩展了默认主题，所以你已经在VitePress中使用的一切都可以继续工作，包括本地搜索。
需要VitePress 2，它仍然是。主题风格的一些VitePress的内部类名，所以一个新的VitePress版本可以打破它的一部分。保持您的锁文件提交，并在升级后查看您的站点。
功能
布局
- 左侧栏固定在窗口边缘，活动页面位于填充的背景上
- 搜索框和页面文本在一行上对齐
- 一个更宽的文本列，最大1100px
- “在此页上”的轮廓环绕在右边缘，只占用文本所需的宽度
- 在窄屏幕上滚动时保持可见的站点标题
代码块
- 框架，高对比度纯文本和样式但可见的滚动条
- 鼠标悬停时出现的复制按钮，并显示绿色的“复制！”标签
- 换行按钮：一次点击适用于网站上的每个代码块，并在浏览器中被记住
- 文本永远不会在按钮下面运行：换行文本在按钮周围流动，未换行的第一行在按钮前面逐渐消失，然后滚动完全清除
导航
- 宽屏幕上的自动/亮/暗开关
- 上一个和下一个链接与箭头卡
- 在窄屏幕上，大纲突出显示当前部分，并在您选择项目后关闭
sidebarTree()从文件夹构建嵌套的侧边栏- 界面语言：英语或俄语
安装
bun add -d vitepress@next @evgenest/vitepress-theme-contour
Npm， PNPM和yarn也可以工作。
设置
.vitepress/theme/index.ts：
export { default } from '@evgenest/vitepress-theme-contour'
.vitepress/config.ts：
import { contourConfig, sidebarTree } from '@evgenest/vitepress-theme-contour/config'
export default {
extends: contourConfig({ locale: 'en' }), // or 'ru'
title: 'My docs',
themeConfig: {
sidebar: sidebarTree(),
},
}
侧边栏
sidebarTree() 将每个文件夹转换为嵌套组，并将每个Markdown文件转换为链接。所有选项都是可选的：
sidebarTree({
srcDir: 'docs', // same as srcDir in your config
exclude: ['drafts.md'], // paths relative to srcDir
order: ['intro.md', 'guide'], // listed first, the rest follow alphabetically
titles: { 'intro.md': 'Welcome' }, // overrides the name in the menu
rootLabel: 'Docs', // wraps the tree in one top-level group
collapsed: false,
})
菜单名的由来 titles，然后是正面物质 title，然后是第一个 # 标题，然后是文件名。
exclude 只隐藏菜单中的一页。要将其从站点中删除，还可以将其添加到 srcExclude.
一、 README.md 在…的根源 srcDir 链接 /，所以添加 rewrites: { 'README.md': 'index.md' } 如果你用一个作为你的主页。
你自己的 markdown.config
你可以设置 markdown.config 像往常一样：VitePress将其与主题本身一起运行，因此wrap按钮保留。
颜色
颜色是CSS变量。在您自己的样式表中覆盖它们，从 .vitepress/theme/index.ts：
:root { --vp-c-brand-1: #0f766e; }
.dark { --vp-c-brand-1: #5eead4; }
许可证
麻省理工学院