バージョン: 3.5.2

ブログ

ブログ機能を使用すると、すぐにフル機能のブログを展開できます。

情報

オプションの詳細なリストについては、ブログプラグイン API リファレンスドキュメントを参照してください。

初期設定

サイトのブログを設定するには、最初に blog ディレクトリを作成します。

次に、docusaurus.config.js 内にブログへの項目リンクを追加します。

docusaurus.config.js
export default {
  themeConfig: {
    // ...
    navbar: {
      items: [
        // ...
        {to: 'blog', label: 'Blog', position: 'left'}, // or position: 'right'
      ],
    },
  },
};

投稿の追加

ブログで公開するには、ブログディレクトリ内に Markdown ファイルを作成します。

たとえば、website/blog/2019-09-05-hello-docusaurus.md にファイルを作成します。

website/blog/2019-09-05-hello-docusaurus.md
---
title: Welcome Docusaurus
description: This is my first post on Docusaurus.
slug: welcome-docusaurus-v2
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
    socials:
      x: joelmarcey
      github: JoelMarcey
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
    socials:
      x: sebastienlorber
      github: slorber
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---

Welcome to this blog. This blog is created with [**Docusaurus 2**](https://docusaurus.dokyumento.jp/).

<!-- truncate -->

This is my first post on Docusaurus 2.

A whole bunch of exploration to follow.

フロントマターは、ブログ投稿に作者情報などのメタデータを追加するのに役立ちますが、Docusaurus はフロントマターなしでも必要なすべてのメタデータを推測できます。可能なすべてのフィールドについては、API ドキュメントを参照してください。

ブログリスト

ブログのインデックスページ（デフォルトでは /blog にあります）は、すべてのブログ投稿がまとめて表示されるブログリストページです。

公開されたすべてのブログ投稿を表示する際に、要約として表示される内容を表すには、ブログ投稿で  マーカーを使用します。 より上の部分が要約の一部になります。切り捨てマーカーより上の部分は、スタンドアロンでレンダリング可能な Markdown である必要があります。例:

website/blog/my-post.md
---
title: Markdown blog truncation example
---

All these will be part of the blog post summary.

<!-- truncate -->

But anything from here on down will not be.

.mdx 拡張子を使用するファイルの場合は、MDX コメント {/* truncate */} を代わりに使用します。

website/blog/my-post.mdx
---
title: MDX blog truncation Example
---

All these will be part of the blog post summary.

{/* truncate */}

But anything from here on down will not be.

デフォルトでは、各ブログリストページに 10 件の投稿が表示されますが、プラグイン構成で postsPerPage オプションを使用してページネーションを制御できます。postsPerPage: 'ALL' を設定すると、ページネーションは無効になり、すべての投稿が最初のページに表示されます。また、SEO を改善するために、ブログリストページにメタディスクリプションを追加することもできます。

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogTitle: 'Docusaurus blog!',
          blogDescription: 'A Docusaurus powered blog!',
          postsPerPage: 'ALL',
        },
      },
    ],
  ],
};

ブログサイドバーには最近のブログ投稿が表示されます。表示される項目のデフォルト数は 5 ですが、プラグイン構成で blogSidebarCount オプションを使用してカスタマイズできます。blogSidebarCount: 0 を設定すると、サイドバーは完全に無効になり、コンテナも削除されます。これにより、メインコンテナの幅が広くなります。特に、blogSidebarCount: 'ALL' を設定した場合、すべての投稿が表示されます。

また、blogSidebarTitle オプションを使用してサイドバーの見出しテキストを変更することもできます。たとえば、blogSidebarCount: 'ALL' を設定した場合、デフォルトの「最近の投稿」ではなく、「すべての投稿」と表示させることができます。

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogSidebarTitle: 'All posts',
          blogSidebarCount: 'ALL',
        },
      },
    ],
  ],
};

ブログ投稿日

Docusaurus は、YYYY-MM-DD-my-blog-post-title.md や YYYY/MM/DD/my-blog-post-title.md などの多くのパターンから YYYY-MM-DD 形式の日付を抽出します。これにより、ブログ投稿を年別、月別に簡単にグループ化したり、フラットな構造を使用したりできます。

サポートされている日付抽出パターン

パターン	例
単一ファイル	`2021-05-28-my-blog-post-title.md`
MDX ファイル	`2021-05-28-my-blog-post-title.mdx`
単一フォルダ + `index.md`	`2021-05-28-my-blog-post-title/index.md`
日付で名前が付けられたフォルダ	`2021-05-28/my-blog-post-title.md`
日付別のネストされたフォルダ	`2021/05/28/my-blog-post-title.md`
日付別の部分的にネストされたフォルダ	`2021/05-28-my-blog-post-title.md`
ネストされたフォルダ + `index.md`	`2021/05/28/my-blog-post-title/index.md`
パスの中間にある日付	`category/2021/05-28-my-blog-post-title.md`

Docusaurus は、上記のいずれかの命名パターンを使用して投稿から日付を抽出できます。混乱を避けるため、1 つのパターンを選択し、すべての投稿に適用することをお勧めします。

ヒント

フォルダを使用すると、ブログ投稿の画像を Markdown ファイルと一緒に配置するのに便利です。

この命名規則はオプションであり、フロントマターとして日付を提供することもできます。フロントマターは、日時表記がサポートされている YAML 構文に従うため、より細かい公開日が必要な場合はフロントマターを使用できます。たとえば、同じ日に複数の投稿を公開する場合、時刻に従って順序付けできます。

earlier-post.md
---
date: 2021-09-13T10:00
---

later-post.md
---
date: 2021-09-13T18:00
---

ブログ投稿の作者

ブログ投稿の作者を宣言するには、authors フロントマターフィールドを使用します。作者は、少なくとも name または image_url を持つ必要があります。Docusaurus は url、email、title などの情報を使用しますが、他の情報も許可されています。

インライン作者

ブログ投稿の作者は、フロントマター内で直接宣言できます。

単一の作者
複数の作者

my-blog-post.md
---
authors:
  name: Joel Marcey
  title: Co-creator of Docusaurus 1
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
  socials:
    x: joelmarcey
    github: JoelMarcey
---

my-blog-post.md
---
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
    email: [email protected]
    socials:
      x: joelmarcey
      github: JoelMarcey
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
    socials:
      x: sebastienlorber
      github: slorber
---

ヒント

このオプションは、使い始める場合や、カジュアルで不定期な作者に最適です。

情報

authors フロントマターの使用をお勧めしますが、レガシーの author_* フロントマターも引き続きサポートされています。

my-blog-post.md
---
author: Joel Marcey
author_title: Co-creator of Docusaurus 1
author_url: https://github.com/JoelMarcey
author_image_url: https://github.com/JoelMarcey.png
---

グローバル作者

定期的なブログ投稿の作者の場合、各ブログ投稿にインラインで作者の情報を維持するのは面倒な場合があります。

これらの作者を構成ファイルでグローバルに宣言できます。

website/blog/authors.yml
jmarcey:
  name: Joel Marcey
  title: Co-creator of Docusaurus 1
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
  socials:
    x: joelmarcey
    github: JoelMarcey

slorber:
  name: Sébastien Lorber
  title: Docusaurus maintainer
  url: https://sebastienlorber.com
  image_url: https://github.com/slorber.png
  socials:
    x: sebastienlorber
    github: slorber

ヒント

authorsMapPath プラグインオプションを使用して、パスを構成します。JSON もサポートされています。

ブログ投稿のフロントマターで、グローバル構成ファイルで宣言された作者を参照できます。

単一の作者
複数の作者

my-blog-post.md
---
authors: jmarcey
---

my-blog-post.md
---
authors: [jmarcey, slorber]
---

情報

authors システムは非常に柔軟で、より高度なユースケースに対応できます。

インライン作者とグローバル作者の組み合わせ

ほとんどの場合、グローバル作者を使用できますが、インライン作者も引き続き使用できます。

my-blog-post.md
---
authors:
  - jmarcey
  - slorber
  - name: Inline Author name
    title: Inline Author Title
    url: https://github.com/inlineAuthor
    image_url: https://github.com/inlineAuthor
---

グローバル作者のローカルオーバーライド

ブログ投稿ごとに、グローバル作者のデータをカスタマイズできます。

my-blog-post.md
---
authors:
  - key: jmarcey
    title: Joel Marcey's new title
  - key: slorber
    name: Sébastien Lorber's new name
---

作者の構成ファイルのローカライズ

構成ファイルはローカライズできます。ローカライズされたコピーを以下に作成してください。

website/i18n/[locale]/docusaurus-plugin-content-blog/authors.yml

フロントマターまたは作者マップを通じて宣言された作者は、名前またはアバター、またはその両方を持つ必要があります。投稿のすべての作者に名前がない場合、Docusaurus はそれらのアバターをコンパクトに表示します。効果については、このテスト投稿を参照してください。

フィード生成

RSS フィードでは、フィードに作者を表示するために、作者のメールアドレスを設定する必要があります。

作者ページ

作者ページ機能はオプションであり、主に複数作者のブログに役立ちます。

グローバル作者構成に page: true 属性を追加することにより、各作者に対して個別にアクティブ化できます。

website/blog/authors.yml
slorber:
  name: Sébastien Lorber
  page: true # Turns the feature on - route will be /authors/slorber

jmarcey:
  name: Joel Marcey
  page:
    # Turns the feature on - route will be /authors/custom-author-url
    permalink: '/custom-author-url'

ブログプラグインは、以下を生成するようになります。

各作者専用のページ (例) に、貢献したすべてのブログ投稿が一覧表示されます。
authors.yml に表示される順に、すべての作者を一覧表示する作者インデックスページ (例)

インライン作者について

グローバル作者のみがこの機能をアクティブ化できます。インライン作者はサポートされていません。

ブログ投稿のタグ

タグはフロントマターで宣言され、別の分類軸を導入します。

タグをインラインで定義するか、tags ファイル (オプション、通常は blog/tags.yml) で宣言された事前定義済みのタグを参照することができます。

次の例では

docusaurus は、blog/tags.yml で宣言された事前定義済みのタグキーを参照します。
Releases は、blog/tags.yml に存在しないため、インラインタグです。

blog/my-post.md
---
title: 'My blog post'
tags:
  - Releases
  - docusaurus
---

Content

blog/tags.yml
docusaurus:
  label: 'Docusaurus'
  permalink: '/docusaurus'
  description: 'Blog posts related to the Docusaurus framework'

読了時間

Docusaurus は、単語数に基づいて各ブログ投稿の読了時間の見積もりを生成します。これをカスタマイズするためのオプションを提供します。

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          showReadingTime: true, // When set to false, the "x min read" won't be shown
          readingTime: ({content, frontMatter, defaultReadingTime}) =>
            defaultReadingTime({content, options: {wordsPerMinute: 300}}),
        },
      },
    ],
  ],
};

readingTime コールバックは、ブログコンテンツテキストを文字列、文字列キーとその値のレコードとしてのフロントマター、およびデフォルトの読了時間関数の 3 つのパラメーターを受け取ります。数値（読了時間（分））または undefined（このページの読了時間を無効にする）を返します。

デフォルトの読了時間は、追加のオプションを受け入れることができます。wordsPerMinute は数値（デフォルト：300）、wordBound は文字列からブール値への関数です。wordBound に渡される文字列が単語の区切り（デフォルトではスペース、タブ、改行）であるべき場合、関数は true を返す必要があります。

ヒント

すべてのカスタマイズニーズにはコールバックを使用してください

投稿ごとの無効化
オプションの渡し方
カスタムアルゴリズムの使用

1ページでの読了時間の無効化

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          showReadingTime: true,
          readingTime: ({content, frontMatter, defaultReadingTime}) =>
            frontMatter.hide_reading_time
              ? undefined
              : defaultReadingTime({content}),
        },
      },
    ],
  ],
};

使い方

---
hide_reading_time: true
---

This page will no longer display the reading time stats!

デフォルトの読了時間関数にオプションを渡す

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          readingTime: ({content, defaultReadingTime}) =>
            defaultReadingTime({content, options: {wordsPerMinute: 100}}),
        },
      },
    ],
  ],
};

読了時間のカスタム実装を使用する

docusaurus.config.js
import myReadingTime from './myReadingTime';

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          readingTime: ({content}) => myReadingTime(content),
        },
      },
    ],
  ],
};

フィード

feedOptions を渡すことで、RSS / Atom / JSON フィードを生成できます。デフォルトでは、RSSとAtomフィードが生成されます。フィード生成を無効にするには、feedOptions.type を null に設定します。

type FeedType = 'rss' | 'atom' | 'json';

type BlogOptions = {
  feedOptions?: {
    type?: FeedType | 'all' | FeedType[] | null;
    title?: string;
    description?: string;
    copyright: string;

    language?: string; // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
    limit?: number | false | null; // defaults to 20
    // XSLT permits browsers to style and render nicely the feed XML files
    xslt?:
      | boolean
      | {
          //
          rss?: string | boolean;
          atom?: string | boolean;
        };
    // Allow control over the construction of BlogFeedItems
    createFeedItems?: (params: {
      blogPosts: BlogPost[];
      siteConfig: DocusaurusConfig;
      outDir: string;
      defaultCreateFeedItems: (params: {
        blogPosts: BlogPost[];
        siteConfig: DocusaurusConfig;
        outDir: string;
      }) => Promise<BlogFeedItem[]>;
    }) => Promise<BlogFeedItem[]>;
  };
};

使用例

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          feedOptions: {
            type: 'all',
            copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
            createFeedItems: async (params) => {
              const {blogPosts, defaultCreateFeedItems, ...rest} = params;
              return defaultCreateFeedItems({
                // keep only the 10 most recent blog posts in the feed
                blogPosts: blogPosts.filter((item, index) => index < 10),
                ...rest,
              });
            },
          },
        },
      },
    ],
  ],
};

フィードは以下で見つけることができます。

RSS
Atom
JSON

https://example.com/blog/rss.xml

https://example.com/blog/atom.xml

https://example.com/blog/feed.json

高度なトピック

ブログ専用モード

Docusaurusサイトを、専用のランディングページなしで、代わりにブログの投稿一覧ページをインデックスページとして実行できます。routeBasePath を '/' に設定して、サブルート example.com/blog/ の代わりにルート example.com/ を通じてブログを提供します。

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: false, // Optional: disable the docs plugin
        blog: {
          routeBasePath: '/', // Serve the blog at the site's root
          /* other blog options */
        },
      },
    ],
  ],
};

警告

./src/pages/index.js にある既存のホームページを削除することを忘れないでください。そうしないと、同じルートにマッピングされるファイルが2つできてしまいます！

警告

ドキュメントプラグインを無効にする場合は、設定ファイル内の他の場所にあるドキュメントプラグインへの参照を削除することを忘れないでください。特に、ドキュメント関連のナビゲーションバーアイテムを削除してください。

ヒント

ドキュメントのみを使用したい人のための「ドキュメント専用モード」もあります。詳細な手順または routeBasePath のより詳細な説明については、ドキュメント専用モードをお読みください。

複数のブログ

デフォルトでは、クラシックテーマは1つのWebサイトにブログが1つだけあることを想定しているため、ブログプラグインのインスタンスは1つしか含まれていません。1つのWebサイトに複数のブログを持ちたい場合も、可能です！ docusaurus.config.js の plugins オプションで別のブログプラグインを指定することで、別のブログを追加できます。

2番目のブログにアクセスしたいURLルートに routeBasePath を設定します。ここでの routeBasePath は最初のブログとは異なる必要があることに注意してください。そうしないと、パスの衝突が発生する可能性があります。また、path を2番目のブログのエントリを含むディレクトリへのパスに設定します。

複数インスタンスプラグインで説明されているように、プラグインに一意のIDを割り当てる必要があります。

docusaurus.config.js
export default {
  // ...
  plugins: [
    [
      '@docusaurus/plugin-content-blog',
      {
        /**
         * Required for any multi-instance plugin
         */
        id: 'second-blog',
        /**
         * URL route for the blog section of your site.
         * *DO NOT* include a trailing slash.
         */
        routeBasePath: 'my-second-blog',
        /**
         * Path to data on filesystem relative to site dir.
         */
        path: './my-second-blog',
      },
    ],
  ],
};

例として、2番目のブログをこちらでホストしています。

初期設定​

投稿の追加​

ブログリスト​

ブログサイドバー​

ブログ投稿日​

ブログ投稿の作者​

インライン作者​

グローバル作者​

作者ページ​

ブログ投稿のタグ​

読了時間​

フィード​

高度なトピック​

ブログ専用モード​

複数のブログ​