Páginas y estilos · Docusaurus

Docusaurus proporciona soporte para escribir páginas como componentes React dentro de la carpeta de sitio web/páginas la cual compartirá la misma cabecera, pie de página y estilos del resto del sitio.

URLs para páginas

Cualquier archivo .js en website/pages será renderizado como html estático usando la ruta del archivo despues de "pages". Los archivos en website/pages/en serán copiados en pages e invalidará cualquier archivo con el mismo nombre en pages. Por ejemplo, la página para el archivo website/pages/en/help.js se encuentra en la url ${baseUrl}en/help.js, así como la dirección url ${baseUrl}help.js, donde ${baseUrl} es el campo baseUrl colocado en [ archivo siteConfig.js](/docs/es-ES/configuración del sitio.html).

La pagina necesita rutas

Docusaurus proporciona algunos componentes útiles React para que los usuarios escriban sus propias páginas. Estos se pueden encontrar en el módulo CompLibrary. Este módulo se ofrece como parte de Docusaurus en node_modules/docusaurus, así que para acceder a él, las páginas en la carpeta pages se copian temporalmente en node_modules/docusaurus cuando se renderizan a html estático. Esto significa, como se ve en los archivos de ejemplo, que el usuario de la página en pages/en/index.js usa la ruta requerida a "../../core/CompLibrary.js" para importar los componentes proporcionados.

Esto significa que si el usuario desea usar el módulo CompLibrary, debe asegurarse de introducir correctamente la ruta requerida. Por ejemplo, una página en page/mypage.js debe utilizar una ruta "../core/CompLibrary.js".

Si se desea utilizar componentes propios dentro de la carpeta del sitio web, utilice process.cwd(), el cual lo referirá a la carpeta websitepara construir las rutas requeridas. Por ejemplo, si se añade un componente a website/core/mycomponent.js, se puede utilizar la ruta "process.cwd() + /core/mycomponent.js".

Componentes proporcionados

Docusaurus ofrece los siguientes componentes en CompLibrary:

`CompLibrary.MarkdownBlock`

A React component that parses markdown and renders to HTML.

Ejemplo:

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	Type	Default	Description
padding	Array of `'all'`, `'bottom'`, `'left'`, `'right'`, `'top'`	`[]`	Positions of the padding.
background	One of `'dark'`, `'highlight'`, `'light'`	`null`	Background styling of the element.
className	String	-	Custom class to add to the element.

Example

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

`CompLibrary.GridBlock`

Un componente React para organizar texto e imágenes.

Props

Prop	Type	Default	Description
align	One of `'left'`, `'center'`, `'right'`	`'left'`	Text alignment of content.
layout	One of `'twoColumn'`, `'threeColumn'`, `'fourColumn'`	`'twoColumn'`	Number of column sections in the `GridBlock`.
className	String	-	Custom class to add to the element.
contents	Array of content objects	`[]`	Contents of each section of the GridBlock. Refer to the next table for the fields available on a content object.

Content Object

Key	Type	Default	Description
title	String	-	The display title of this section, which is parsed using Markdown
content	String	-	The text of this section, which is parsed using Markdown
image	String	-	The path of the display image
imageAlt	String	-	The text that will be shown in case the image is not available
imageAlign	One of `'top'`, `'left'`, `'bottom'`, `'right'`	`'left'`	Image alignment relative to the text
imageLink	String	-	Link destination from clicking the image

Example

<GridBlock
  align="center"
  layout="threeColumn"
  className="myCustomClass"  
  contents={[
    {
      title: `[Learn](${siteConfig.baseUrl}docs/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 repo for its website set-up.

Traduciendo cadenas

Cuando se habilitan las traducciones, cualquier página dentro de website/pages/en se traducirá para todos los idiomas habilitados. Las Urls para páginas que no sean en inglés utilizarán sus etiquetas de idioma como se especifica en el archivo languages. js. Por ejemplo La url para una página en francés de website/pages/en/help. js se encontraría en ${baseUrl}fr/help. html.

Cuando escriba las páginas que desea traducir, envuelva cualquier cadena que desee traducir dentro de una etiqueta <translate> por ejemplo.,

<p><translate>Me gustan las traducciones</translate></p>

También puede proporcionar un atributo de descripción opcional para proporcionar contexto a los traductores. por ejemplo

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

Agregue la siguiente instrucción de requerimiento también:

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

Tenga en cuenta que esta ruta es válida para archivos dentro de pages/en y debe ajustarse en consecuencia si los archivos están en ubicaciones diferentes, como se discutió arriba.

Uso de activos estáticos

Los activos estáticos se deben colocar en la carpeta website/static. They can be accessed by their paths, excluding "static". Por ejemplo, si el baseUrl es "/ docusaurus /", una imagen en website/static/img/logo.png está disponible en /docusaurus/img/logo.png.

Estilos

You should configure your site's primary, secondary, and code block colors using the colors field in siteConfig as specified [here](/docs/es-ES/configuración del sitio.html). También puede configurar otros colores de la misma manera que se describe en el documento siteConfig.

Puede proporcionar sus propios estilos personalizados agregándolos en cualquier lugar de la carpeta website/static. Any .css files you provide in the static folder will get concatenated to the end of Docusaurus' provided styles, allowing you to add to or override Docusaurus default styles as you wish.

Una forma fácil de descubrir qué clases desea anular o agregar es iniciar su servidor localmente y usar la herramienta de elemento inspeccionar de su navegador.