导航栏配置

导航栏是用户浏览网站的主要入口。在 ShokaX 中，你可以通过 src/theme.config.ts 文件中的 nav 字段来轻松定制你的导航菜单。

快速开始

打开项目的 src/theme.config.ts 文件，找到 nav 数组。这里存放了所有的导航项配置。

添加一个基础链接

最简单的导航项包含三个部分：

text: 显示在导航栏上的文字。
href: 点击跳转的链接地址。如果是站内链接，直接写路径（如 /posts/）；如果是外部链接，填写完整的 URL（如 https://github.com）。
icon (可选): 图标的 CSS 类名。

export default defineConfig({
  // ... 其他配置
  nav: [
    {
      text: "首页",
      href: "/",
      icon: "i-ri-home-line",
    },
    {
      text: "关于我",
      href: "/about/",
      icon: "i-ri-user-smile-line",
    },
  ],
});

添加下拉菜单 (Dropbox)

如果你的菜单项较多，可以使用下拉菜单将它们分组。

要创建一个下拉菜单，你需要：

将 dropbox 设置为 true。
在 dropboxItems 数组中填写入子菜单项。
父级菜单项仍需要 text 和 icon，href 通常指向该分组的主页面（必填）。

export default defineConfig({
  nav: [
    // ...
    {
      text: "文章归档",
      href: "/posts/",     // 点击父级菜单跳转的地址
      icon: "i-ri-quill-pen-fill",
      dropbox: true,       // 启用下拉功能
      dropboxItems: [
        {
          text: "分类",
          href: "/categories/",
          icon: "i-ri-book-shelf-fill",
        },
        {
          text: "标签",
          href: "/tags/",
          icon: "i-ri-price-tag-3-fill",
        },
      ],
    },
  ],
});

配置项详解

属性名	类型	说明
`text`	`string`	必填。显示的标题文字。
`href`	`string`	必填。链接地址。站内链接建议以 `/` 开头和结尾。
`icon`	`string`	可选。图标类名。
`dropbox`	`boolean`	可选。是否为下拉菜单容器。
`dropboxItems`	`NavItem[]`	可选。子菜单项列表，结构与普通菜单项一致。

关于图标

ShokaX 使用 UnoCSS 集成了 Iconify 图标库。默认配置使用了 Remix Icon (i-ri-)。

你可以在 Icones 网站上搜索心仪的图标。
复制图标名称后，在配置中加上前缀 i- 即可。例如图标名为 home-line，配置中填写 i-ri-home-line。