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

「docusaurus」タグの記事が2件あります

全てのタグを見る

· 約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 ドキュメント
---

· 約3分

このドキュメントサイトはDocusaurusというサイトジェネレータで構築しています。
yarn buildとビルド処理を実行するとbuildディレクトリに静的ファイルをたくさん生成してくれます。それらをすべてWebサーバにアップすればサイト公開終わりです。
このサイトはGitHubの配信機能を利用しているので、ServeZero/servezero.github.ioというレポジトリにアップすればhttps://servezero.github.io/のURLで参照できるようになっています。
servezero.github.ioのレポジトリとサイト公開の連携はGitHub PagesというGitHubの機能です。

DocusaurusはドキュメントページやブログをMarkdownフォーマットで作成しておけばうまくドキュメントサイトとしてまとめてくれます。 Markdownフォーマットの記述方法を覚える必要がありますが、必要応じて覚えていけばいいので最初はほとんど覚えなくても十分使えます。
サイドバーの表示とかサイトのレイアウトを変えるには少々プログラミング知識が必要です。また日本語のソフトではないので日本語用にカスタマイズしていく必要があります。
まだあまり日本語のカスタマイズ情報はないので試行錯誤することになると思います。
このブログでもカスタマイズした情報をできるだけ公開していきます。

フォントの変更​

フォントは日本語フォントに変更しました。以下のようにsrc/css/custom.cssファイルに日本語のfont-familyを追加しました。

:root {
  --ifm-color-primary: #3653a7;
  --ifm-color-primary-dark: #314b96;
  --ifm-color-primary-darker: #2e478e;
  --ifm-color-primary-darkest: #263a75;
  --ifm-color-primary-light: #3b5bb8;
  --ifm-color-primary-lighter: #3e5fc0;
  --ifm-color-primary-lightest: #5774c9;

  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
}

画像の拡大​

説明用の画像の細部が見えにくいのでdocusaurus-plugin-image-zoomというプラグインを追加して、マウスクリックで画像の拡大ができるようにしました。