Pular para o conteúdo principal

Customização

Explore a possibilidade de customizar o seu portal com o Docusaurus.

Cores​

Utilizamos variáveis CSS para controlar as cores e estilos de diferentes componentes da interface. Essas variáveis permitem uma personalização rápida e eficiente, sem a necessidade de modificar diretamente o código-fonte.

Variáveis globais​

As variáveis globais definem as cores principais do portal:

  • --custom-primary-color: - Cor principal do produto.
  • --custom-secondary-color: Cor secundária do produto.
  • --ifm-color-primary: Cor primária utilizada pelo Docusaurus em elementos como links e navegação entre as páginas.

Componentes customizáveis​

A seguir estão as variáveis específicas para personalização de diferentes componentes:

Você pode ajustar as cores do cabeçalho, tanto para o modo claro quanto para o modo escuro:

  • --custom-header-bg-color: Cor de fundo do cabeçalho no modo claro
  • --custom-header-bg-color-dark: Cor de fundo do cabeçalho no modo escuro

Cards com imagens​

Personalize o fundo dos cards que contêm imagens:

  • --custom-featuredcard-bg-color: Cor de fundo do card com imagem no modo claro
  • --custom-featuredcard-bg-color-dark: Cor de fundo do card com imagem no modo escuro

Cards sem imagens​

Para cards que não possuem imagens, você também pode ajustar as cores de fundo:

  • --custom-linkcard-bg-color: Cor de fundo do card sem imagem no modo claro
  • --custom-linkcard-bg-color-dark: Cor de fundo do card sem imagem no modo escuro

Customize a cor de fundo do rodapé de acordo com o tema claro ou escuro:

  • --custom-footer-bg-color: Cor de fundo do rodapé no modo claro
  • --custom-footer-bg-color-dark: Cor de fundo do rodapé no modo escuro

Aplicar o tema escuro​

Para aplicar o modo escuro, basta utilizar a classe [data-theme='dark']. Quando este atributo é aplicado ao elemento body, o sistema irá automaticamente carregar as configurações de cores associadas ao modo escuro.

custom-style.css
[data-theme='dark'] {
  --ifm-color-primary: var(--custom-primary-color); /* Cor primária no modo escuro */
}

Como personalizar as cores​

  1. Abra o arquivo custom-style.css
  2. Altere o valor da variável que deseja modificar a cor
  3. Salve o arquivo
Exemplo do NDL
/custom-style.css
:root {
  --custom-primary-color: #489cc1;
  --custom-secondary-color: #B682AC;

  --ifm-color-primary: var(--custom-primary-color);

  /* HEADER */
  --custom-header-bg-color: #ffffff;
  --custom-header-bg-color-dark: #489cc1;
  --custom-header-text-color: #489cc1;
  --custom-header-text-color-dark: #ffffff;
  /* HEADER */

  /* CARDS COM IMAGENS */
  --custom-featuredcard-bg-color: #ffffff;
  --custom-featuredcard-bg-color-dark: #0a0a0a;
  /* CARDS COM IMAGENS */

  /* CARDS SEM IMAGENS */
  --custom-linkcard-bg-color: #ffffff;
  --custom-linkcard-bg-color-dark: #0a0a0a;
  /* CARDS SEM IMAGENS */

  /* FOOTER */
  --custom-footer-bg-color: #ffffff;
  --custom-footer-bg-color-dark: var(--custom-secondary-color);
  /* FOOTER */
}

Exemplo NDL

Cores primárias dos produtos​

Abaixo você encontra uma tabela com as cores primárias, retirada dos materiais de marketing e UX.

ProdutoCor Hexadecimal
NDD Orbix#9622B2
NDD Print#0062CC
NDD Space#1EC1A6
Kubo#F76466
NDD Move#00B34D
NDD Cargo#CC0000
NDD Elog#38539A
NDD Frete#E24B00
NDD I-docs#7944E0
NDD Averba#419057

Componentes​

Como vimos, é possível realizar a alteração das cores dos componentes, além disso você também pode realizar outras customizações.

O banner é um componente que traz a informação com o nome do Produto e um subtítulo. Além de um botão call-to-action.

Configurar os textos​
  1. Acesse a pasta raiz do projeto
  2. Abra o arquivo custom-config.json
  3. Busque pela configuração "header"
    1. title: Comumente utilizado com o nome do produto
    2. tagline: Subtítulo ou chamada para o seu portal.
    3. buttonText: Texto do botão.
    4. buttonLink: Link do botão.
  4. Insira as informações de acordo com a sua marca e salve o arquivo

Veja um exemplo:

custom-config.json
{
  "header": {
    "title": "NDD Documentation Library",
    "tagline": "Uma iniciativa criada para centralizar, organizar e disponibilizar documentações de forma padronizada, promovendo o reuso e a acessibilidade entre diferentes times da NDD.",
    "buttonText": "Comece agora",
    "buttonLink": "/docs/introducao"
  },

  //... 

  // Outras configurações

  //...
}
Configurar as cores​
  1. Acesse a pasta raiz do projeto
  2. Abra o arquivo custom-style.css
  3. Altere as informações conforme o desejado:
    1. --custom-header-bg-color: Variável com a cor quando o tema for light.
    2. --custom-header-bg-color-dark: Variável com a cor quando o tema for dark.

Veja um exemplo:

custom-style.css
:root {
  ...

  /* HEADER */
  --custom-header-bg-color: #ffffff;
  --custom-header-bg-color-dark: #6c48c2;
  /* HEADER */

  ...
}

O resultado será esse: Banner light Banner dark

Cards com imagens​

Os cards com imagens, são recursos para disponibilizar ao usuário acesso a informações rápidas.

Como configurar​
  1. Acesse a pasta src/components/CardFeatured
  2. Abra o arquivo card-config.json
  3. Insira as informações de acordo com o card que quer disponibilizar

Veja um exemplo:

card-config.json
{
  "cards": [
    {
      "category": "Introdução",
      "items": [
        {
          "title": "Início rápido",
          "img": "https://images.pexels.com/photos/2923/young-game-match-kids.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
          "description": "Comece com uma visão geral dos conceitos básicos e uma introdução aos principais recursos do NDL.",
          "button_text": "Leia",
          "button_link": "/docs/introducao"
        },
        {
          "title": "O que há de novo?",
          "img": "https://images.pexels.com/photos/3957616/pexels-photo-3957616.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
          "description": "Fique por dentro das últimas atualizações, novos recursos e melhorias nas nossas ferramentas e documentação.",
          "button_text": "Leia",
          "button_link": "/docs/releases/releases"
        },
        {
          "title": "Docusaurus",
          "img": "https://docusaurus.io/assets/images/slash-introducing-411a16dd05086935b8e9ddae38ae9b45.svg",
          "localImg": "img/IntroductionTopics/image.png",
          "description": "Crie portais de documentação técnica com o Docusaurus, uma ferramenta baseada em Markdown, ideal para APIs, SDKs e frameworks.",
          "button_text": "Leia",
          "button_link": "/docs/introducao"
        }
      ]
    }
  ]
}

O resultado será esse:

Cards com imagens

Cards sem imagens​

Semelhantes aos cards com imagens, este componente serve para disponibilizar ao usuário acesso a informações rápidas, porém não é possível adicionar imagens.

Como configurar​
  1. Acesse a pasta src/components/CardLink
  2. Abra o arquivo card-config.json
  3. Insira as informações de acordo com o card que quer disponibilizar

Veja um exemplo:

card-config.json
{
  "cards": [
    {
      "category": "Docusaurus",
      "items": [
        {
          "title": "Guia rápido",
          "description": "Aprenda a criar, configurar e publicar seu portal com o Docusaurus. Recomendado ter noções básicas de Git, Markdown, JavaScript e CSS.",
          "button_text": "Leia",
          "button_link": "/docs/docusaurus/guia-rapido"
        },
        {
          "title": "Documentos",
          "description": "Organize sua documentação de forma hierárquica com o recurso Docs, usando arquivos Markdown ou MDX com facilidade e estrutura.",
          "button_text": "Leia",
          "button_link": "/docs/docusaurus/documentos/documentos"
        },
        {
          "title": "Referência de API",
          "description": "Veja um exemplo completo de Documentação de Referência para APIs usando o Docusaurus, ideal para guiar seus usuários na integração com seus endpoints.",
          "button_text": "Leia",
          "button_link": "/docs/introducao"
        }
      ]
    }
  ]
}

O resultado será esse:

Cards sem imagens

O Navbar é o menu superior, onde temos o logo, o link para outras seções e a barra de pesquisa.

  1. Abra o arquivo custom-config.json
  2. Busque pela configuração navbar
  3. Na configuração logo você pode alterar três informações:
    1. alt: Texto que será mostrado caso a imagem não seja carregada
    2. srcDark: Logo quando o tema for dark
    3. srcLight: Logo quando o tema for light
observação

Você deve salvar o seu logo na pasta static/img.

  1. Salve o arquivo

Veja um exemplo:

custom-config.json
{
  //... 

  // Outras configurações

  //...

    "navbar": {
      "logo": {
        "alt": "NDL Logo",
        "src": "img/logos/logo-ndl-color.svg",
        "srcDark": "img/logos/logo-ndl-negativo.svg"
      },
    }

  //... 

  // Outras configurações

  //...
}

Rodapé​

O rodapé é um recurso essencial para organizar e disponibilizar links importantes, facilitando a navegação do usuário.

  1. Acesse a pasta src/components/Footer
  2. Abra o arquivo footer-config.json
  3. Na configuração logo você pode alterar três informações:
    1. alt: Texto que será mostrado caso a imagem não seja carregada
    2. srcDark: Logo quando o tema for dark
    3. srcLight: Logo quando o tema for light
  4. Na configuração links você pode inserir os links que deseja disponibilizar:
    1. label: Nome para o link
    2. url: URL de acesso do link
  5. Salve o arquivo

Veja um exemplo:

custom-config.json
{
  "logo": {
    "alt": "Logo NDD",
    "srcDark": "img/logos/logo-ndd-negativo.svg",
    "srcLight": "img/logos/logo-ndd-color.svg"
  },
  "links": [
    {
      "label": "Inicio",
      "url": "/docs/introducao"
    },
    {
      "label": "FAQs",
      "url": "/docs/faq"
    },
    {
      "label": "Suporte técnico",
      "url": "/docs/suporte"
    }
  ]
}
Configurar as cores​
  1. Acesse a pasta raiz do projeto
  2. Abra o arquivo custom-style.css
  3. Altere as informações conforme o desejado:
    1. --custom-footer-bg-color: Variável com a cor quando o tema for light.
    2. --custom-footer-bg-color-dark: Variável com a cor quando o tema for dark.

Veja um exemplo:

custom-style.css
:root {
 ...

  /* FOOTER */
  --custom-footer-bg-color: #ffffff;
  --custom-footer-bg-color-dark: #0a0a0a;
  /* FOOTER */
}

O resultado será esse: Rodapé light Rodapé dark