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

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:

/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:

/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.