Translate

Pages and Styles

O Docusaurus permite que você crie páginas na forma de componentes React dentro do diretório website/pages, as quais usarão o mesmo cabeçalho, rodapé e estilos do resto do site.

Provided Props

Docusaurus provides your siteConfig.js as a config props. Hence, you can access baseUrl or title through this props.

Exemplo

const React = require('react');

class MyPage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return <div>{siteConfig.title}</div>;
  }
}

module.exports = MyPage;

URLs das páginas

Todos os arquivos .js em website/pages serão convertidos para HTML estático usando o caminho do arquivo dentro de pages. Os arquivos em website/pages/en também serão copiados para pages e irão SOBRESCREVER quaisquer arquivos com o mesmo nome em pages. Por exemplo, a página para o arquivo website/pages/en/help.js será encontrada no URL ${baseUrl}en/help. js assim como a URL ${baseUrl}help.js, onde ${baseUrl} é o conjunto de campos baseUrl no seu arquivo siteConfig.js.

Títulos das páginas

Por padrão, o título de sua página é <title> • <tagline> onde os campos title e tagline são definidos em siteConfig.js. Você pode excluir a tagline no título alterando disableTitleTagline para true. Se você deseja definir um título específico para suas páginas personalizadas, adicione uma propriedade de classe title no seu componente React exportado.

Exemplo:

const React = require('react');

class MyPage extends React.Component {
  render() {
    // ... seu código de renderização
  }
}

MyPage.title = 'My Custom Title';

module.exports = minha página;

Descrição de páginas

O padrão é a descrição da sua página ser tagline em siteConfig.js. Se você quiser definir uma descrição específica nas suas páginas personalizadas, adicione uma propriedade de classe description no seu componente React exportado.

Exemplo:

const React = require('react');

class MyPage extends React.Component {
  render() {
    // ... seu código de renderização
  }
}

MyPage.title = 'Minha Descrição';

module.exports = MyPage;

This will be translated to a description metadata tag on the generated HTML.

<meta property="og:description" content="My Custom Description" />
<meta name="description" content="My Custom Description" />

Page Require Paths

Docusaurus provides a few useful React components for users to write their own pages, found in the CompLibrary module. This module is provided as part of Docusaurus in node_modules/docusaurus, so to access it, pages in the pages directory are temporarily copied into node_modules/docusaurus when rendering to static HTML. As seen in the example files, this means that a user page at pages/en/index.js uses a require path to '../../core/CompLibrary.js' to import the provided components.

What this means to the user is that if you wish to use the CompLibrary module, make sure the require path is set correctly. For example, a page at page/mypage.js would use a path '../core/CompLibrary.js'.

If you wish to use your own components inside the website directory, use process.cwd() which will refer to the website directory to construct require paths. For example, if you add a component to website/core/mycomponent.js, you can use the require path, 'process.cwd() + /core/mycomponent.js'.

Provided Components

Docusaurus provides the following components in CompLibrary:

CompLibrary.MarkdownBlock

A React component that parses markdown and renders to HTML.

Exemplo:

const MarkdownBlock = CompLibrary.MarkdownBlock;

<MarkdownBlock>
  [Markdown syntax for a link](http://www.example.com)
</MarkdownBlock>;

CompLibrary.Container

A React container component using Docusaurus styles. Has optional padding and background color props that you can configure.

Props

Prop	Tipo	Padrão	Descrição
padding	Array de 'all', 'bottom', 'left', 'right', 'top'	[]	Posições do preenchimento.
background	Um dentre 'dark', 'highlight' ou 'light'	null	Estilo de plano de fundo do elemento.
className	String	-	Classe personalizada para adicionar ao elemento.

Exemplo

<Container
  padding={['bottom', 'top']}
  background="light"
  className="myCustomClass">
  ...
</Container>

CompLibrary.GridBlock

A React component to organize text and images.

Props

Prop	Tipo	Padrão	Descrição
align	Um dentre 'left', 'center' ou 'right'	'left'	Alinhamento de texto do conteúdo.
layout	Um dentre 'twoColumn', 'threeColumn' ou 'fourColumn'	'twoColumn'	Número de seções de coluna no GridBlock.
className	String	-	Classe personalizada para adicionar ao elemento.
contents	Array de objetos de conteúdo	[]	O conteúdo de cada seção do GridBlock. Consulte a próxima tabela para ver os campos disponíveis em um objeto de conteúdo.

Content Object

Chave	Tipo	Padrão	Descrição
title	String	-	O título desta seção, que aceita a sintaxe Markdown
content	String	-	O conteúdo textual desta seção, que aceita a sintaxe Markdown
image	String	-	O caminho da imagem destacada
imageAlt	String	-	O texto que será mostrado caso a imagem não esteja disponível
imageAlign	Um dentre 'top', 'left', 'bottom' ou 'right'	'left'	Alinhamento da imagem em relação ao texto
imageLink	String	-	Link de destino ao clicar na imagem

Exemplo

<GridBlock
  align="center"
  layout="threeColumn"
  className="myCustomClass"
  contents={[
    {
      title: `[Learn](${siteConfig.baseUrl}${siteConfig.docsUrl}/tutorial.html)`,
      content: 'Learn how to use this project',
      image: siteConfig.baseUrl + 'img/learn.png',
      imageAlt: 'Learn how to use this project',
      imageLink: siteConfig.baseUrl + 'docs/tutorial.html',
    },
    {
      title: 'Frequently Asked Questions',
      content: 'Questions gathered from the community',
      image: siteConfig.baseUrl + 'img/faq.png',
      imageAlign: 'top',
    },
    {
      title: 'More',
      content: 'Lots of documentation is on this site',
    },
  ]}
/>

More examples of how these components are used can be found in the generated example files as well as in Docusaurus' own repository for its website set-up.

Translating Strings

When translations are enabled, any pages inside website/pages/en will be translated for all enabled languages. URLs for non-English pages will use their language tags as specified in the languages.js file. E.g. The URL for a French page of website/pages/en/help.js would be found at ${baseUrl}fr/help.html.

When writing pages that you wish to translate, wrap any strings to be translated inside a <translate> tag. Por exemplo:

<p>
  <translate>I like translations</translate>
</p>

You can also provide an optional description attribute to provide context for translators. e.g,

<a href="/community">
  <translate desc="Footer link to page referring to community GitHub and Slack">
    Community
  </translate>
</a>

Add the following require statement as well:

const translate = require('../../server/translate.js').translate;

Note that this path is valid for files inside pages/en and should be adjusted accordingly if files are in different locations, as discussed above.

Using Static Assets

Static assets should be placed into the website/static directory. They can be accessed by their paths, excluding static. For example, if the site's baseUrl is /docusaurus/, an image in website/static/img/logo.png is available at /docusaurus/img/logo.png.

Styles

You should configure your site's primary, secondary, and code block colors using the colors field in siteConfig as specified here. You can also configure other colors in the same way as described in the siteConfig doc.

Existem várias maneiras de acessar os estilos padrão fornecidos para o seu site. Se você começou a desenvolver seu site e executou o comando docusaus-init ou o yarn install, os seus estilos padrão podem ser encontrados em website/node_modules/docusaurus/lib/static/css/main.css. Alternatively, the main.css file may be inspected directly at the Docusaurus GitHub repository.

You can provide your own custom styles by adding them anywhere in the website/static directory. Any .css files you provide in the static directory will get concatenated to the end of Docusaurus' provided styles, allowing you to add to or override Docusaurus default styles as you wish.

One way to figure out what classes you wish to override or add to is to start your server locally and use your browser's inspect element tool.