.
├─ /
│ ├─ .vitepress
│ │ └─ config.mts <-- 配置文件已由ts变成mts
│ ├─ api-examples.md <-- 文章1
│ ├─ markdown-examples.md <-- 文章2
│ └─ index.md <-- 首页
└─ package.json
在默认情况下Vitepress的链接结尾 .html ，如果你喜欢纯净的网址不使用 .html
我们需要变更下目录，将原先的文档使用文件夹，然后再文件夹内新建页面
.
├─ /
│ ├─ .vitepress
│ │ └─ config.mts <-- 配置文件已由ts变成mts
│ ├─ api-examples
│ │ └─ index.md <-- 文章1
│ ├─ markdown-examples
│ │ └─ index.md <-- 文章2
│ └─ index.md <-- 首页
└─ package.json
可以直接配置
export default defineConfig({
cleanUrls:true,
})
默认是浅色模式，可自行开启或更换
export default defineConfig({
//appearance:true, //默认浅色且开启切换
//启用深色模式
appearance:'dark',
})
要启用多语言支持，首先需要使用如下的文件目录结构。新建一个语言目录，再把根目录所有文档，翻译后再放进去。默认读取目录的index文件，无需手动填写 index
需要在 config.ts 中配置 locales，注意 themeConfig 属性里也要配，两个 locales 内容是不一样的
themeConfig 中的 locales 配置是为了展示下拉菜单的展示内容
根Config 中的 locales 配置是为了展示头部标题内容，description属性可有可无
.
├─ /
│ ├─ en
│ │ ├─ index.md <--英文首页
│ │ ├─ ...
│ │ ...
│ └─ fr
│ │ ├─ index.md <--法语首页
│ │ ├─ ...
│ │ ...
│ └─ index.md <--中文首页(默认)
└─ package.json
// .vitepress/config.ts
export default defineConfigWithTheme<VuetomThemeConfig>({
// ...
themeConfig: {
// ...
locales: {
'/zh-CN/': {
label: '简体中文',
selectText: '多国语言'
},
'/en-US/': {
label: 'English',
selectText: 'Languages'
}
}
},
locales: {
'/zh-CN/': {
lang: 'zh-CN',
title: 'Vuetom 主题',
description: '为 Vitepress 提供的一款主题'
},
'/en-US/': {
lang: 'en-US',
title: 'Vuetom Theme',
description: 'Theme For Vitepress'
}
}
})
原来与 .vitepress 同级的 index.md 文件中可以改为转发至 zh-CN/index 或者 en-US/index
例如下方的代码，会直接将 / 转发到 /zh-CN/ 这样就会直接前往中文首页了
---
title: 'Vuetom Theme'
lang: en-US
page: true
---
<script setup>
if (typeof window !== 'undefined') {
const preferredLang = 'zh-CN'
window.location.pathname = `/${preferredLang}/`
}
</script>
支持SVG
export default defineConfig({
themeConfig: {
//社交链接
socialLinks: [
{ icon: 'github', link: '<https://github.com/vuejs/vitepress>' },
{ icon: 'twitter', link: '<https://twitter.com/>' },
{ icon: 'discord', link: '<https://chat.vitejs.dev/>' },
{
icon: {
svg: '<svg t="1703483542872" class="icon" viewBox="0 0 1309 1024" version="1.1" xmlns="<http://www.w3.org/2000/svg>" p-id="6274" width="200" height="200"><path d="M1147.26896 912.681417l34.90165 111.318583-127.165111-66.823891a604.787313 604.787313 0 0 1-139.082747 22.263717c-220.607239 0-394.296969-144.615936-394.296969-322.758409s173.526026-322.889372 394.296969-322.889372C1124.219465 333.661082 1309.630388 478.669907 1309.630388 656.550454c0 100.284947-69.344929 189.143369-162.361428 256.130963zM788.070086 511.869037a49.11114 49.11114 0 0 0-46.360916 44.494692 48.783732 48.783732 0 0 0 46.360916 44.494693 52.090549 52.090549 0 0 0 57.983885-44.494693 52.385216 52.385216 0 0 0-57.983885-44.494692z m254.985036 0a48.881954 48.881954 0 0 0-46.09899 44.494692 48.620028 48.620028 0 0 0 46.09899 44.494693 52.385216 52.385216 0 0 0 57.983886-44.494693 52.58166 52.58166 0 0 0-57.951145-44.494692z m-550.568615 150.018161a318.567592 318.567592 0 0 0 14.307712 93.212943c-14.307712 1.080445-28.746387 1.768001-43.283284 1.768001a827.293516 827.293516 0 0 1-162.394168-22.296458l-162.001279 77.955749 46.328175-133.811485C69.410411 600.858422 0 500.507993 0 378.38496 0 166.683208 208.689602 0 463.510935 0c227.908428 0 427.594322 133.18941 467.701752 312.379588a427.463358 427.463358 0 0 0-44.625655-2.619261c-220.24709 0-394.100524 157.74498-394.100525 352.126871zM312.90344 189.143369a64.270111 64.270111 0 0 0-69.803299 55.659291 64.532037 64.532037 0 0 0 69.803299 55.659292 53.694846 53.694846 0 0 0 57.852923-55.659292 53.465661 53.465661 0 0 0-57.852923-55.659291z m324.428188 0a64.040926 64.040926 0 0 0-69.574114 55.659291 64.302852 64.302852 0 0 0 69.574114 55.659292 53.694846 53.694846 0 0 0 57.951145-55.659292 53.465661 53.465661 0 0 0-57.951145-55.659291z" p-id="6275"></path></svg>'
},
link: '<https://weixin.qq.com/>',
// You can include a custom label for accessibility too (optional but recommended):
ariaLabel: 'wechat'
}
],
},
})
vitepress自带的其他社交图标
/* node_modules\\vitepress\\types\\default-theme.d.ts */
export type SocialLinkIcon =
| 'discord'
| 'facebook'
| 'github'
| 'instagram'
| 'linkedin'
| 'mastodon'
| 'slack'
| 'twitter'
| 'x'
| 'youtube'
| { svg: string }
更改手机端菜单文字显示，默认 Return to top
export default defineConfig({
themeConfig: {
//返回顶部文字修改
returnToTopLabel:'返回顶部',
},
})
会被 Frontmatter配置 覆盖
export default defineConfig({
themeConfig: {
//编辑本页
editLink: {
pattern: '<https://github.com/vuejs/vitepress/edit/main/docs/:path>',
text: '在GitHub编辑本页'
},
},
})
如果你想添加页面的更新时间就配置，否则默认是 false
export default defineConfig({
lastUpdated: true, //此配置不会立即生效，需git提交后爬取时间戳，本地报错可以先注释
themeConfig: {
//上次更新时间
lastUpdatedText:'上次更新',
},
})
默认从侧边栏配置中读取，如果想单独关闭或自定义请参照 Frontmatter.
仅修改显示的文字Pagina prior 可以改成 上一页 Proxima pagina 可以改成 下一页
export default defineConfig({
themeConfig: {
//自定义上下页名
docFooter: {
prev: '上一页',
next: '下一页',
},
},
})