📦Docusaurusの複雑なプラグイン設定にハマるな

この記事ではVercelでデプロイしたDocusaurus 2.0.0-beta.4を使っています。

説明

Docusaurusを使い始めたが、あまりにもDocusaurusを使っている途中にハマってしまったので、紹介したいと思う。

Docusaurusには、プラグインという機能がある。
例えば

• docsとblog以外のディレクトリを追加する(@docusaurus/plugin-content-docs)
• Google Analyticsと連携する
  などの機能がある。
  私はこの両方の機能の設定でハマった。

plugin-content-docs で複数ディレクトリを追加する

公式サイトの説明はこちら。

例えば、

• docs
• blog
• article
• memo
• qanda
  というディレクトリ構成にする。
  この場合、docsとblogはデフォルトで使用可能だが、articleとmemoとqandaは存在しない。

このプラグインを設定する時、値は一つしか設定できない。
だが複数設定する際には、以下のように@docusaurus/plugin-content-docsプラグイン自体を複数参照すればいい。

  plugins: [
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'article',
        path: 'article',
        routeBasePath: 'article',
        editUrl: "https://github.com/OO/OOO/edit/main",
        editCurrentVersion: true,
        sidebarPath: require.resolve('./article/sidebars.js'),
        showLastUpdateAuthor: true,
        showLastUpdateTime: true,
      },
    ],
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'memo',
        path: 'memo',
        routeBasePath: 'memo',
        editUrl: "https://github.com/OO/OOO/edit/main",
        editCurrentVersion: true,
        sidebarPath: require.resolve('./memo/sidebars.js'),
        showLastUpdateAuthor: true,
        showLastUpdateTime: true,
      },
    ],
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'qanda',
        path: 'qanda',
        routeBasePath: 'qanda',
        editUrl: "https://github.com/OO/OOO/edit/main",
        editCurrentVersion: true,
        sidebarPath: require.resolve('./qanda/sidebars.js'),
        showLastUpdateAuthor: true,
        showLastUpdateTime: true,
      },
    ],

plugin-google-analyticsの場所

公式サイトはこちら。

公式サイトによると

module.exports = {
  plugins: ['@docusaurus/plugin-google-analytics'],
  themeConfig: {
    googleAnalytics: {
      trackingID: 'UA-141789564-1',
      // Optional fields.
      anonymizeIP: true, // Should IPs be anonymized?
    },
  },
};

とある。
実はこのプラグインは特殊でJavaScriptのplugin下には書かず、module.export下に書く。
なので、このようになる。

module.exports = {
  plugins: ['@docusaurus/plugin-google-analytics'],
  themeConfig: {
    googleAnalytics: {
      trackingID: 'UA-141789564-1',
      // Optional fields.
      anonymizeIP: true, // Should IPs be anonymized?
    },
  },
 plugins: [
 ]
};

初めての記事投稿なので下手ですが、是非コメントで改善点を教えてくださると助かります！
Docusaurusユーザーがハマらずに設定出来たらうれしいです。

参考

1. Sasigume氏によるTweetのリプライ
2. NikitaIT氏によるissue
3. Discordによるサポート