mirror of https://github.com/vuejs/vitepress
wChenonly
2 years ago
committed by
GitHub
commit
95661e14a0
@ -0,0 +1,12 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
import { shared } from './shared'
|
||||
import { en } from './en'
|
||||
import { zh } from './zh'
|
||||
|
||||
export default defineConfig({
|
||||
...shared,
|
||||
locales: {
|
||||
root: { label: 'English', ...en },
|
||||
zh: { label: '简体中文', ...zh }
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,62 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
import { search as zhSearch } from './zh'
|
||||
|
||||
export const shared = defineConfig({
|
||||
title: 'VitePress',
|
||||
|
||||
lastUpdated: true,
|
||||
cleanUrls: true,
|
||||
|
||||
markdown: {
|
||||
math: true,
|
||||
codeTransformers: [
|
||||
// We use `[!!code` in demo to prevent transformation, here we revert it back.
|
||||
{
|
||||
postprocess(code) {
|
||||
return code.replace(/\[\!\!code/g, '[!code')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
sitemap: {
|
||||
hostname: 'https://vitepress.dev',
|
||||
transformItems(items) {
|
||||
return items.filter((item) => !item.url.includes('migration'))
|
||||
}
|
||||
},
|
||||
|
||||
/* prettier-ignore */
|
||||
head: [
|
||||
['link', { rel: 'icon', type: 'image/svg+xml', href: '/vitepress-logo-mini.svg' }],
|
||||
['link', { rel: 'icon', type: 'image/png', href: '/vitepress-logo-mini.png' }],
|
||||
['meta', { name: 'theme-color', content: '#5f67ee' }],
|
||||
['meta', { property: 'og:type', content: 'website' }],
|
||||
['meta', { property: 'og:locale', content: 'en' }],
|
||||
['meta', { property: 'og:title', content: 'VitePress | Vite & Vue Powered Static Site Generator' }],
|
||||
['meta', { property: 'og:site_name', content: 'VitePress' }],
|
||||
['meta', { property: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }],
|
||||
['meta', { property: 'og:url', content: 'https://vitepress.dev/' }],
|
||||
['script', { src: 'https://cdn.usefathom.com/script.js', 'data-site': 'AZBRSFGG', 'data-spa': 'auto', defer: '' }]
|
||||
],
|
||||
|
||||
themeConfig: {
|
||||
logo: { src: '/vitepress-logo-mini.svg', width: 24, height: 24 },
|
||||
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
|
||||
],
|
||||
|
||||
search: {
|
||||
provider: 'algolia',
|
||||
options: {
|
||||
appId: '8J64VVRP8K',
|
||||
apiKey: 'a18e2f4cc5665f6602c5631fd868adfd',
|
||||
indexName: 'vitepress',
|
||||
locales: { ...zhSearch }
|
||||
}
|
||||
},
|
||||
|
||||
carbonAds: { code: 'CEBDT27Y', placement: 'vuejsorg' }
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "./node_modules/@lunariajs/core/config.schema.json",
|
||||
"repository": {
|
||||
"name": "vuejs/vitepress",
|
||||
"rootDir": "docs"
|
||||
},
|
||||
"files": [
|
||||
{
|
||||
"location": ".vitepress/config/{en,zh}.ts",
|
||||
"pattern": ".vitepress/config/@lang.ts",
|
||||
"type": "universal"
|
||||
},
|
||||
{
|
||||
"location": "**/*.md",
|
||||
"pattern": "@lang/@path",
|
||||
"type": "universal"
|
||||
}
|
||||
],
|
||||
"defaultLocale": {
|
||||
"label": "English",
|
||||
"lang": "en"
|
||||
},
|
||||
"locales": [
|
||||
{
|
||||
"label": "简体中文",
|
||||
"lang": "zh"
|
||||
}
|
||||
],
|
||||
"outDir": ".vitepress/dist/_translations",
|
||||
"ignoreKeywords": ["lunaria-ignore"]
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
/assets/*
|
||||
cache-control: max-age=31536000
|
||||
cache-control: immutable
|
||||
|
||||
/_translations/*
|
||||
x-robots-tag: noindex
|
||||
|
||||
@ -0,0 +1,53 @@
|
||||
# 生成 sitemap {#sitemap-generation}
|
||||
|
||||
VitePress 提供开箱即用的配置，为站点生成 `sitemap.xml` 文件。要启用它，请将以下内容添加到 `.vitepress/config.js` 中：
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
sitemap: {
|
||||
hostname: 'https://example.com'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
要在 `sitemap.xml` 中包含 `<lastmod>` 标签，可以启用 [`lastUpdated`](../reference/default-theme-last-updated) 选项。
|
||||
|
||||
## 选项 {#options}
|
||||
|
||||
VitePress 的 sitemap 由 [`sitemap`](https://www.npmjs.com/package/sitemap) 模块提供支持。可以将该模块支持的选项传递给配置文件中的 `sitemap` 选项。这些选项将直接传递给 `SitemapStream` 构造函数。有关更多详细信息，请参阅 [`sitemap` 文档](https://www.npmjs.com/package/sitemap#options-you-can-pass)。例如：
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
sitemap: {
|
||||
hostname: 'https://example.com',
|
||||
lastmodDateOnly: false
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## `transformItems` Hook
|
||||
|
||||
在将 sitemap 写入 `sitemap.xml` 文件之前，可以使用 `sitemap.transformItems` 钩子来修改 sitemap。使用 sitemap 调用该钩子，应返回 sitemap 数组。例如：
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
sitemap: {
|
||||
hostname: 'https://example.com',
|
||||
transformItems: (items) => {
|
||||
// 添加新选项或修改/过滤现有选项
|
||||
items.push({
|
||||
url: '/extra-page',
|
||||
changefreq: 'monthly',
|
||||
priority: 0.8
|
||||
})
|
||||
return items
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
layout: home
|
||||
|
||||
title: VitePress
|
||||
titleTemplate: 由 Vite 和 Vue 驱动的静态站点生成器
|
||||
|
||||
hero:
|
||||
name: VitePress
|
||||
text: 由 Vite 和 Vue 驱动的静态站点生成器
|
||||
tagline: 简单、强大、快速。就是你想要的现代 SSG 框架！
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 快速开始
|
||||
link: /zh/guide/getting-started
|
||||
- theme: alt
|
||||
text: GitHub
|
||||
link: https://github.com/vuejs/vitepress
|
||||
image:
|
||||
src: /vitepress-logo-large.webp
|
||||
alt: VitePress
|
||||
|
||||
features:
|
||||
- icon: 📝
|
||||
title: 专注内容
|
||||
details: 只需 Markdown 即可轻松创建美观的文档站点。
|
||||
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 256.32"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"/></svg>
|
||||
title: 享受 Vite 无可比拟的体验
|
||||
details: 服务器即时启动，闪电般的热更新，还可以使用基于 Vite 生态的插件。
|
||||
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 220.8"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z"/></svg>
|
||||
title: 使用 Vue 自定义
|
||||
details: 直接在 Markdown 中使用 Vue 语法和组件，或者使用 Vue 组件构建自定义主题。
|
||||
- icon: 🚀
|
||||
title: 速度真的很快！
|
||||
details: 采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。
|
||||
---
|
||||
<style>
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(68px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
# 命令行接口 {#command-line-interface}
|
||||
|
||||
## `vitepress dev`
|
||||
|
||||
使用指定目录作为根目录来启动 VitePress 开发服务器。默认为当前目录。在当前目录下运行时也可以省略 `dev` 命令。
|
||||
|
||||
### 用法
|
||||
|
||||
```sh
|
||||
# 从当前目录启动，省略 `dev`
|
||||
vitepress
|
||||
|
||||
# 从子目录启动
|
||||
vitepress dev [root]
|
||||
```
|
||||
|
||||
### 选项 {#options}
|
||||
|
||||
| 选项 | 说明 |
|
||||
| --------------- | ------------------------------------------ |
|
||||
| `--open [path]` | 启动时打开浏览器 (`boolean \| string`) |
|
||||
| `--port <port>` | 指定端口 (`number`) |
|
||||
| `--base <path>` | public base URL (默认值: `/`) (`string`) |
|
||||
| `--cors` | 启用 CORS |
|
||||
| `--strictPort` | 如果指定的端口已被占用则退出 (`boolean`) |
|
||||
| `--force` | 强制优化程序忽略缓存并重新绑定 (`boolean`) |
|
||||
|
||||
## `vitepress build`
|
||||
|
||||
构建用于生产环境的 VitePress 站点。
|
||||
|
||||
### 用法
|
||||
|
||||
```sh
|
||||
vitepress build [root]
|
||||
```
|
||||
|
||||
### 选项\
|
||||
|
||||
| 选项 | 说明 |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------- |
|
||||
| `--mpa` (experimental) | [MPA 模式](../guide/mpa-mode) 下构建，无需客户端激活 (`boolean`) |
|
||||
| `--base <path>` | public base URL (默认值: `/`) (`string`) |
|
||||
| `--target <target>` | 转译目标 (默认值：`"modules"`) (`string`) |
|
||||
| `--outDir <dir>` | 输出目录 (默认值：`.vitepress/dist`) (`string`) |
|
||||
| `--minify [minifier]` | 启用/禁用压缩，或指定要使用的压缩程序 (默认值：`"esbuild"`) (`boolean \| "terser" \| "esbuild"`) |
|
||||
| `--assetsInlineLimit <number>` | 静态资源 base64 内联阈值（以字节为单位）(默认值：`4096`) (`number`) |
|
||||
|
||||
## `vitepress preview`
|
||||
|
||||
在本地预览生产版本。
|
||||
|
||||
### 用法
|
||||
|
||||
```sh
|
||||
vitepress preview [root]
|
||||
```
|
||||
|
||||
### 选项
|
||||
|
||||
| 选项 | 说明 |
|
||||
| --------------- | -------------------------------------- |
|
||||
| `--base <path>` | public base URL (默认值: `/`) (`string`) |
|
||||
| `--port <port>` | 指定端口 (`number`) |
|
||||
|
||||
## `vitepress init`
|
||||
|
||||
在当前目录中启动[安装向导](../guide/getting-started#setup-wizard)。
|
||||
|
||||
### 用法
|
||||
|
||||
```sh
|
||||
vitepress init
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
# 徽标 {#badge}
|
||||
|
||||
徽标可让你为标题添加状态。例如，指定部分的类型或支持的版本可能很有用。
|
||||
|
||||
## 用法 {#usage}
|
||||
|
||||
可以使用全局组件 `Badge` 。
|
||||
|
||||
```html
|
||||
### Title <Badge type="info" text="default" />
|
||||
### Title <Badge type="tip" text="^1.9.0" />
|
||||
### Title <Badge type="warning" text="beta" />
|
||||
### Title <Badge type="danger" text="caution" />
|
||||
```
|
||||
|
||||
上面的代码渲染如下：
|
||||
|
||||
### Title <Badge type="info" text="default" />
|
||||
### Title <Badge type="tip" text="^1.9.0" />
|
||||
### Title <Badge type="warning" text="beta" />
|
||||
### Title <Badge type="danger" text="caution" />
|
||||
|
||||
## 自定义子节点 {#custom-children}
|
||||
|
||||
`<Badge>` 接受 `children`，这将显示在徽标中。
|
||||
|
||||
```html
|
||||
### Title <Badge type="info">custom element</Badge>
|
||||
```
|
||||
|
||||
### Title <Badge type="info">custom element</Badge>
|
||||
|
||||
## 自定义不同类型徽标的背景色 {#customize-type-color}
|
||||
|
||||
可以通过覆盖 css 来自定义不同类型 `<Badge />` 的样式。以下是默认值。
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-badge-info-border: transparent;
|
||||
--vp-badge-info-text: var(--vp-c-text-2);
|
||||
--vp-badge-info-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-badge-tip-border: transparent;
|
||||
--vp-badge-tip-text: var(--vp-c-brand-1);
|
||||
--vp-badge-tip-bg: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-badge-warning-border: transparent;
|
||||
--vp-badge-warning-text: var(--vp-c-warning-1);
|
||||
--vp-badge-warning-bg: var(--vp-c-warning-soft);
|
||||
|
||||
--vp-badge-danger-border: transparent;
|
||||
--vp-badge-danger-text: var(--vp-c-danger-1);
|
||||
--vp-badge-danger-bg: var(--vp-c-danger-soft);
|
||||
}
|
||||
```
|
||||
|
||||
## `<Badge>`
|
||||
|
||||
`<Badge>` 组件接受以下属性：
|
||||
|
||||
```ts
|
||||
interface Props {
|
||||
// 当传递 `<slot>` 时，该值将被忽略
|
||||
text?: string
|
||||
|
||||
// 默认为 `tip`.
|
||||
type?: 'info' | 'tip' | 'warning' | 'danger'
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,27 @@
|
||||
# 最后更新于 {#last-updated}
|
||||
|
||||
最近一条内容的更新时间会显示在页面右下角。要启用它，请将 `lastUpdated` 选项添加到配置中。
|
||||
|
||||
::: tip
|
||||
你必须提交 markdown 文件才能看到最后更新时间。
|
||||
:::
|
||||
|
||||
## 全局配置 {#site-level-config}
|
||||
|
||||
```js
|
||||
export default {
|
||||
lastUpdated: true
|
||||
}
|
||||
```
|
||||
|
||||
## frontmatter 配置 {#frontmatter-config}
|
||||
|
||||
可以使用 frontmatter 上的 `lastUpdated` 选项单独禁用某个页面的最后更新展示：
|
||||
|
||||
```yaml
|
||||
---
|
||||
lastUpdated: false
|
||||
---
|
||||
```
|
||||
|
||||
另请参阅[默认主题：最后更新时间](./default-theme-config#lastupdated) 了解更多详细信息。主题级别的任何 [truthy](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy) 值也将启用该功能，除非在站点或页面级别明确禁用。
|
||||
@ -0,0 +1,43 @@
|
||||
# 上下页链接 {#prev-next-links}
|
||||
|
||||
可以自定义上一页和下一页的文本和链接 (显示在文档页脚处)。如果要使其与侧边栏上的文本不同，这会很有帮助。此外，你可能会发现，要禁用未包含在侧边栏中的页面的页脚或链接时，这很有用。
|
||||
|
||||
## prev
|
||||
|
||||
- 类型：`string | false | { text?: string; link?: string }`
|
||||
|
||||
- 说明：
|
||||
|
||||
指定要在指向上一页的链接上显示的文本/链接。如果没有在 frontmatter 中设置它，文本/链接将从侧边栏配置中推断出来。
|
||||
|
||||
- 示例：
|
||||
|
||||
- 仅自定义文本：
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: 'Get Started | Markdown'
|
||||
---
|
||||
```
|
||||
|
||||
- 自定义文本和链接：
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev:
|
||||
text: 'Markdown'
|
||||
link: '/guide/markdown'
|
||||
---
|
||||
```
|
||||
|
||||
- 隐藏上一页：
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: false
|
||||
---
|
||||
```
|
||||
|
||||
## next
|
||||
|
||||
与 `prev` 相同，但用于下一页。
|
||||
@ -0,0 +1,213 @@
|
||||
# 侧边栏 {#sidebar}
|
||||
|
||||
侧边栏是文档的主要导航块。可以在 [`themeConfig.sidebar`](./default-theme-config#sidebar) 中配置侧边栏菜单。
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Guide',
|
||||
items: [
|
||||
{ text: 'Introduction', link: '/introduction' },
|
||||
{ text: 'Getting Started', link: '/getting-started' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 基本用法 {#the-basics}
|
||||
|
||||
侧边栏菜单的最简单形式是传入一个链接数组。第一级项目定义侧边栏的“部分”。它应该包含作为小标题的 `text` 和作为实际导航链接的 `items`。
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Section Title A',
|
||||
items: [
|
||||
{ text: 'Item A', link: '/item-a' },
|
||||
{ text: 'Item B', link: '/item-b' },
|
||||
...
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Section Title B',
|
||||
items: [
|
||||
{ text: 'Item C', link: '/item-c' },
|
||||
{ text: 'Item D', link: '/item-d' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
每个 `link` 都应指定以 `/` 开头的实际文件的路径。如果在链接末尾添加斜杠，它将显示相应目录的 `index.md`。
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Guide',
|
||||
items: [
|
||||
// 显示的是 `/guide/index.md` 页面
|
||||
{ text: 'Introduction', link: '/guide/' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可以进一步将侧边栏项目嵌入到 6 级深度，从根级别上计数。请注意，深度超过 6 级将被忽略，并且不会在侧边栏上显示。
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Level 1',
|
||||
items: [
|
||||
{
|
||||
text: 'Level 2',
|
||||
items: [
|
||||
{
|
||||
text: 'Level 3',
|
||||
items: [
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 多侧边栏 {#multiple-sidebars}
|
||||
|
||||
可能会根据页面路径显示不同的侧边栏。例如，如本站点所示，可能希望在文档中创建单独的侧边栏，例如“指南”页面和“配置参考”页面。
|
||||
|
||||
为此，首先将你的页面组织到每个所需部分的目录中：
|
||||
|
||||
```
|
||||
.
|
||||
├─ guide/
|
||||
│ ├─ index.md
|
||||
│ ├─ one.md
|
||||
│ └─ two.md
|
||||
└─ config/
|
||||
├─ index.md
|
||||
├─ three.md
|
||||
└─ four.md
|
||||
```
|
||||
|
||||
然后，更新配置以定义每个部分的侧边栏。这一次，应该传递一个对象而不是数组。
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: {
|
||||
// 当用户位于 `guide` 目录时，会显示此侧边栏
|
||||
'/guide/': [
|
||||
{
|
||||
text: 'Guide',
|
||||
items: [
|
||||
{ text: 'Index', link: '/guide/' },
|
||||
{ text: 'One', link: '/guide/one' },
|
||||
{ text: 'Two', link: '/guide/two' }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
// 当用户位于 `config` 目录时，会显示此侧边栏
|
||||
'/config/': [
|
||||
{
|
||||
text: 'Config',
|
||||
items: [
|
||||
{ text: 'Index', link: '/config/' },
|
||||
{ text: 'Three', link: '/config/three' },
|
||||
{ text: 'Four', link: '/config/four' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 可折叠的侧边栏组 {#collapsible-sidebar-groups}
|
||||
|
||||
通过向侧边栏组添加 `collapsed` 选项，它会显示一个切换按钮来隐藏/显示每个部分。
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Section Title A',
|
||||
collapsed: false,
|
||||
items: [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
默认情况下，所有部分都是“打开”的。如果希望它们在初始页面加载时“关闭”，请将 `collapsed` 选项设置为 `true`。
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Section Title A',
|
||||
collapsed: true,
|
||||
items: [...]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `useSidebar` <Badge type="info" text="composable" />
|
||||
|
||||
返回侧边栏相关数据。返回的对象具有以下类型：
|
||||
|
||||
```ts
|
||||
export interface DocSidebar {
|
||||
isOpen: Ref<boolean>
|
||||
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
|
||||
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
|
||||
hasSidebar: ComputedRef<boolean>
|
||||
hasAside: ComputedRef<boolean>
|
||||
leftAside: ComputedRef<boolean>
|
||||
isSidebarEnabled: ComputedRef<boolean>
|
||||
open: () => void
|
||||
close: () => void
|
||||
toggle: () => void
|
||||
}
|
||||
```
|
||||
|
||||
**示例：**
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useSidebar } from 'vitepress/theme'
|
||||
|
||||
const { hasSidebar } = useSidebar()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasSidebar">Only show when sidebar exists</div>
|
||||
</template>
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
[build.environment]
|
||||
NODE_VERSION = "18"
|
||||
NODE_VERSION = "20"
|
||||
|
||||
[build]
|
||||
publish = "docs/.vitepress/dist"
|
||||
command = "pnpm docs:build"
|
||||
command = "pnpm docs:build && pnpm docs:lunaria:build"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,85 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { useData } from '../composables/data'
|
||||
import { getHeaders, resolveTitle, type MenuItem } from '../composables/outline'
|
||||
import VPDocOutlineItem from './VPDocOutlineItem.vue'
|
||||
import { onContentUpdated } from 'vitepress'
|
||||
import VPIconChevronRight from './icons/VPIconChevronRight.vue'
|
||||
|
||||
const { frontmatter, theme } = useData()
|
||||
const open = ref(false)
|
||||
|
||||
onContentUpdated(() => {
|
||||
open.value = false
|
||||
})
|
||||
|
||||
const headers = shallowRef<MenuItem[]>([])
|
||||
|
||||
onContentUpdated(() => {
|
||||
headers.value = getHeaders(
|
||||
frontmatter.value.outline ?? theme.value.outline
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPDocOutlineDropdown" v-if="headers.length > 0">
|
||||
<button @click="open = !open" :class="{ open }">
|
||||
{{ resolveTitle(theme) }}
|
||||
<VPIconChevronRight class="icon" />
|
||||
</button>
|
||||
<div class="items" v-if="open">
|
||||
<VPDocOutlineItem :headers="headers" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPDocOutlineDropdown {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.VPDocOutlineDropdown button {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
border: 1px solid var(--vp-c-border);
|
||||
padding: 4px 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-default-soft);
|
||||
border-radius: 8px;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.VPDocOutlineDropdown button:hover {
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPDocOutlineDropdown button.open {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
:deep(.outline-link) {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.open > .icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.items {
|
||||
margin-top: 12px;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,12 @@
|
||||
import { inBrowser } from '../../shared'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const hashRef = ref(inBrowser ? location.hash : '')
|
||||
|
||||
if (inBrowser) {
|
||||
window.addEventListener('hashchange', () => {
|
||||
hashRef.value = location.hash
|
||||
})
|
||||
}
|
||||
|
||||
export { hashRef }
|
||||
@ -0,0 +1,24 @@
|
||||
import { onContentUpdated } from 'vitepress'
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { getHeaders, type MenuItem } from '../composables/outline'
|
||||
import { useData } from './data'
|
||||
|
||||
export function useLocalNav(): DefaultTheme.DocLocalNav {
|
||||
const { theme, frontmatter } = useData()
|
||||
|
||||
const headers = shallowRef<MenuItem[]>([])
|
||||
|
||||
const hasLocalNav = computed(() => {
|
||||
return headers.value.length > 0
|
||||
})
|
||||
|
||||
onContentUpdated(() => {
|
||||
headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
|
||||
})
|
||||
|
||||
return {
|
||||
headers,
|
||||
hasLocalNav
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue