Docusaurusのナビゲーション設定

はじめに

本サイトはDocusaurusという静的サイトジェネレーターを使用して構築されています。

本記事では、Docusaurusのナビゲーション関連の設定について備忘録も兼ねて記載します。

ナビゲーションの階層

Docusaurusのナビゲーションメニューには2つの階層があります。

本記事では便宜的に大分類と小分類と呼ぶことにします。

• 大分類：ページ上部のナビゲーションバー、スマホで閲覧している場合は「メインメニュー」で表示されます。
• 小分類：それぞれの大分類に移動したあとのサイドバーに表示されます。

私は大分類間の移動が手間に感じるため、いまのところ大分類を1つに限定し、小分類だけ活用しています。

大分類の設定

大分類は'docusaurus.config.js'中でnavbarとして設定します。

大分類間の移動をなくすため、次のようにitemとして1つのSidebarだけ記載しています。

コメントアウトした箇所のようにitemに追加すると大分類を増やすことができます。

Document機能だけでなく、Blog機能も使う場合もここに追加します。

navbar: {
      title: 'Kusanoiori',
      logo: {
        alt: 'My Site Logo',
        src: 'img/kusanoiori.svg',
      },
      items: [
        {
          type: 'docSidebar',
          sidebarId: 'mainSidebar',
          position: 'left',
          label: 'メニュー',
        },
        // {
        //   type: 'docSidebar',
        //   sidebarId: 'scienceSidebar',
        //   position: 'left',
        //   label: '科学',
        // },
        // {to: '/blog', label: 'Blog', position: 'left'},
      ],
    },

小分類の設定

参考サイト

小分類はsidebar.jsの中でリストとして設定できます。

categoryとして設定したitemはドロップダウンメニューになります。

catergory名をクリックしたときに配下のitemへのリンク集を生成することもできます。ただし、ドロップダウンをさせたくてクリックしたときにリンク集にとんでしまうと不快であるため、リンクを無効にするのも一案です。

次の例では記事の並び順を管理するために記事リンクを明示的に記載していますが、コメントアウト部分のようにauto-generatedという機能を使うとsidebarに記事リンクを自動生成できます。

const sidebars = {
  mainSidebar: [
    {
      type: 'doc',
      id: 'home',
      label: 'ホーム'
    },
    { 
      type: 'category',
      label: 'サイト運営メモ',
      link: {
        type: 'generated-index',
        title: 'サイト運営メモ　記事一覧',
        slug: '/managing-site-index'
        },
      items: [
        'managing-site/サイトの技術選定',
        'managing-site/ナビゲーション設定',
        'managing-site/node関係'
        // {
        //   type: 'autogenerated',
        //   dirName: 'managing-site'
        // }
      ]
    },
    { 
      type: 'category',
      label: '科学',
      link: {
        type: 'generated-index',
        title: '科学　記事一覧',
        slug: '/science-index'
        },
      items: [
        {
          type: 'category',
          label: '熱力学',
          link: {
            type: 'generated-index',
            title: '熱力学　記事一覧',
            slug: '/thermodynamics-index'
          },
          items: [
            'science/熱力学/なぜ水が蒸発すると冷えるのか'
          ]
        },
      ]
    },
  ],
}

フォルダ構成に依存しないURLの設定方法

それぞれの記事でslugを'/hogehoge'のように'/'をつけて指定するとフォルダ構造に依存しないURLとなります。

たとえば

---
title: フォルダ構成に依存しないURLの設定方法
slug: /docusaurus-setting-path
---

と設定すると "~/docs/docusaurus-setting"というURLになります。

さらに、/docs/も表示したくない場合、 "docusaurus.config.js"でrouteBasePathを"/"に指定します。

docs: {
    routeBasePath: '/',
    //
},

この場合、サイトのルートとなるページを指定する必要があります。詳しくは 公式ドキュメント に従ってください。