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.
Adicionar uma página React#
Criar um arquivo /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:
---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.