Passa al contenuto principale

Sidebars.js

Modifiche Possibili al file​

Il file sidebars.js gestisce il menu di navigazione laterale della documentazione. Determina quali documenti mostrare e come organizzarli nella barra laterale.

Tipi di Items Disponibili​

1. Doc​

{
  type: 'doc',
  id: 'nome-documento',
  label: 'Etichetta Personalizzata', // opzionale
  className: 'nome-classe' // opzionale per styling CSS
}

2. Category​

{
  type: 'category',
  label: 'Nome Categoria',
  collapsible: true, // true di default
  collapsed: true, // true di default
  className: 'nome-classe', // opzionale
  link: {
    type: 'doc',
    id: 'nome-documento'
  },
  items: ['doc1', 'doc2']
}
{
  type: 'link',
  label: 'Nome Link',
  href: 'https://esempio.com',
  className: 'nome-classe' // opzionale
}

4. HTML​

{
  type: 'html',
  value: '<p>Contenuto HTML</p>',
  className: 'nome-classe' // opzionale
}

Generazione Automatica​

Generazione Standard​

{
  type: 'autogenerated',
  dirName: 'nome-cartella'
}

Personalizzazione Generazione​

{
  type: 'autogenerated',
  dirName: 'nome-cartella',
  pattern: '**/*.{md,mdx}', // pattern personalizzato
  exclude: ['**/exclude/**'], // file da escludere
}

Ordine dei Documenti​

1. Tramite metadata​

---
sidebar_position: 1
---

2. Tramite nome file​

001-intro.md
002-setup.md

Esempi di Configurazioni Avanzate​

{
  tutorialSidebar: [
    {
      type: 'category',
      label: 'Getting Started',
      items: [
        'intro',
        {
          type: 'category',
          label: 'Installation',
          items: [
            'installation/windows',
            'installation/mac',
            'installation/linux'
          ]
        }
      ]
    }
  ]
}
{
  apiSidebar: [
    'api-intro',
    {
      type: 'category',
      label: 'API Reference',
      items: [
        'api/overview',
        {
          type: 'link',
          label: 'External API Docs',
          href: 'https://api.esempio.com'
        }
      ]
    }
  ]
}
{
  docsSidebar: [
    {
      type: 'category',
      label: 'Docs',
      collapsible: false,
      link: {
        type: 'generated-index',
        title: 'Documentation Overview',
        description: 'Learn about our product',
        slug: '/category/docs'
      },
      items: [
        {
          type: 'autogenerated',
          dirName: 'guides',
          pattern: '**/*.{md,mdx}',
          exclude: ['**/private/**']
        }
      ]
    }
  ]
}

Funzionalità Speciali​

Index Page per Categoria​

{
  type: 'category',
  label: 'Categoria',
  link: {
    type: 'generated-index',
    title: 'Titolo Index',
    description: 'Descrizione della categoria',
    slug: '/mia-categoria',
    keywords: ['keyword1', 'keyword2'],
    image: '/img/mia-immagine.png'
  },
  items: ['doc1', 'doc2']
}

Custom Sorting​

{
  type: 'autogenerated',
  dirName: 'docs',
  customProps: {
    sort: {
      method: 'custom',
      compareFn: (a, b) => {
        // logica di ordinamento personalizzata
        return a.localeCompare(b);
      }
    }
  }
}