导航栏模块
导航栏对一个网站来说非常重要，它可以让用户快速的在网站的不同页面之间进行跳转，也可以让用户快速的找到网站的一些重要信息。
自定义导航菜单
你可以在 themeConfig.nav 中添加自定义的导航菜单，配置为一个数组，如下：
rspress.config.ts
import { defineConfig } from '@rspress/core';
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/core';
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/core';
export default defineConfig({
themeConfig: {
darkMode: false,
},
});相关链接
网站的社交链接。比如：
rspress.config.ts
import { defineConfig } from '@rspress/core';
export default defineConfig({
themeConfig: {
socialLinks: [
{
icon: 'github',
mode: 'link',
content: 'https://github.com/web-infra-dev/modern.js',
},
],
},
});更多配置请参考链接。