菜单（Menu）

这是第一个标签页的内容。
- 可以包含 Markdown
- **加粗**、`代码`等

这是第二个标签页的内容。
1. 有序列表
2. 第二个项目

export default {
  data () {
    return {
      msg: 'Removed' // [!code --]
      msg: 'Added' // [!code ++]
    }
  }
}

console.log('Not focused');
console.log('Focused') // [!code focus]
console.log('Not focused');

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')

有的人会拿博客来写文档（比如你现在读的这一页捏），通常左侧会有一个菜单栏/目录栏帮助跳转。
所以 Kecare 也提供了一套更简单、更统一的菜单编写方式喵~菜单放在哪里？

1. 菜单放在哪里喵？

在 Kecare 中，菜单也有固定存放位置：

• 菜单目录：主题目录/.kecare/menus/

✅ 只要放在这个目录里，Kecare 才能扫描到并生成对应的菜单喵~

2. 新建菜单文件（命名规则很重要捏）

在菜单目录下新建：*.menu.source.ts

例如：

• kecare-docs.menu.source.ts
• milkio-docs.menu.source.ts

文件名前缀（如 kecare-docs）会成为你在文章 Front Matter 里引用的 menu，建议用英文 + 短横线更稳定喵~

3. 编写菜单内容（导出 navItems）

在菜单文件里导出 navItems，类型为 NavItem[]：

import type { NavItem } from "kecare";

export const navItems: NavItem[] = [
  {
    text: "快速开始喵",
    level: 1,
    items: [
      {
        text: "快速开始",
        link: "./快速开始",
        level: 2,
      },
      {
        text: "写作",
        link: "./写作",
        level: 2,
      },
    ],
  },
  {
    text: "自定义",
    level: 1,
    items: [
      {
        text: "编写主题",
        link: "./编写主题",
        level: 3,
      },
    ],
  },
];

link 到底是什么？

link 指的是要跳转到的文章路径哦~ 一般来说它对应你的文章页面路由（或文章 slug），写成相对形式最常见，例如：

• ./快速开始
• ./写作

4. 在文章中启用菜单喵

在需要显示菜单的文章 .md 的 Front Matter 里加 menu：

---
menu: kecare-docs # 这里只写文件名前缀，不用写 .menu.source.ts 喵~
---

它对应的菜单文件是：

• 主题目录/.kecare/menus/kecare-docs.menu.source.ts

✅ 规则总结：menu 的值 = .menu.source.ts 的文件名前缀捏~

5. NavItem 结构说明喵

在 kecare 里，NavItem 支持两种节点：

• 叶子节点：可点击跳转（有 link）
• 分组节点：仅作为分类（有 items）

类型定义（参考）：

export type NavItem =
  | { text: string; link: string; level: number; desc?: string; icon?: string }
  | { text: string; items: NavItem[]; level: number };

FAQ（喵喵喵）

• Q：一个文章能挂多个菜单吗？ 通常一个文章只绑定一个 menu。如果要多个，需要主题侧支持（例如合并渲染），捏~
• Q：菜单文件一定要叫 \*.menu.source.ts 吗？ 是的喵~ 这是 Kecare 扫描菜单文件的约定命名，不按规则可能不会被识别。