メインコンテンツまでスキップ

サイトの設定更新

· 約2分

Docusaurusの設定を追加して、このサイトを更新しました。

Google Analyticsの追加​

Google Analytics用の設定にはplugin-google-gtagプラグインを使用します。
Google Analyticsのアカウントでウェブデータストリームを作成するとG-**********形式の測定IDが割り当てられます。割り当てられたIDをtrackingIDとして使用します。
以下のようにdocusaurus.config.jsを編集し、presetsにgtagの設定を追加しました。

const config = {
  title: 'ServeZero',
  ...

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        blog: {
          showReadingTime: true,
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
        gtag: {
          trackingID: 'G-**********',
          anonymizeIP: true,
        },
      }),
    ],
  ],

HTML属性日本語化​

デフォルトではHTMLタグが<html lang="en" data-theme="light" dir="ltr" data-rh="lang,dir">になってしまうのでdocusaurus.config.jsに設定を追加しました。
設定を変更すると<html lang="ja" data-theme="light" dir="ltr" data-rh="lang,dir">になります。

const config = {
  title: 'ServeZero',
  ...

  // 日本語対応
  i18n: {
    defaultLocale: 'ja',
    locales: ['ja'],
    localeConfigs: {
      ja: {
        label: '日本語',
        direction: 'ltr',
      },
    },
  },

サイドメニューの項目順序​

サイドメニューは、ドキュメントディレクトリ以下はautogeneratedタイプで自動読み込みでページ作成するようにしました。 サイドメニューの定義ファイルsidebars.jsに設定しました。

sidebars.js
const sidebars = {
  docSidebar: [{type: 'autogenerated', dirName: '.'}],
};

サイドメニューのトップのディレクトリ項目の順序を入れ替えるためにディレクトリに_category_.jsonファイルを追加しました。
collapsed属性でディレクトリが開いた状態で表示されるようにしています。

_category_.json
{
  "label": "チュートリアル",
  "position": 2,
  "collapsed": false
}

ファイル項目の場合は次のように.mdファイルの先頭で順番を指定します。 

---
sidebar_position: 0
title: ServeZero ドキュメント
---