导航栏配置

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

快速开始

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

添加一个基础链接

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

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

src/theme.config.ts

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

添加下拉菜单 (Dropbox)

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

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

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

src/theme.config.ts

export default defineConfig({
  nav: [
    // ...
    {
      text: "文章",
      href: "/posts/",
      icon: "i-ri-quill-pen-fill",
      dropbox: {
        enable: true, // 启用下拉菜单
        items: [ // 子菜单内容
          {
            href: "/categories/",
            text: "分类",
            icon: "i-ri-book-shelf-fill",
          },
          {
            href: "/tags/",
            text: "标签",
            icon: "i-ri-price-tag-3-fill",
          },
          {
            href: "/archives/",
            text: "归档",
            icon: "i-ri-archive-line",
          },
        ],
      },
    },
  ],
});

关于图标

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

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