メインコンテンツへスキップ

Docusaurus 2.4

·読了時間 4分
Sébastien Lorber
Sébastien Lorber
Docusaurus メンテナー、This Week In React 編集者

Docusaurus 2.4 を発表いたします。

アップグレードは簡単です。リリースプロセスに関するドキュメントで説明されているように、マイナーバージョンは セマンティックバージョニング に準拠しています。

Docusaurus blog post social card

ハイライト​

#8236 では、link および category タイプのドキュメントサイドバー項目に新しい description 属性を提供することが可能になりました。

sidebars.js
[
  {
    type: 'link',
    label: 'Link with description',
    href: 'https://docusaurus.dokyumento.jp',
    description: 'Some link description',
  },
  {
    type: 'category',
    label: 'Category with description',
    description: 'Some category description',
    items: [],
  },
];

これらの説明は、カテゴリで生成されたインデックスページで使用されます。

Show sidebar category generated index with custom descriptions

テーマクエリ文字列​

#8708 では、新しい `docusaurus-theme` クエリ文字列パラメータを使用して、Docusaurus が `light` または `dark` モードで初期化されるように強制する機能を追加しました。

これは、既存の Docusaurus ページを iframe または WebView に埋め込む際に、テーマの一貫性を確保するのに役立ちます。

/docs/?docusaurus-theme=light
/docs/?docusaurus-theme=dark

Remark プラグイン npm2yarn のアップグレード​

#8690 では、Remark プラグイン @docusaurus/remark-plugin-npm2yarn をアップグレードし、多くの変換バグを修正し、pnpm を公式にサポートし、新しいタブを生成するカスタムコンバーターを登録できるようにしました。

Run these commands!

```bash npm2yarn
npm install
npm run build
npm run myCustomScript -- --some-arg
```
http://localhost:3000
npm install
npm run build
npm run myCustomScript -- --some-arg

gtag で複数のトラッキング ID をサポート​

#8620 では、@docusaurus/plugin-google-gtag プラグインで複数のトラッキング ID を宣言できるようサポートを追加しました。

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        gtag: {
          trackingID: [
            'G-<YOUR-NEW-GA4-ID>',
            'UA-<YOUR-OLD-UA-ID>',
          ],
        },
      },
    ],
  ],
};
Google は Universal Analytics の提供を終了します

Google は Universal Analytics の提供を終了します。終了日は 2023年7月1日 です。

Docusaurus ユーザーは Google Analytics 4 に移行する必要があります。Google は、**既存の Universal Analytics データを新しい Google Analytics 4 プロパティに移行することを許可していません。**

分析の継続性を維持するために、一時的に2つのトラッキング ID（古い `UA-*` と新しい `G-*`）にイベントを報告することをお勧めします。詳細は、専用の issue を参照してください。

開発者エクスペリエンス​

#8736 では、エラーメッセージのレンダリング方法を改善し、エラーの完全な因果関係チェーンをレンダリングするための初期サポートを追加しました（ES2022 Error Cause を参照）。

ヒント

実際に試してみるには、ここをクリックしてください

#8735 では、ナビゲーションバー関連のエラーメッセージをより明確にし、ユーザーが何が間違っているかを理解しやすくしました。

Docusaurus navbar error message screenshot

翻訳​

いくつかの新しい要素を翻訳できるようになりました

  • #8677 では、新しい `process.env.DOCUSAURUS_CURRENT_LOCALE` （実験的）を導入し、サイトのタイトル、タグライン、アナウンスバー、baseUrl など、設定ファイルをローカライズできるようになりました。
  • #8616 では、ナビゲーションバーとフッターのロゴの代替テキストを翻訳できるようになりました

複数の言語のデフォルトテーマ翻訳のサポートを追加しました

  • 🇭🇺 #8668: ハンガリー語
  • 🇳🇴 #8631: ノルウェー語（ブークモール）
ヒント

テーマの翻訳の完成は 進行中の取り組み であり、Docusaurus に貢献する簡単な方法です。定期的に新しいテーマ機能を追加しており、多くの場合、新しい翻訳が必要 になります。

その他の変更​

その他の注目すべき変更点は次のとおりです

  • #8674: `prefers-reduced-motion: reduce` メディアクエリに対応
  • #8712: テンプレートで `docSidebar` タイプのナビゲーションバー項目を使用
  • #8801: タブの子要素を falsy にできるようにする
  • #8757: 検索ページが外部のクエリ文字列の変更に反応するようにする
  • #8803: RTL でのコードブロックボタンの位置を修正
  • #8615: ダークナビゲーションバーを使用する場合のカラーモードトグルを修正
  • #8699: ナビゲーションバードロップダウンタブのフォーカスバグを修正

変更点の完全なリストについては、2.4.0 changelog エントリ を確認してください。