Translate

Custom Pages

Você pode adicionar páginas ao seu site que não façam parte dos arquivos Markdown padrões para documentos ou posts de blog. Você pode fazer isso adicionando arquivos .js ao diretório website/pages. Esses arquivos são componentes React, e o método render() é chamado para criá-las, apoiado por classes CSS, etc.

Personalizando sua página inicial

A maneira mais fácil de começar a personalizar sua página inicial é usar o site de exemplo que foi criado quando você executou o script de inicialização do Docusaurus.

Você pode iniciar seu servidor local e ir para http://localhost:3000 para ver a aparência da página inicial de exemplo. A partir daí, edite o arquivo website/pages/en/index.js e seus vários componentes para usar as imagens e o texto que você quiser para seu projeto.

Adicionando outras páginas personalizadas

Docusaurus provides some helpful example pages in the website/pages/en directory, including index.js, users.js, and help.js. Esses são bons exemplos que demonstram como criar uma página personalizada no Docusaurus.

diretório-raiz
├── docs
└── website
    ├── blog
    ├── core
    │   └── Footer.js
    ├── package.json
    ├── pages
    │   ├── index.js
    │   ├── users.js
    │   └── help.js
    ├── sidebars.json
    ├── siteConfig.js
    └── static

You are also free to write your own pages. Sugerimos fortemente que você tenha pelo menos uma página inicial (index), mas nenhuma das páginas fornecidas são obrigatórias para o funcionamento do site. Mais informações sobre como usar os componentes fornecidos ou como incluir seus próprios podem ser encontradas aqui. Para saber mais sobre como criar links para suas diferentes páginas nos menus de navegação do seu site, veja aqui.

Se quiser que sua página apareça no menu de navegação, você precisará atualizar o siteConfig.js para adicionar o elemento headerLinks. Exemplo: { page: 'sobre-o-slash', label:'Sobre o /' },

Adicionando páginas estáticas

Arquivos .html estáticos também podem ser usados, mas eles não vão contar com o cabeçalho, o rodapé ou os estilos do Docusaurus por padrão. Eles podem ser adicionados ao diretório static da mesma maneira que outros assets estáticos. Ou ainda, eles podem ser colocados no diretório pages, e eles seriam servidos exatamente como estão, em vez de serem renderizados pelo React.

Caso deseje usar a folha de estilos padrão do Docusaurus, você pode acessá-la em ${baseUrl}css/main.css. Caso queira usar arquivos CSS separados para essas páginas estáticas, você pode impedir que eles sejam concatenados ao CSS do próprio Docusaurus adicionando eles ao campo siteConfig.separateCss no siteConfig.js.

Você pode definir a opção de configuração do site $wrapPagesHTML para que fragmentos HTML brutos sejam envolvidos pelo cabeçalho, rodapé e estilos do Docusaurus.

Personalizando seu rodapé

Fique à vontade para pegar o arquivo de exemplo core/Footer.js que foi criado quando você executou o script de inicialização do Docusaurus e editá-lo para incluir todos os links para as páginas do seu site ou de outros sites que você quiser colocar.

O rodapé de exemplo tem três colunas, com uma imagem à esquerda e a logo do Facebook Open Source e o texto de copyright logo abaixo. Se seu projeto não for um projeto de código aberto do Facebook, tire a logo e o copyright. De um jeito ou de outro, fique à vontade para usar sua criatividade e fazer seu rodapé ficar do jeito que você sempre quis!

Só algumas sugestões de links que você pode colocar no rodapé, caso venha a calhar: documentação, API, Twitter, servidor do Discord, grupos no Facebook, Stack Overflow, GitHub, etc.

Seu rodapé vai aparecer em todas as páginas do seu site, inclusive na documentação e nos posts do blog. A única exceção pra isso são as páginas HTML estáticas que você incluir.

Se você não quiser que seu site tenha um rodapé, é só alterar a função render no core/Footer.js para que ela retorne null. Por exemplo:

const React = require('react');

class Footer extends React.Component {
  render() {
    return null;
  }
}

module.exports = Footer;