Docusaurus

Translate

Configuración del sitio

Una gran parte de la configuración del sitio se realiza editando el archivo siteConfig.js.

Mostrador de usuarios

La matriz users se usa para almacenar objetos para cada proyecto/usuario que quiera mostrar en su sitio. Actualmente, este campo se utiliza, por ejemplo, con los archivos pages/en/index.js y pages/en/users.js. Cada objeto de usuario debe tener los campos caption, image, infoLink, ypinned. The caption is the text showed when someone hovers over the image of that user, and the infoLink is where clicking the image will bring someone. El campo pinned determina si se muestra o no en la página index.

Actualmente, esta orden users solo se usa con los archivos de ejemplo index.js y users.js. Si no desea tener una página de usuarios o mostrar usuarios en la página index, puede eliminar esta sección.

campos de configuración del sitio

El objeto siteConfig contiene la mayor parte de las configuraciones para su sitio web.

Campos obligatorios

baseUrl - Url base para su sitio.

colors - Configuraciones de color para el sitio.

  • primaryColor es el color utilizado en la barra de navegación del encabezado y las barras laterales.
  • secondaryColor es el color que se ve en la segunda fila de la barra de navegación del encabezado cuando la ventana del sitio es estrecha (incluso en el móvil).
  • Las configuraciones de color personalizadas también se pueden agregar. Por ejemplo, si se agregan estilos de usuario con colores especificados como$myColor, agregar un campo myColor a colors le permitirá configurar fácilmente este color.

copyright - The copyright string at footer of site and within feed

favicon - url para el favicon del sitio.

headerIcon - url para el icono utilizado en la barra de navegación del encabezado.

headerLinks - Enlaces que se usarán en la barra de navegación del encabezado. El campo label de cada objeto será el texto del enlace y también se traducirá para cada idioma.

Ejemplo de uso:

headerLinks: [
  // Links to document with id doc1 for current language/version
  { doc: "doc1", label: "Getting Started" },
  // Link to page found at pages/en/help.js or if that does not exist, pages/help.js, for current language
  { page: "help", label: "Help" },
  // Links to href destination
  { href: "https://github.com/", label: "GitHub" },
  // Links to blog generated by Docusaurus (${baseUrl}blog)
  { blog: true, label: "Blog" },
  // Determines search bar position among links
  { search: true },
  // Determines language drop down position among links
  { languages: true }
],

noIndex - Boolean. If true, Docusaurus will politely ask crawlers and search engines to avoid indexing your site. This is done with a header tag and so only applies to docs and pages. Will not attempt to hide static resources. This is a best effort request. Malicious crawlers can and will still index your site.

organizationName - GitHub username of the organization or user hosting this project. This is used by the publishing script to determine where your GitHub pages website will be hosted.

projectName - Nombre del proyecto. Esto debe coincidir con el nombre del proyecto de repositorio de GitHub (distingue entre mayúsculas y minúsculas).

tagline - Lema para su sitio web.

title - Título para su sitio web.

url - url para su sitio.

Campos opcionales

algolia - Information for Algolia search integration. If this field is excluded, the search bar will not appear in the header. You must specify two values for this field, and one (appId) is optional.

  • apiKey - the Algolia provided API key for your search.
  • indexName - the Algolia provided index name for your search (usually this is the project name)
  • appId - Algolia provides a default scraper for your docs. If you provide your own, you will probably get this id from them.

blogSidebarCount - Control the number of blog posts that show up in the sidebar. See the adding a blog docs for more information.

cname - The CNAME for your website. It will go into a CNAME file when your site it built.

customDocsPath - By default, Docusaurus expects your documentation to be in a directory called docs. This directory is at the same level as the website directory (i.e., not inside the website directory). You can specify a custom path to your documentation with this field. Note that all of your documentation *.md files must still reside in a flat hierarchy. You cannot have your documents in nested directories.

customDocsPath: "docs/site"

customDocsPath: "website-docs"

disableHeaderTitle - Una opción para deshabilitar mostrando el título en el encabezado al lado del ícono del encabezado. Excluya este campo para mantener el encabezado como normal; de lo contrario, establezca en true.

disableTitleTagline - Una opción para deshabilitar mostrando el tagline en el título de las páginas principales. Excluya este campo para mantener los títulos de las páginas como Title • Tagline. Establézcalo en true para hacer que los títulos de la página sean solo Title.

editUrl - url para editar documentos, ejemplo de uso: editUrl + 'en/doc1.md'. Si se omite este campo, no habrá un botón "Editar este documento" para cada documento.

facebookAppId - If you want Facebook Like/Share buttons at the bottom of your blog posts, provide a Facebook application id, and the buttons will show up on all blog posts.

facebookPixelId - Facebook Pixel ID to track page views.

fonts - Font-family css configuration for the site. If a font family is specified in siteConfig.js as $myFont, then adding a myFont key to an array in fonts will allow you to configure the font. Items appearing earlier in the array will take priority of later elements, so ordering of the fonts matter.

In the below example, we have two sets of font configurations, myFont and myOtherFont. Times New Roman is the preferred font in myFont. -apple-system is the preferred in myOtherFont.

fonts: {
  myFont: [
    "Times New Roman",
    "Serif"
  ],
  myOtherFont: [
    "-apple-system",
    "system-ui"
  ]
},

The above fonts would be represented in your CSS file(s) as variables $myFont and $myOtherFont.

h1 {
  font-family: $myFont;
}

footerIcon - url para un icono de pie de página. Actualmente se utiliza en el archivo core/Footer.js proporcionado como ejemplo, pero se puede eliminar de ese archivo.

gaTrackingId - ID de seguimiento de Google Analytics para rastrear páginas vistas.

highlight - Syntax highlighting options:

  • theme is the name of the theme used by Highlight.js when highlighting code. You can find the list of supported themes here.
  • version specifies a particular version of Highlight.js to be used.
  • hljs provides an escape valve by passing an instance of Highlight.js to the function specified here, allowing additional languages to be registered for syntax highlighting.
  • defaultLang defines a default language. It will be used if one is not specified at the top of the code block. You can find the list of supported languages here.

markdownPlugins - An array of plugins to be loaded by Remarkable, the markdown parser and renderer used by Docusaurus. The plugin will receive a reference to the Remarkable instance, allowing custom parsing and rendering rules to be defined.

ogImage - url for an Open Graph image. This image will show up when your site is shared on Facebook, Twitter and any other websites/apps where the Open Graph protocol is supported.

onPageNav - If you want a visible navigation option for representing topics on the current page. Currently, there is one accepted value for this option:

scripts - Array of JavaScript sources to load. The script tag will be inserted in the HTML head.

separateCss - Folders inside which any css files will not be processed and concatenated to Docusaurus' styles. Esto es para admitir páginas html estáticas que pueden estar separadas de Docusaurus con estilos completamente separados.

stylesheets - Array of CSS sources to load. The link tag will be inserted in the HTML head.

translationRecruitingLink - url for the Help Translate tab of language selection when languages besides English are enabled. Esto puede incluir que está usando traducciones pero no tiene que ser así.

twitter - set this to true if you want a Twitter social button to appear at the bottom of your blog posts.

useEnglishUrl - If you do not have translations enabled (e.g., by having a languages.js file), but still want a link of the form /docs/en/doc.html (with the en), set this to true.

usuarios: la orden usuarios mencionada anteriormente.

wrapPagesHTML - boolean flag to indicate whether html files in /pages should be wrapped with Docusaurus site styles, header and footer. This feature is experimental and relies on the files being html fragments instead of complete pages. It inserts the contents of your html file with no extra processing. Defaults to false.

Los usuarios también pueden agregar sus propios campos personalizados si desean proporcionar algunos datos a través de diferentes archivos.

Ejemplo de siteConfig.js con todos los campos

const users = [
  {
    caption: "User1",
    image: "/test-site/img/docusaurus.svg",
    infoLink: "https://www.example.com",
    pinned: true
  }
];

const siteConfig = {
  title: "Docusaurus",
  tagline: "Generate websites!",
  url: "https://docusaurus.io",
  baseUrl: "/",
// For github.io type URLS, you would combine the url and baseUrl like:
// url: "https://reasonml.github.io",
// baseUrl: "/reason-react/",
  organizationName: "facebook",
  projectName: "docusaurus",
  noIndex: false,
// For no header links in the top nav bar -> headerLinks: [],
  headerLinks: [
    { doc: "doc1", label: "Docs" },
    { page: "help", label: "Help" },
    { search: true },
    { blog: true }
  ],
  headerIcon: "img/docusaurus.svg",
  favicon: "img/favicon.png",
  colors: {
    primaryColor: "#2E8555",
    secondaryColor: "#205C3B"
  },
  editUrl: "https://github.com/facebook/docusaurus/edit/master/docs/",
// users variable set above
  users,
  disableHeaderTitle: true,
  disableTitleTagline: true,
  separateCss: ["static/css/non-docusaurus", "static/assets/separate-css"],
  footerIcon: "img/docusaurus.svg",
  translationRecruitingLink:
    "https://crowdin.com/project/docusaurus",
  algolia: {
    apiKey:
      "0f9f28b9ab9efae89810921a351753b5",
    indexName: "github"
  },
  gaTrackingId: "U-A2352",
  highlight: {
    theme: 'default'
  },
  markdownPlugins: [
    function foo(md) {
      md.renderer.rules.fence_custom.foo = function(tokens, idx, options, env, instance) {
        return '<div class="foo">bar</div>';
      }
    }
  ],
  scripts: [ "https://docusaurus.io/slash.js" ],
  stylesheets: [ "https://docusaurus.io/style.css" ],
  facebookAppId: "1615782811974223",
  facebookPixelId: "352490515235776",
  twitter: "true"
};

module.exports = siteConfig;
← Páginas y estilos