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

案内リンクの位置

· 約7分
ぐみ
ぐみ
author

よくある「次へ」「前へ」案内の挙動についてです。

このエントリーでは Docusaurus の blog コンテントタイプのナビゲーションに関する、個人的な UI 提案を紹介しています。

公式テーマの設計思想（自由な UX 選択）に基づき、別の方向性を試したものです。 この提案は「代替案のひとつ」として記録しており、公式の挙動に異を唱えるものではありません。

Docusaurus の Classic Theme を対象にしています。

背景​

Docusaurus は docs コンテントタイプと blog コンテントタイプの２つがあって、それらのページは横３段構成です。

左がページのインデックス、中央がページ本体、右がページ内インデックスです。 そのうちのページ本体には、下部に前後の記事への案内部分があります。 その案内部分が docs と blog とを比べると違和感を覚えた、というのが発端です。

標準実装​

ソート制御していません。

こちらは docs の一覧。

docs一覧サンプル表示

こちらは blog の一覧。

blog一覧サンプル表示

こちらは blog の記事ページ。

blog記事サンプル表示

「新しい記事」が左で、「過去の記事」が右、ということに違和感。 私がもつ 左が「戻る」、右が「進む」 という認識とのズレを感じるのです。

うん、でもね？​

案内部分は左右にそれぞれリンクがあります。

標準実装は docs と blog どちらも 左が「インデックスを上に辿るリンク（戻る）」で、右が「インデックスを下に辿るリンク（進む）」 です。

とても明快ですよね、データとして辿る方向が一律です。 それが標準実装の意図した振る舞いなのだと思います。

それにたいして、私の認識でいう「戻る / 進む」って、曖昧。

うんうん、でもね？​

コンテントタイプの違いなんです。

docs コンテントタイプは 整理されたページを「読み進める = インデックスを進める」感覚。 blog コンテントタイプは 時間軸基準のページを「読み進める = 新しい時間へ進める」感覚。

だけど私がもつこの感覚は、全員が持つものではないし、強制できるものでもない。 これが UX と言われている領域。

UX の領域​

私は体験を感覚側から推察して構築していくのですが、伝えるための言語化がうまくできなかったので、AI に分析してもらいました。

評価
補足
要約

私は感覚と結果を結びつけるのが早すぎる、ということを指摘してくれています （私ってば感覚派だったのね…）。

そして１歩踏み込んだ応答を AI が揺らぎなく行えるということは、このような事柄を扱うことに慣れているということです。 よくある話なんですね。

つまり？​

「いろいろあっていい」ってことです。

それぞれの実装が、正解や 不正解というわけではなく。 さらにいえば…

「私の感じたままに実装していい自由がある」

私の主観による もう一つの実装​

というわけで、こんなカスタマイズをしてみました。

blog案内リンクの左右入れ替え案

blog の案内だけが、左に「過去の記事」、右に「新しい記事」のリンクに書き変わります。 インデックスに変化はありません。

コード​

前置きはこれくらいにして、実装コードです。 よかったら使ってください。

/src/theme/BlogPostPaginator/index.tsx
/*
 * MIT License
 * Original Docusaurus Classic Theme code
 * Modified and Copyright (c) 2025 gumi278
 *
 * Confirmed working environment:
 *   - Docusaurus v3.8.1
 *   - Node.js v22.17.0
 *   - React v19.1.0
 *   - npm v10.9.2
 *
 * This code is free to use, modify, and distribute.
 */

import React, {type ReactNode} from 'react';
import Translate, {translate} from '@docusaurus/Translate';
import PaginatorNavLink from '@theme/PaginatorNavLink';
import type {Props} from '@theme/BlogPostPaginator';

export default function BlogPostPaginator(props: Props): ReactNode {
	const newerPost = props.prevItem;
	const olderPost = props.nextItem;

	return (
		<nav
			className="pagination-nav docusaurus-mt-lg"
			aria-label={translate({
				id: 'theme.blog.post.paginator.navAriaLabel',
				message: 'Blog post page navigation',
				description: 'The ARIA label for the blog posts pagination',
			})}>
			{olderPost && (
				<PaginatorNavLink
					{...olderPost}
					subLabel={
						<Translate
							id="theme.blog.post.paginator.olderPost"
							description="The blog post button label to navigate to the older/next post"
						>
							Older post
						</Translate>
					}
					isNext={false}
				/>
			)}
			{newerPost && (
				<PaginatorNavLink
					{...newerPost}
					subLabel={
						<Translate
							id="theme.blog.post.paginator.newerPost"
							description="The blog post button label to navigate to the newer/previous post"
						>
							Newer post
						</Translate>
					}
					isNext={true}
				/>
			)}
		</nav>
	);
}

やったこと​

ソースを取得して、書き換えました。

ソースの取得​

途中の質問には、TypeScript / YES と答えました。

% npx docusaurus swizzle @docusaurus/theme-classic BlogPostPaginator

取得した index.tsx に変更を加えます。

場所の入れ替え​

{nextItem && (... ブロックと {prevItem && (... ブロックを入れ替えます。

入れ替えるというのは、この要素そのものを記述する順番を入れ替えるということです。 ブレス記号による有効範囲ブロック単位で入れ替えます。

isNext={false} を nextItem の subLabel の後ろに同じレベルで追加しました。 また、isNext={true} を prevItem の subLabel の後ろに同じレベルで追加しました。

これで左側に「過去の記事」、右側に「新しい記事」の案内リンクになります。

実はよくわかってない​

ぶっちゃけ TypeScript や JavaScript、React のことは さっぱりわかりません （syntax の理解があやしいレベル）。

コードとデータ構造をみて「これでいいのかなー…？」と 手を動かして試しながら進んで、意図した振る舞いになった、という代物です。 そのため、もしかしたら間違えているかもしれません（より良い書き方や実装方法があるのかも？）。

そんな私の投稿に答えてくれた Docusaurus チームの人に感謝です。

本記事で使用しているスクリーンショットは、OpenAI の対話型 AI との実際の会話画面を記録したものが含まれます。 当サイトの情報は個人の意見であり、正確性・完全性を保証するものではありません（AI が生成した回答を含む）。