Passa al contenuto principale

File per Personalizzazioni in Docusaurus

1. CSS Personalizzato​

/src/css/custom.css

/* Personalizza colori, font e stili */
:root {
  --ifm-color-primary: #25c2a0;
  --ifm-font-family-base: 'Custom Font';
}

2. Componenti React Custom​

/src/components/

  • Crea componenti React personalizzati
  • Sostituisci componenti esistenti
// esempio: src/components/MyHeader.js
export default function MyHeader() {
  return <header>Custom Header</header>;
}

3. Tema Personalizzato​

/src/theme/

  • Sovrascrive i componenti del tema predefinito
src/theme/
  ├── Footer/
  │   └── index.js        # Footer personalizzato
  ├── Navbar/
  │   └── index.js        # Navbar personalizzata
  └── MDXComponents/
      └── index.js        # Componenti MDX custom

4. Plugin Swizzling​

Permette di personalizzare componenti del tema:

# Ejetta un componente per personalizzarlo
npm run swizzle @docusaurus/theme-classic ComponentName

5. File di Layout​

/src/pages/

  • Layout personalizzati per pagine specifiche
// src/pages/index.js
export default function Home() {
  return <Layout>Custom Home Page</Layout>;
}

6. Stili Markdown​

/src/css/markdown.css

/* Personalizza stili per contenuto markdown */
.markdown h1 {
  color: var(--custom-heading-color);
}

7. File di Configurazione Aggiuntivi​

.
├── babel.config.js        # Configurazione Babel
├── postcss.config.js      # Configurazione PostCSS
└── tailwind.config.js     # Se usi Tailwind CSS