Aggiungere altre pagine

Per prima cosa ci si dovrà recare nella cartella dove è presente docusaurus, precisamente nella cartella root.

Il primo passo e creare una nuova cartella nella cartella docs, coma nell'immagine sottostante:

Fatta la cartella dovrete ritornare nella root di docusaurus e aprire un qualsiasi editor di codice il file sidebars.js e recarsi in questa sezione:

const sidebars = {
  INSTALLAZIONESidebar: [    
    {
      type: 'category',
      label: 'INSTALLAZIONE',
      link: {
        type: 'generated-index',
        title: 'Guida Installazione',
        description: 'Benvenuto nella guida di installazione. Qui troverai tutte le informazioni necessarie per configurare correttamente il sistema.',
        slug: '/categoria/installazione',
        keywords: ['installazione', 'setup', 'configurazione']
      },
      items: [
        { type: 'autogenerated', dirName: 'INSTALLAZIONE' }
      ]
    }
  ],
  SERVICESidebar: [...],
  TOOLSSidebar: [...],
};

Questo file come dice il nome, è relativo alla sidebar che si visualizzerà una volta aperta la nuova pagina, e ad ogni sezione creata su docusaurus si dovrà creare la relativa variabile:

<NomeDellaSezione>Sidebar: [{ type: 'autogenerated', dirName: '<NomeDellaCartella>' }],
  <NomeDellaSezione>Sidebar: [    
    {
      type: 'category',
      label: '<NomeDellaSezione>',
      link: {
        type: 'generated-index',
        title: '<Titolo>',
        description: '<Breve descrizione>',
        slug: '/categoria/<NomeDellaCartella>,
        keywords: ['']
      },
      items: [
        { type: 'autogenerated', dirName: '<NomeDellaCartella>' }
      ]
    }
  ]

come in questo esempio

  INSTALLAZIONESidebar: [    
    {
      type: 'category',
      label: 'INSTALLAZIONE',
      link: {
        type: 'generated-index',
        title: 'Guida Installazione',
        description: 'Benvenuto nella guida di installazione',
        slug: '/categoria/installazione',
        keywords: ['installazione', 'setup', 'configurazione']
      },
      items: [
        { type: 'autogenerated', dirName: 'INSTALLAZIONE' }
      ]
    }
  ]

ATTENZIONE

per altre modifiche custom, docusaurus lascia molta liberta anche per la sidebar, per tanto vi riporto alla documentazione ufficiale Docusaurus Sidebar

Effettuate le modifiche si dovrà salvare il file

Creata quindi la variabile per la sidebar possiamo procedere con l'aggiunta della sezione nella navbar, per tanto ora serve andare nel file docusaurus.config.js Andare nella sezione sottostante

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        hideOnScroll: true,
        title: '',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.png',
        },
        items: [
          {
            type: 'docSidebar',
            sidebarId: 'INSTALLAZIONESidebar',
            position: 'left',
            label: 'Installazione',
          },
          {
            type: 'docSidebar',
            sidebarId: 'SERVICESidebar',
            position: 'left',
            label: 'Servizi',
          },
          {
            type: 'docSidebar',
            sidebarId: 'TOOLSSidebar',
            position: 'left',
            label: 'Tools',
          },
        ],
      },
    }),
};

Per aggiungerla si dovrà aggiungere a questa funzione la nuova sezione nel array ITEMS cosi:

        {
            type: 'docSidebar',
            sidebarId: '<NomeVariabileSideBar>',
            position: 'left',
            label: '<NomeDellaSezione>',
          },

per esempio

        {
            type: 'docSidebar',
            sidebarId: 'NUOVACARTELLAidebar',
            position: 'left',
            label: 'Nuova Cartella',
          },

Per renderlo visibile anche via web si dovrà seguire fare il build del progetto, che si fa aprendo il terminale e recarsi nella cartelle root di docusaurus e digitare il comando:

npm run build