Ir para o conteúdo principal
Version: 2.0.0-beta.6

Criação de páginas

Nesta seção, vamos aprender sobre a criação de páginas no Docusaurus.

Isso é útil para criar páginas independentes únicas, como uma página de exibição, uma página de playground ou uma página de suporte.

A funcionalidade das páginas é fornecida por @docusaurus/plugin-content-pages.

Você pode usar componentes React, ou Markdown.

note

Páginas não possuem barras laterais, apenas os docs possuem.

info

Verifique a documentação de Referência da API do Plug-in de Páginas para obter uma lista completa de opções.

Adicionar uma página React#

Criar um arquivo /src/pages/helloReact.js:

/src/pages/helloReact.js
import React from 'react';import Layout from '@theme/Layout';
function Hello() {  return (    <Layout title="Hello">      <div        style={{          display: 'flex',          justifyContent: 'center',          alignItems: 'center',          height: '50vh',          fontSize: '20px',        }}>        <p>          Edit <code>pages/hello.js</code> and save to reload.        </p>      </div>    </Layout>  );}
export default Hello;

Depois de salvar o arquivo, o servidor de desenvolvimento irá recarregar automaticamente as alterações. Agora abra http://localhost:3000/helloReact, você verá a nova página que você acabou de criar.

Cada página não vem com nenhum estilo. Você precisará importar o componente Layout de @theme/Layout e envolver seu conteúdo nesse componente se desejar que a barra de navegação e/ou rodapé apareça.

tip

Você também pode criar páginas TypeScript com a extensão .tsx (helloReact.tsx).

Adicionar uma página de Markdown#

Crie um arquivo /src/pages/helloMarkdown.md:

/src/pages/helloMarkdown.md
---title: my hello page titledescription: my hello page descriptionhide_table_of_contents: true---
# Hello
How are you?

Da mesma forma, uma página será criada em http://localhost:3000/helloMarkdown.

Páginas Markdown são menos flexíveis do que as páginas React, porque ele sempre usa o layout de tema.

Aqui está um exemplo de página Markdown.

tip

Você também pode usar todo o poder do React em páginas Markdown, consulte a documentação de MDX.

Roteamento#

Se você estiver familiarizado com outros geradores de site estáticos como o Jekyll e o Next, esta abordagem de roteamento será familiar para você. Qualquer arquivo JavaScript que você criar sob /src/pages/ será convertido automaticamente para uma página do site, seguindo a /src/pages/ hierarquia de diretório. Por exemplo:

  • /src/pages/index.js<baseUrl>
  • /src/pages/foo.js<baseUrl>/foo
  • /src/pages/foo/test.js<baseUrl>/foo/test
  • /src/pages/foo/index.js<baseUrl>/foo/

Nesta era de desenvolvimento baseado em componentes, é encorajado a colocar seu estilo, marcação e comportamento juntos em componentes. Cada página é um componente e, se você precisar personalizar o design de sua página com seus próprios estilos, recomendamos colocar seus estilos com o componente de página em seu próprio diretório. Por exemplo, para criar uma página de "Suporte", você pode fazer o seguinte:

  • Adicione um arquivo /src/pages/support.js
  • Crie um diretório /src/pages/support/ e um arquivo /src/pages/support/index.js.

O último é preferido, pois tem os benefícios de permitir que você coloque arquivos relacionados à página dentro desse diretório. Por exemplo, um arquivo de módulo CSS (styles.module.css) com estilos destinados a serem usados apenas na página "Suporte". Nota: esta é apenas uma estrutura de diretório recomendada e você ainda precisará importar manualmente o arquivo de módulo CSS dentro do seu módulo de componentes (support/index.js). Por padrão, qualquer arquivo Markdown ou Javascript que comece com _ será ignorado, e nenhuma rota será criada para esse arquivo (veja a opção exclude).

my-website├── src│   └── pages│       ├── styles.module.css│       ├── index.js|       ├──_ignored.js│       └── support│           ├── index.js│           └── styles.module.css.
caution

Todos os arquivos de JavaScript/TypeScript dentro do diretório src/pages/ terão os caminhos do site correspondentes gerados para eles. Se você quer criar componentes reutilizáveis para esse diretório, use a opção exclude (por padrão, arquivos prefixados com _, arquivos de teste (.test.js) e arquivos no diretório __tests__ não serão transformados em páginas).

Usando React#

React é usado como uma biblioteca de UI para criar páginas. Cada componente de página deve exportar um componente React, e você pode utilizar a expressão do React para construir conteúdo rico e interativo.

Rotas duplicadas#

Você pode criar acidentalmente várias páginas que devem ser acessadas na mesma rota. Quando isso acontecer, o Docusaurus irá avisá-lo sobre rotas duplicadas quando você executar yarn start ou yarn build, mas o site ainda será construído com sucesso. A página criada por último ficará acessível, mas substituirá outras páginas conflitantes. Para resolver este problema, você deve modificar ou remover quaisquer rotas conflitantes.