菜单 | 高级 📚 Qwik 文档

菜单允许您以简单、声明式的方式描述网站导航结构。菜单分为两个步骤

定义一个 menu.md 文件，其中包含其所在目录的菜单结构。
使用 useContent() 函数在模板中检索菜单结构以进行渲染。在此处阅读更多信息

文件结构

首先，布局文件如下

src/
└── routes/
    └── some/
        ├── menu.md
        ├── layout.tsx
        └── path/
            └── index.tsx  # https://example.com/some/path

导航到 https://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>
  );
});

贡献者

感谢所有帮助改进本文档的贡献者！

菜单

文件结构

声明菜单结构

检索菜单结构

在布局中使用 ContentMenu

贡献者

在布局中使用 `ContentMenu`