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
Check the Pages Plugin API Reference documentation for an exhaustive list of options.
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.