导航栏模块

导航栏对一个网站来说非常重要，它可以让用户快速的在网站的不同页面之间进行跳转，也可以让用户快速的找到网站的一些重要信息。

自定义导航菜单

你可以在 themeConfig.nav 中添加自定义的导航菜单，配置为一个数组，如下：

rspress.config.ts

import { defineConfig } from 'rspress/config';
export default defineConfig({
  themeConfig: {
    nav: [],
  },
});

导航栏配置为一个数组，数组中的每一项都是一个 NavItem 对象，它具有以下类型：

export type NavItem = NavItemWithLink | NavItemWithChildren;

也就是说，每个导航栏元素( NavItem )可以是一个链接( NavItemWithLink )，也可以是一个包含子元素的导航栏组( NavItemWithChildren )。

NavItemWithLink

export interface NavItemWithLink {
  text: string;
  link: string;
  activeMatch?: string;
  position?: 'left' | 'right';
}

其中各项属性的含义如下:

• text - 导航栏文本
• link - 导航栏链接
• activeMatch - 导航栏链接的激活规则
• position - 导航栏菜单项定位

属性详情：

activeMatch 用于匹配当前路由，当路由匹配 activeMatch 规则时，nav 项会高亮显示。

默认情况下，activeMatch 是 NavItem 的 link 属性。

position 用于配置顶部菜单项的独立定位，可选项为：

• 'left'：置于菜单项到顶部的左侧菜单栏；
• 'right'：置于菜单项到顶部的右侧菜单栏。

如果 position 未配置的情况下会默认放到右侧菜单栏，效果等同于配置 'right'。

NavItemWithChildren

export interface NavItemWithChildren {
  text: string;
  items: (NavItemWithLink | NavItemWithChildren)[];
  position?: 'left' | 'right';
}

其中各项属性的含义如下:

• text - 导航栏文本
• items - 子导航栏元素
• position- 带有子元素的导航栏菜单项定位

示例

rspress.config.ts

import { defineConfig } from 'rspress/config';
export default defineConfig({
  themeConfig: {
    nav: [
      {
        text: 'Home',
        link: '/',
        position: 'left',
      },
      {
        text: '更多链接',
        items: [
          {
            text: 'GitHub',
            link: 'http://github.com/',
          },
          {
            text: 'X',
            link: 'http://x.com/',
          },
          // 也可以是一个导航栏组
          {
            text: 'Group',
            items: [
              {
                text: 'Personal',
                link: 'http://example.com/',
              },
              {
                text: 'Company',
                link: 'http://example.com/',
              },
            ],
          },
        ],
        position: 'right',
      },
    ],
  },
});

白天/夜间模式

默认情况下导航栏会带上 白天/夜间 模式的切换按钮，你可以通过如下的配置禁用：

rspress.config.ts

import { defineConfig } from 'rspress/config';
export default defineConfig({
  themeConfig: {
    darkMode: false,
  },
});

相关链接

网站的社交链接。比如：

rspress.config.ts

import { defineConfig } from 'rspress/config';
export default defineConfig({
  themeConfig: {
    socialLinks: [
      {
        icon: 'github',
        link: 'github.com/web-infra-dev/modern.js',
      },
    ],
  },
});

更多配置请参考链接。