@modern-js/doc-tools-doc/docs/zh/guide/default-theme/navbar.mdx

Website for @modern-js/doc-tools

# 导航栏模块

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

## 自定义导航菜单

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

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

export default defineConfig({
  doc: {
    themeConfig: {
      nav: [],
    },
  },
  plugins: [docTools()],
});
```

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

```ts
export type NavItem = NavItemWithLink | NavItemWithChildren;
```

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

### NavItemWithLink

```ts
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

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

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

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

### 示例

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

export default defineConfig({
  doc: {
    themeConfig: {
      nav: [
        {
          text: 'Home',
          link: '/',
          position: 'left',
        },
        {
          text: '更多链接',
          items: [
            {
              text: 'Github',
              link: 'http://github.com/',
            },
            {
              text: 'Twitter',
              link: 'http://twitter.com/',
            },
            // 也可以是一个导航栏组
            {
              text: 'Group',
              items: [
                {
                  text: 'Personal',
                  link: 'http://xxx.com/',
                },
                {
                  text: 'Company',
                  link: 'http://xxx.com/',
                },
              ],
            },
          ],
          position: 'right',
        },
      ],
    },
  },
  plugins: [docTools()],
});
```

## 白天/夜间模式

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

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

export default defineConfig({
  doc: {
    themeConfig: {
      darkMode: false,
    },
  },
  plugins: [docTools()],
});
```

## 相关链接

网站的社交链接。比如：

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';

export default defineConfig({
  doc: {
    themeConfig: {
      socialLinks: [
        {
          icon: 'github',
          link: 'github.com/web-infra-dev/modern.js',
        },
      ],
    },
  },
  plugins: [docTools()],
});
```

更多配置请参考 [链接](/api/config/config-theme#sociallinks)。