2.6 KiB

Raw Blame History

Layout

Você pode escolher o layout da página definindo a opção de layout para o frontmatter da página. Há três opções de layout: doc, page e home. Se nada for especificado, a página será tratada como página doc.

---
layout: doc
---

Layout do documento

A opção doc é o layout padrão e estiliza todo o conteúdo Markdown com o visual de "documentação". Ela funciona agrupando todo o conteúdo na classe CSS vp-doc, e aplicando os estilos aos elementos abaixo dela.

Quase todos os elementos genéricos, como p ou h2, recebem um estilo especial. Portanto, lembre-se de que se você adicionar qualquer HTML personalizado dentro de um conteúdo Markdown, ele também será afetado por esses estilos.

Ele também fornece recursos específicos de documentação listados abaixo. Esses recursos estão habilitados apenas neste layout.

Editar link
Links Anterior e Próximo
Outline
Carbon Ads

Layout da Página

A opção page é tratada como "página em branco". O Markdown ainda será processado e todas as Extensões Markdown funcionarão da mesma forma que o layout doc, mas este não receberá nenhum estilo padrão.

O layout da página permitirá que você estilize tudo sem que o tema VitePress afete a marcação. Isso é útil quando você deseja criar sua própria página personalizada.

Observe que mesmo neste layout, a barra lateral ainda aparecerá se a página tiver uma configuração de barra lateral correspondente.

Layout da Home

A opção home gerará um modelo de "Homepage". Nesse layout você pode definir opções extras, como hero e features, para personalizar ainda mais o conteúdo. Visite Tema padrão: Página Inicial para obter mais detalhes.

Sem Layout

Se você não quiser nenhum layout, pode passar layout: false pelo frontmatter. Esta opção é útil se você deseja uma página de destino totalmente personalizável (sem barra lateral, barra de navegação ou rodapé por padrão).

Layout Personalizado

Você também pode usar um layout personalizado:

---
layout: foo
---

Isto irá procurar um componente chamado foo registrado no contexto. Por exemplo, você pode registrar seu componente globalmente em .vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme'
import Foo from './Foo.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('foo', Foo)
  }
}

2.6 KiB Raw Blame History