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')

Some people use blogs to write documentation (like the page you're reading right now), and usually, there's a menu bar/directory bar on the left to help with navigation.
So Kecare also provides a simpler, more unified way to write menus~ Where should the menu be placed?

1. Where is the menu located, meow?

In Kecare, menus also have fixed storage locations:

• Menu Directory: theme directory/.kecare/menus/

✅ Only by placing it in this directory can Kecare scan and generate the corresponding menu meow~

2. Create a new menu file (Naming rules are very important)

Create a new file under the menu directory: *.menu.source.ts

For example:

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

The filename prefix (e.g., kecare-docs) will become the menu you reference in the article's Front Matter. It's recommended to use English + hyphens for better stability meow~

3. Write Menu Content (Export navItems)

Export navItems in the menu file, with the type 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,
      },
    ],
  },
];

What exactly is link?

link refers to the path of the article to jump to~ Generally, it corresponds to your article page route (or article slug), and it's most common to write it in a relative form, for example:

• ./Quick Start
• ./Writing

4. Enable the Menu Meow in the Article

Add menu to the Front Matter of the article .md where you need to display the menu:

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

The corresponding menu file is:

• theme directory/.kecare/menus/kecare-docs.menu.source.ts

✅ Rule summary: The value of menu = the filename prefix of .menu.source.ts~

5. NavItem Structure Description Meow

In kecare, NavItem supports two types of nodes:

• Leaf Node: Clickable for navigation (has link)
• Group Node: Serves only as a category (has items)

Type definitions (reference):

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

FAQ (Meow Meow Meow)

• Q: Can an article be associated with multiple menus? Typically, an article is bound to only one menu. If multiple menus are needed, support from the theme side is required (e.g., merged rendering), nya~
• Q: Must the menu file be named \*.menu.source.ts? Yes, nya~ This is the naming convention for Kecare to scan menu files. Files not following this rule might not be recognized.