ナビゲーションサイドバーの使い方

草案
このページは完成していません。

MDN の操作はよくサイドバーを用いて行われ、これは一連の記事や、同じ系列のドキュメントと MDN の他の領域の両方における関連コンテンツを列挙します。 MDN のサイドバーは自動的には生成されません。ページにサイドバーを入れるには、いくらかのマクロを作成し使用する必要があります。この記事では、 MDN サイドバーマクロの作成と記事内での使用方法の両方の手順を確認します。

現在の MDN のサイドバーマクロ

MDN には既に、サイドバーを生成するたくさんのマクロがあります。多くは MDN の特定のセクションに特化していますが、他に、特化したものがない文書領域のための一般的なサイドバーを生成するためのものがあります。

AddonSidebar
アドオンの文書を操作するためのサイドバーを挿入します。これは主にブラウザー拡張機能の作成についてのコンテンツです。
APIRef
API インターフェイスのリファレンスページおよびサブページで使用されるサイドバーを挿入します。
CanvasSidebar
HTML/DOM Canvas の文書の中で使用されるサイドバーを挿入します。
DefaultAPISidebar
特化したサイドバーのタイプがない API の API 概要ページで使用することができる既定のサイドバーを挿入します。
FirefoxSidebar
Firefox に特化した文書で使用されるサイドバーを挿入します。
GamesSidebar
ウェブ技術を使ったゲーム開発に関する MDN のコンテンツを操作するサイドバーを挿入します。
HTMLSidebar
MDN の HTML 文書で使用されるサイドバーを挿入します。
HTTPSidebar
MDN の HTTP 文書内のページで使用するためのサイドバーを挿入します。
JSSidebar
JavaScript 文書で使用するためのサイドバーを挿入します。
LearnSidebar
学習エリアのサイドバーを挿入します。
MDNSidebar
MDN の「メタ文書」、つまり、 MDN ウェブ文書サイト自体の利用や編集に関する文書を操作するサイドバーを挿入します。このページで実際にマクロが使われているのを見ることができます。
ServiceWorkerSidebar
サービスワーカーについての文書で使用されるサイドバーを挿入します。
SpiderMonkeySidebar
SpiderMonkey (Mozilla の JavaScript エンジン) のページに使用するサイドバーを挿入します。
ToolsSidebar
Firefox 開発ツールについてのページを列挙するサイドバーを挿入します。
WebAssemblySidebar
WebAssembly に関するリンクを含むサイドバーを挿入します。
WebExtAPISidebar
ブラウザー拡張 (WebExtension) についての API リファレンス文書を操作するために使われるサイドバーを挿入します。
WebGLSidebar
WebGL に関するコンテンツの操作を提供するサイドバーを挿入します。
WebRTCSidebar
MDN の WebRTC 文書の操作を提供するコンテンツのサイドバーを挿入します。
XSLTRef
XSLT, EXSLT, XPath についての文書のサイドバーを挿入します。

サイドバーの使用

サイドバーをページに追加するには、適切なマクロを探し、それから、サイドバーを挿入したいページで、「編集」ボタンをクリックしてください。ページに <div> ブロックを追加して、中身はマクロを呼ぶだけにしてください。 <div> は WYSIWYG エディターを使用して追加することができないので、ツールバーの「ソース」ボタンをクリックして HTML ソース編集モードに切り替える必要があります。そうすれば、マクロ呼び出しを追加することができます。通常、サイドバーマクロは引数を必要としませんので、単に次のように書くことができます。

<div>{{MDNSidebar}}</div>

通常は、これを文書の最初の行に入れてください。一部の文書では、代わりに末尾に入っています。これはうまく動作しますが、一貫性を保証するために、できれば先頭に配置してみてください。

すでにマクロを呼び出す <div> ブロックがページの先頭にある場合、例えばバナーを生成する {{non-standard_header}} などがある場合は、次のように同じ <div> の中にサイドバーのマクロを入れることができます。

<div>{{HTTPSidebar}}{{non-standard_header}}</div>

包含ブロック

重要なことは、サイドバーのマクロは <p> ブロックの中に入れないことで、ソースエディターを使用しなければそうなってしまいます。これは、 <p> の中に入ったサイドバーのマクロは、 Kuma プラットフォーム本文のコンテンツのテキストのように入れてしまうからです。自動的にページの概要テキストを選択するコード (SEO や MDN の自動生成メニューでページの題名や概要を列挙する場合など) は記事の最初の段落を探しますが、結果としてサイドバーの中の部分がページの概要として使用される可能性があります。これは期待する結果ではないでしょう。

ですから、サイドバーのマクロ呼び出し (およびその他の記事コンテンツ前に使用されるマクロ) を囲むためには <div> のラッパーを使用するように注意してください。

サイドバーの作成

詳細は執筆中

SidebarUtilities について触れておきます。

サイドバーの構築に役立つマクロがいくつかあります。

ListSubpagesForSidebar
指定されたページのサブページを使用して、サイドバー内で利用するために構築されたリンクのツリーを生成します。

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,