Skip to main content

Footer

-Theme configuration :: Footer

Notas​

Advanced Customization​

For more advanced styling or layout changes beyond simple configuration:

  • CSS Variables: You can override specific CSS variables in your src/css/custom.css file. The footer uses --ifm-footer-* variables. To target the correct class, inspect the element in your browser's dev tools (e.g., target .footer or .footer-dark classes).

Substituição do Componente de Rodapé (Personalização total)​

Para um controle completo sobre o layout do rodapé, incluindo a integração de componentes React complexos ou estilos muito específicos, você pode usar a técnica de "swizzling" para ejetar o componente Footer padrão e modificá-lo.

Execute o seguinte comando na raiz do seu projeto Docusaurus:

npx @docusaurus/swizzle @docusaurus/theme-classic Footer

Isso criará um arquivo src/theme/Footer/index.js (ou .tsx) que você pode editar como um componente React normal, importando e renderizando sua imagem como faria em qualquer outro componente:

// src/theme/Footer/index.js (exemplo simplificado)

import React from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';

function Footer() {
  const myImageUrl = useBaseUrl('img/meu-logo.png'); // Ajuda a gerenciar o baseUrl

  return (
    <footer>
      {/* Seu layout de rodapé personalizado */}
      <img src={myImageUrl} alt="Meu logo personalizado" />
      {/* ... */}
    </footer>
  );
}

export default Footer;