@ -8,8 +8,7 @@ Data loaders can be used to fetch remote data, or generate metadata based on loc
A data loader file must end with either `.data.js` or `.data.ts`. The file should provide a default export of an object with the `load()` method:
```js
// example.data.js
```js [example.data.js]
export default {
load() {
return {
@ -84,8 +83,7 @@ export default {
When building a content focused site, we often need to create an "archive" or "index" page: a page where we list all available entries in our content collection, for example blog posts or API pages. We **can** implement this directly with the data loader API, but since this is such a common use case, VitePress also provides a `createContentLoader` helper to simplify this:
@ -10,7 +10,7 @@ The following guides are based on some shared assumptions:
- You are using the default build output directory (`.vitepress/dist`).
- VitePress is installed as a local dependency in your project, and you have set up the following scripts in your `package.json`:
```json
```json [package.json]
{
"scripts": {
"docs:build": "vitepress build docs",
@ -121,7 +121,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
1. Create a file named `deploy.yml` inside `.github/workflows` directory of your project with some content like this:
```yaml
```yaml [.github/workflows/deploy.yml]
# Sample workflow for building and deploying a VitePress site to GitHub Pages
#
name: Deploy VitePress site to Pages
@ -204,7 +204,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
2. Create a file named `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content:
```yaml
```yaml [.gitlab-ci.yml]
image: node:18
pages:
cache:
@ -237,7 +237,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
`firebase.json`:
```json
```json [firebase.json]
{
"hosting": {
"public": "docs/.vitepress/dist",
@ -248,7 +248,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
`.firebaserc`:
```json
```json [.firebaserc]
{
"projects": {
"default": "<YOUR_FIREBASE_ID>"
@ -276,7 +276,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
2. Create a file called `static.json` in the root of your project with the below content:
@ -22,8 +22,7 @@ Before proceeding, make sure to first read [Using a Custom Theme](./custom-theme
The default theme CSS is customizable by overriding root level CSS variables:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import './custom.css'
@ -46,8 +45,7 @@ VitePress uses [Inter](https://rsms.me/inter/) as the default font, and will inc
To avoid including Inter in the build output, import the theme from `vitepress/theme-without-fonts` instead:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'
@ -68,8 +66,7 @@ If you are using optional components like the [Team Page](../reference/default-t
If your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` with hashed filename. To preload this file, use the [transformHead](../reference/site-config#transformhead) build hook:
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
transformHead({ assets }) {
// adjust the regex accordingly to match your font
@ -94,8 +91,7 @@ export default {
## Registering Global Components
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
/** @type {import('vitepress').Theme} */
@ -109,8 +105,7 @@ export default {
```
If you're using TypeScript:
```ts
// .vitepress/theme/index.ts
```ts [.vitepress/theme/index.ts]
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
@ -129,8 +124,7 @@ Since we are using Vite, you can also leverage Vite's [glob import feature](http
The default theme's `<Layout/>` component has a few slots that can be used to inject content at certain locations of the page. Here's an example of injecting a component into the before outline:
@ -120,8 +120,7 @@ By default, VitePress stores its dev server cache in `.vitepress/cache`, and the
The config file (`.vitepress/config.js`) allows you to customize various aspects of your VitePress site, with the most basic options being the title and description of the site:
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
// site-level options
title: 'VitePress',
@ -147,7 +146,7 @@ VitePress also provides the ability to generate clean URLs, rewrite paths, and d
The tool should have also injected the following npm scripts to your `package.json` if you allowed it to do so during the setup process:
Since [`Theme.enhanceApp`](./custom-theme#theme-interface) can be async, you can conditionally import and register Vue plugins that access browser APIs on import:
You can include custom components in the navigation bar by using the `component` option. The `component` key should be the Vue component name, and must be registered globally using [Theme.enhanceApp](../guide/custom-theme#theme-interface).
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
themeConfig: {
nav: [
@ -192,8 +191,7 @@ export default {
Then, you need to register the component globally:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import MyCustomComponent from './components/MyCustomComponent.vue'
@ -8,8 +8,7 @@ Los cargadores de datos pueden ser usados para buscar datos remotos o generar me
Un archivo de cargados de datos debe terminar con `.data.js` o `.data.ts`. El archivo debe proporcionar una exportación por defecto de un objeto con el método `load()`:
```js
// example.data.js
```js [example.data.js]
export default {
load() {
return {
@ -83,8 +82,7 @@ export default {
Al construir un sitio enfocado en contenido, frecuentemente necesitamos crear una página de "archivo" o "índice": una página donde listamos todas las entradas disponibles en nuestra colección de contenido, por ejemplo, articulos de blog o páginas de API. Nosotros **podemos** implementar esto directamente con el API de cargador de datos, pero como este es un caso de uso tan común, VitePress también proporciona un auxiliar `createContentLoader` para simplificar esto:
@ -10,7 +10,7 @@ Las siguientes orientaciones están basadas en algunos supuestos:
- Está usando la directorio por defecto para el build (`.vitepress/dist`).
- VitePress está instalado como una dependencia local en su proyecto, y usted configuró los siguientes scripts en su `package.json`:
```json
```json [package.json]
{
"scripts": {
"docs:build": "vitepress build docs",
@ -121,7 +121,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
1. Cree un archivo llamado `deploy.yml` dentro del directorio `.github/workflows` do seu projeto com algum conteúdo como este:
```yaml
```yaml [.github/workflows/deploy.yml]
# Ejemplo de flujo de trabajo para compilar e implantar un sitio VitePress en GitHub Pages
#
name: Implante el sitio VitePress en Pages
@ -205,7 +205,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
2. Cree un archivo llamado `.gitlab-ci.yml` en la raiz del proyecto con el contenido abajo. Esto construirá e implantará su sitio siempre que haga alteraciones en el contenido.
```yaml
```yaml [.gitlab-ci.yml]
image: node:18
pages:
cache:
@ -238,7 +238,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
`firebase.json`:
```json
```json [firebase.json]
{
"hosting": {
"public": "docs/.vitepress/dist",
@ -249,7 +249,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
`.firebaserc`:
```json
```json [.firebaserc]
{
"projects": {
"default": "<SU_ID_FIREBASE>"
@ -277,7 +277,7 @@ No active opciones como _Auto Minify_ para código HTML. Eso removera comentario
2. Cree un archivo llamado `static.json` en la raiz de su proyecto con el contenido abajo:
@ -22,8 +22,7 @@ Antes de seguir, asegurese de leer primero [Usando un Tema Personalizado](./cust
El CSS del tema por defecto puede ser personalizado substuyendo las variables CSS a nivel de la raiz:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import './custom.css'
@ -46,8 +45,7 @@ VitePress usa [Inter](https://rsms.me/inter/) como fuente por defecto e incluir
Para evitar la inclusión de Inter en la salida de compilación, importe el tema de `vitepress/theme-without-fonts`:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'
@ -68,8 +66,7 @@ Si está usando componentes opcionales como los componentes de la [Página del e
Si su fuente es un archivo local referenciado via `@font-face`, ella será procesada como un asset e incluida en `.vitepress/dist/assets` con un nombre de archivo hash. Para pre-cargar ese archivo, use el hook de construcción [transformHead](../reference/site-config#transformhead):
@ -129,8 +124,7 @@ Como estamos usando Vite, puede también aprovechar la [funcionalidad de importa
El componente `<Layout/>` del tema por defecto posee algunos _slots_ que pueden ser usados para inyectar contenido en lugares específicos de la página. Aqui un ejemplo de como inyectar un componente antes del esquema:
@ -116,8 +116,7 @@ Por defecto, VitePress almacena el caché del servidor de desarrollo en `.vitepr
El archivo de configuración (`.vitepress/config.js`) permite que personalice vários aspectos de su sitio VitePress, con las opciones más básicas siendo el titulo y la descripción del sitio:
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
// opciones a nivel del sitio
title: 'VitePress',
@ -143,7 +142,7 @@ VitePress también proporciona la habilidad de generar URLs limpias, retambém f
La herramienta debe tener también inyectado los siguientes scripts npm en su `package.json` si permitió esto durante el proceso de instalación:
Como [`Theme.enhanceApp`](./custom-theme#theme-interface) puede ser asíncrono, puede importar condicionalmente y registrar plugins Vue que acceden APIs del navegador en la importación:
یک فایل بارگذار داده باید با `.data.js` یا `.data.ts` پایان یابد. فایل باید یک صادرات پیشفرض از یک شی با متد `load()` داشته باشد:
```js
// example.data.js
```js [example.data.js]
export default {
load() {
return {
@ -84,8 +83,7 @@ export default {
وقتی که در حال ساختن یک سایت متمرکز بر محتوا هستیم، اغلب نیاز به ایجاد یک "بایگانی" یا "فهرست" صفحه داریم: یک صفحه که ما همه ورودیهای موجود در مجموعه محتوای خود را لیست میکنیم، به عنوان مثال پستهای وبلاگ یا صفحات API. ما میتوانیم این کار را مستقیماً با API بارگذار داده انجام دهیم، اما از آنجا که این یک حالت استفاده رایج است، ویتپرس همچنین یک کمککننده به نام `createContentLoader` را فراهم میکند تا این فرآیند را سادهتر کند:
2. یک فایل به نام `.gitlab-ci.yml` در ریشه پروژه خود با محتوای زیر ایجاد کنید. این کار به ساخت و انتشار وبسایت شما هر زمانی که تغییری در محتوا ایجاد میکنید، میپردازد:
CSS تم پیشفرض با نادیده گرفتن متغیرهای CSS سطح ریشه قابل سفارشیسازی است:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import './custom.css'
@ -46,8 +45,7 @@ export default DefaultTheme
برای جلوگیری از شامل شدن Inter در خروجی ساختهشده، تم را به جای `vitepress/theme-without-fonts` وارد کنید:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'
@ -68,8 +66,7 @@ export default DefaultTheme
اگر فونت شما یک فایل محلی است که از طریق `@font-face` ارجاع شده است، به عنوان یک دارایی پردازش میشود و با نام فایل هشداردار در `.vitepress/dist/assets` شامل میشود. برای پیشبارگذاری این فایل، از هوک ساخت [transformHead](../reference/site-config#transformhead) استفاده کنید:
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
transformHead({ assets }) {
// منظور شده برای همسان سازی font خود، regex مورد نیاز را تنظیم کنید
@ -94,8 +91,7 @@ export default {
## ثبت مولفههای عمومی {#registering-global-components}
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
/** @type {import('vitepress').Theme} */
@ -109,8 +105,7 @@ export default {
```
اگر از TypeScript استفاده میکنید:
```ts
// .vitepress/theme/index.ts
```ts [.vitepress/theme/index.ts]
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
@ -129,8 +124,7 @@ export default {
کامپوننت `<Layout/>` تم پیشفرض چندین slot دارد که میتوانید محتوا را در موقعیتهای مختلف صفحه در آنها درج کنید. در زیر مثالی از درج یک کامپوننت در قبل از طرح داده شده است:
فایل پیکربندی (`.vitepress/config.js`) به شما اجازه میدهد جنبههای مختلف سایت ویتپرس خود را سفارشی کنید، با گزینههای پایهای مانند عنوان و توضیحات سایت:
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
// گزینههای سطح سایت
title: 'ویتپرس',
@ -152,7 +151,7 @@ export default {
این ابزار باید اسکریپتهای npm زیر را به `package.json` شما اضافه کرده باشد اگر اجازه این کار را در طول فرآیند راهاندازی داده باشید:
از آنجا که `Theme.enhanceApp` میتواند async باشد، میتوانید به صورت شرطی پلاگینهای Vue را که دسترسی به APIهای مرورگر را هنگام وارد کردن دارند، وارد و ثبت کنید:
میتوانید اجزای سفارشی را در نوار ناوبری با استفاده از گزینه `component` اضافه کنید. کلید `component` باید نام مؤلفه Vue باشد و باید به صورت جهانی با استفاده از [Theme.enhanceApp](../guide/custom-theme#theme-interface) ثبت شود.
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
themeConfig: {
nav: [
@ -193,8 +192,7 @@ export default {
سپس، شما باید مؤلفه را به صورت جهانی ثبت کنید:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import MyCustomComponent from './components/MyCustomComponent.vue'
@ -8,8 +8,7 @@ VitePress는 페이지나 컴포넌트에서 임의의 데이터를 로드하고
데이터 로더 파일은 반드시 `.data.js` 또는 `.data.ts`로 끝나야 합니다. 이 파일은 `load()` 메서드를 가진 객체를 "export default" 해야 합니다:
```js
// example.data.js
```js [example.data.js]
export default {
load() {
return {
@ -84,8 +83,7 @@ export default {
콘텐츠가 많은 사이트를 구축할 때, 종종 "아카이브" 또는 "인덱스" 페이지를 만들어야 합니다. 이 페이지는 콘텐츠 모음에 있는 모든 항목(예: 블로그 게시물, API 페이지)을 나열하는 페이지입니다. 데이터 로더 API를 직접 사용하여 이를 구현할 수 있지만, VitePress는 이러한 일반적인 사용 사례를 간소화하기 위해 `createContentLoader` 헬퍼를 제공합니다:
import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'
@ -68,8 +66,7 @@ export default DefaultTheme
폰트가 `@font-face`를 통해 참조된 로컬 파일인 경우, 에셋으로 처리되어 해시된 파일 이름으로 `.vitepress/dist/assets`에 포함됩니다. 이 파일을 미리 로드하려면 [transformHead](../reference/site-config#transformhead) 빌드 훅을 사용해야 합니다:
네비게이션 바에 커스텀 컴포넌트를 포함하려면 `component` 옵션을 사용하세요. `component` 키는 Vue 컴포넌트 이름이어야 하며, [Theme.enhanceApp](../guide/custom-theme#theme-interface)을 사용하여 전역적으로 등록해야 합니다.
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
themeConfig: {
nav: [
@ -192,8 +191,7 @@ export default {
그런 다음, 컴포넌트를 전역적으로 등록해야 합니다:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import MyCustomComponent from './components/MyCustomComponent.vue'
@ -8,8 +8,7 @@ Os carregadores de dados podem ser usados para buscar dados remotos ou gerar met
Um arquivo de carregador de dados deve terminar com `.data.js` ou `.data.ts`. O arquivo deve fornecer uma exportação padrão de um objeto com o método `load()`:
```js
// example.data.js
```js [example.data.js]
export default {
load() {
return {
@ -84,8 +83,7 @@ export default {
Ao construir um site focado em conteúdo, frequentemente precisamos criar uma página de "arquivo" ou "índice": uma página onde listamos todas as entradas disponíveis em nossa coleção de conteúdo, por exemplo, artigos de blog ou páginas de API. Nós **podemos** implementar isso diretamente com a API de carregador de dados, mas como este é um caso de uso tão comum, VitePress também fornece um auxiliar `createContentLoader` para simplificar isso:
@ -10,7 +10,7 @@ Os guias a seguir são baseados em alguns pressupostos:
- Você está usando o diretório de saída de compilação padrão (`.vitepress/dist`).
- VitePress está instalado como uma dependência local em seu projeto, e você configurou os seguintes scripts em seu `package.json`:
```json
```json [package.json]
{
"scripts": {
"docs:build": "vitepress build docs",
@ -121,7 +121,7 @@ Não ative opções como _Auto Minify_ para código HTML. Isso removerá coment
1. Crie um arquivo chamado `deploy.yml` dentro do diretório `.github/workflows` do seu projeto com algum conteúdo como este:
```yaml
```yaml [.github/workflows/deploy.yml]
# Exemplo de fluxo de trabalho para compilar e implantar um site VitePress no GitHub Pages
#
name: Implante o site VitePress no Pages
@ -206,7 +206,7 @@ Não ative opções como _Auto Minify_ para código HTML. Isso removerá coment
2. Crie um arquivo chamado `.gitlab-ci.yml` na raiz do seu projeto com o conteúdo abaixo. Isso construirá e implantará seu site sempre que você fizer alterações no conteúdo:
```yaml
```yaml [.gitlab-ci.yml]
image: node:18
pages:
cache:
@ -239,7 +239,7 @@ Não ative opções como _Auto Minify_ para código HTML. Isso removerá coment
`firebase.json`:
```json
```json [firebase.json]
{
"hosting": {
"public": "docs/.vitepress/dist",
@ -250,7 +250,7 @@ Não ative opções como _Auto Minify_ para código HTML. Isso removerá coment
`.firebaserc`:
```json
```json [.firebaserc]
{
"projects": {
"default": "<SEU_ID_FIREBASE>"
@ -278,7 +278,7 @@ Não ative opções como _Auto Minify_ para código HTML. Isso removerá coment
2. Crie um arquivo chamado `static.json` na raiz do seu projeto com o conteúdo abaixo:
@ -22,8 +22,7 @@ Antes de prosseguir, certifique-se de ler primeiro [Usando um Tema Personalizado
O CSS do tema padrão pode ser personalizado substituindo as variáveis CSS no nível raiz:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import './custom.css'
@ -46,8 +45,7 @@ VitePress usa [Inter](https://rsms.me/inter/) como fonte padrão e incluirá as
Para evitar a inclusão de Inter na saída de compilação, importe o tema de `vitepress/theme-without-fonts`:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'
@ -68,8 +66,7 @@ Se estiver usando componentes opcionais como os componentes da [Página da Equip
Se a sua fonte é um arquivo local referenciado via `@font-face`, ela será processada como um ativo e incluída em `.vitepress/dist/assets` com um nome de arquivo hash. Para pré-carregar esse arquivo, use o gancho de construção [transformHead](../reference/site-config#transformhead):
@ -129,8 +124,7 @@ Como estamos usando Vite, você também pode aproveitar a [funcionalidade de imp
O componente `<Layout/>` do tema padrão possui alguns _slots_ que podem ser usados para injetar conteúdo em locais específicos da página. Aqui está um exemplo de como injetar um componente antes do esquema :
@ -120,8 +120,7 @@ Por padrão, VitePress armazena o cache do servidor de desenvolvimento em `.vite
O arquivo de configuração (`.vitepress/config.js`) permite que você personalize vários aspectos do seu site VitePress, com as opções mais básicas sendo o título e a descrição do site:
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
// opções a nível do site
title: 'VitePress',
@ -147,7 +146,7 @@ VitePress também fornece a habilidade de gerar URLs limpas, reescrever caminhos
A ferramenta deve ter também injetado os seguintes scripts npm no seu `package.json` se você permitiu isso durante o processo de instalação:
Como [`Theme.enhanceApp`](./custom-theme#theme-interface) pode ser assíncrono, você pode importar condicionalmente e registrar plugins Vue que acessam APIs do navegador na importação:
Файл загрузчика данных должен заканчиваться либо `.data.js`, либо `.data.ts`. Файл должен предоставлять экспорт объекта по умолчанию с помощью метода `load()`:
```js
// example.data.js
```js [example.data.js]
export default {
load() {
return {
@ -83,8 +82,7 @@ export default {
При создании сайта, ориентированного на контент, нам часто приходится создавать страницы типа «архив», или «индекс», на которых мы перечисляем все доступные записи в нашей коллекции контента. Например, записи в блоге или страницы API. Мы **можем** реализовать это напрямую с помощью API загрузчика данных, но поскольку это очень распространённый случай использования, VitePress также предоставляет функцию `createContentLoader`, чтобы упростить эту задачу:
2. Создайте файл с именем `.gitlab-ci.yml` в корне вашего проекта с приведённым ниже содержимым. Это позволит создавать и развёртывать ваш сайт каждый раз, когда вы вносите изменения в его содержимое:
CSS темы по умолчанию можно настроить, переопределив переменные CSS корневого уровня:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import './custom.css'
@ -46,8 +45,7 @@ VitePress использует [Inter](https://rsms.me/inter/) в качеств
Чтобы не включать Inter в вывод сборки, импортируйте тему из `vitepress/theme-without-fonts`:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'
@ -68,8 +66,7 @@ export default DefaultTheme
Если ваш шрифт — это локальный файл, на который ссылаются через `@font-face`, он будет обработан как ресурс и включён в каталог `.vitepress/dist/assets`с хэшированным именем файла. Чтобы предварительно загрузить этот файл, используйте хук сборки [transformHead](../reference/site-config#transformhead):
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
transformHead({ assets }) {
// настраиваем regex соответствующим образом, чтобы он соответствовал вашему шрифту
Компонент `<Layout/>` темы по умолчанию имеет несколько слотов, которые можно использовать для вставки содержимого в определённые места страницы. Вот пример внедрения компонента в структуру before:
Файл конфигурации (`.vitepress/config.js`) позволяет настраивать различные аспекты сайта VitePress, самыми основными из которых являются название и описание сайта:
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
// параметры сайта
title: 'Заголовок сайта',
@ -147,7 +146,7 @@ VitePress также предоставляет возможность гене
Мастер настройки также должен был внедрить следующие скрипты npm в ваш `package.json`, если вы разрешили ему это сделать в процессе установки:
Поскольку [`Theme.enhanceApp`](./custom-theme#theme-interface) может быть асинхронным, вы можете условно импортировать и регистрировать плагины Vue, которые получают доступ к API браузера при импорте:
Вы можете добавить пользовательские компоненты в панель навигации с помощью опции `component`. Ключ `component` должен быть именем компонента Vue и должен быть зарегистрирован глобально с помощью [Theme.enhanceApp](../guide/custom-theme#theme-interface).
```js
// .vitepress/config.js
```js [.vitepress/config.js]
export default {
themeConfig: {
nav: [
@ -192,8 +191,7 @@ export default {
Затем необходимо зарегистрировать компонент глобально:
```js
// .vitepress/theme/index.js
```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import MyCustomComponent from './components/MyCustomComponent.vue'
当构建一个内容为主的站点时,我们经常需要创建一个“归档”或“索引”页面:一个我们可以列出内容中的所有可用条目的页面,例如博客文章或 API 页面。我们**可以**直接使用数据加载 API 实现这一点,但由于这会经常使用,VitePress 还提供了一个 `createContentLoader` 辅助函数来简化这个过程: