Criação de páginas
Nesta seção, vamos aprender sobre a criação de páginas no Docusaurus.
This is useful for creating one-off standalone pages like a showcase page, playground page, or support page.
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
React é usado como uma biblioteca de UI para criar páginas. Every page component should export a React component, and you can leverage the expressiveness of React to build rich and interactive content.
Criar um arquivo /src/pages/helloReact.js:
import React from 'react';
import Layout from '@theme/Layout';
export default function Hello() {
return (
<Layout title="Hello" description="Hello React Page">
<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>
);
}
Depois de salvar o arquivo, o servidor de desenvolvimento irá recarregar automaticamente as alterações. Now open http://localhost:3000/helloReact and you will see the new page you just created.
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.
Markdown pages are less flexible than React pages because it always uses the theme layout.
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/
In this component-based development era, it is encouraged to co-locate your styling, markup, and behavior together into components. 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".
note
This is merely a recommended directory structure, and you will still need to manually import the CSS module file within your component module (support/index.js).
By default, any Markdown or JavaScript file starting with _ will be ignored and no routes will be created for that file (see the exclude option).
my-website
├── src
│ └── pages
│ ├── styles.module.css
│ ├── index.js
│ ├── _ignored.js
│ ├── _ignored-folder
│ │ ├── Component1.js
│ │ └── Component2.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. If you want to create reusable components into that directory, use the exclude option (by default, files prefixed with _, test files(.test.js), and files in __tests__ directory are not turned into pages).
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.