mirror of https://github.com/vuejs/vitepress
parent
f418cefb33
commit
9d49c7ab1e
@ -0,0 +1,63 @@
|
||||
# Layout {#layout}
|
||||
|
||||
Puedes elegir el layout de la página definiendo una opción de `layout` para el [frontmatter](./frontmatter-config) De la página. Hay tres opciones de layout: `doc`, `page` y `home`. Si no se especifica nada, la página será tratada como una página. `doc`.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
```
|
||||
|
||||
## Layout del documento {#doc-layout}
|
||||
|
||||
La opción `doc` es el layout predeterminado y aplca estlo a todo el contenido de Markdown el aspecto de "documentación". Funciona agrupando todo el contenido en la clase CSS `vp-doc`, y aplicando estilos a los elementos debajo de ella.
|
||||
|
||||
Casi todos los elementos genéricos como `p` o `h2`, recibir un estilo especial. Por tanto, recuerda que si añades algún HTML contenido personalizado dentro del contenido Markdown, también se verá afectado por estos estilos.
|
||||
|
||||
También proporciona recursos de documentación específicos que se enumeran a continuación. Estas funciones solo están habilitadas en este layout.
|
||||
|
||||
- Editar link
|
||||
- Links Anterior y próximo.
|
||||
- _Outline_
|
||||
- [Carbon Ads](./default-theme-carbon-ads)
|
||||
|
||||
## Layout de la Página {#page-layout}
|
||||
|
||||
La opción `page` se trata como una 'página en blanco'. Markdown aún se procesará y todo [Extensiones Markdown](../guide/markdown) funcionará de la misma manera que el layout `doc`,
|
||||
pero esto no recibirá ningún estilo predeterminado.
|
||||
|
||||
El layout de la página le permitirá diseñar todo sin que el tema de VitePress afecte el marcado. Esto es útil cuando desea crear su propia página personalizada.
|
||||
|
||||
Tenga en cuenta que incluso en este mismo layout, a barra lateral seguirá apareciendo si la página tiene una configuración de barra lateral correspondiente.
|
||||
|
||||
## Layout de Home {#home-layout}
|
||||
|
||||
La opción `home` gerará un modelo de _"Homepage"_. En este layout você pofra definir opciones extras, como `hero` y `features`, para personalizar todavá más el contenido. Visite [Tema padrão: Página Inicial](./default-theme-home-page) para obter más detalles.
|
||||
|
||||
## Sin Layout {#no-layout}
|
||||
|
||||
Si no quieres ningún diseño, puedes pasar `layout: false` a través del frontmatter. Esta opción es útil si deseas una página de destino completamente personalizable (sin barra lateral, barra de navegacón o pie de página por defecto).
|
||||
|
||||
## Layout Personalizado {#custom-layout}
|
||||
|
||||
También puedes usar un layout personalizado:
|
||||
|
||||
```md
|
||||
---
|
||||
layout: foo
|
||||
---
|
||||
```
|
||||
|
||||
Esto buscará un componente llamado `foo` registrado en contexto. Por ejemplo, puede registrar su componente globalmente en `.vitepress/theme/index.ts`:
|
||||
|
||||
```ts
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import Foo from './Foo.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
app.component('foo', Foo)
|
||||
}
|
||||
}
|
||||
```
|
Loading…
Reference in new issue