メニュー
メニューを使用すると、サイトのナビゲーション構造を単純な宣言的な方法で記述できます。メニューは2つのステップで構成されています
- そのディレクトリのメニュー構造を含む
menu.mdファイルを定義します。 useContent()関数を使用して、レンダリング用のテンプレートでメニュー構造を取得します。詳細はこちら
ファイル構造
まず、ファイルを次のようにレイアウトします。
src/
└── routes/
└── some/
├── menu.md
├── layout.tsx
└── path/
└── index.tsx # https://example.com/some/pathhttps://example.com/some/path に移動するとアクティブになります
src/routes/some/path/index.tsx：このコンポーネントは、ページコンテンツのレンダリングに使用されます。src/routes/some/layout.tsx：このレイアウトは、src/routes/some/path/index.tsxの周りにコンテンツを提供するために使用されます。内部的には、レイアウトはsrc/routes/some/menu.mdを使用してメニューをレンダリングできます。src/routes/some/menu.md：このファイルは、src/routes/some/layout.tsxによってレンダリングされるメニュー構造を宣言するために使用されます。
メニュー構造の宣言
menu.md を使用して、メニュー構造を宣言します。
- 見出し（
#、##など）を使用してメニューの深さを定義します。 - 箇条書きリスト（
-）を使用して、メニュー項目を定義します。
src/route/some/menu.md
# Docs
## Getting Started
- [Introduction](introduction/index.md)
## Components
- [Basics](/docs/(qwik)/components/basics/index.mdx)メニュー構造の取得
実行時に、任意のコンポーネントが useContent() フックでメニューを取得できます。返される型は ContentMenu です。
上記の例は、次を返します
{
text: "Docs",
items: [
{
text: "Getting Started",
items: [
{
text: "Introduction",
href: "/docs/introduction"
}
],
},
{
text: "Components",
items: [
{
text: "Basics",
href: "/docs/(qwik)/components/basics"
}
],
},
],
}レイアウトでの ContentMenu の使用
useContent() は現在のルートの一部である任意のコンポーネントから呼び出すことができますが、通常はレイアウトコンポーネント（またはレイアウトで使用されるコンポーネント）でメニューをレンダリングするために使用されます。使用例を以下に示します
import { component$ } from '@builder.io/qwik';
import { useLocation, useContent } from '@builder.io/qwik-city';
export default component$(() => {
const { menu } = useContent();
const { url } = useLocation();
return (
<nav class="menu">
{menu
? menu.items?.map((item, index) => (
<div key={index}>
<h5>{item.text}</h5>
<ul>
{item.items?.map((item, subIndex) => (
<li key={`item-${index}-${subIndex}`}>
<a
href={item.href}
class={{
'is-active': url.pathname === item.href,
}}
>
{item.text}
</a>
</li>
))}
</ul>
</div>
))
: null}
</nav>
);
});コントリビューター
このドキュメントの改善にご協力いただいたすべてのコントリビューターに感謝します！
