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:
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/helloReact.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 title
description: my hello page description
hide_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.