首页
首页
指南
挑战

路由配置

文件结构和路由映射问题

关于路由配置中文件映射的问题，在视频中有演示

TODO

视频演示路由和文件的映射关系

缺陷

官方说可以自动生成侧边栏，但是我没看明白，所以用手动配的了

视频演示如何配置

TODO

在视频里配一个新的导航项和侧边栏

参考目录结构

路由配置参考用图

导航栏

在rspress.config.ts启用导航栏

请在themeConfig配置项中，加入nav这一配置，它右边应该写一个数组，这里直接将它封装在navConfig.ts里了。

rspress.config.ts
1...
2import navConfig  from './conf/navConfig'; // 引入导航栏配置
3export default defineConfig({
4  ...
5  themeConfig: {
6    nav: navConfig
7  }
8  ...
9});

在navConfig.ts详细配置导航栏

navConfig.ts
1// navConfig.ts
2export default 
3    [
4        {
5          text: '首页',
6          link: '/', // 指定主页的链接
7        },
8        {
9          text: '指南',
10          link: '/guide/', // 指定指南页面的链接
11          items:[
12            {
13              text:'Rspress使用指南',
14              link: '/rspress/index',
15            }
16          ]
17        },
18        {
19          text: '笔记',
20          link: '/note/', // 指定指南页面的链接
21        },
22      ]
下拉菜单式导航

想在导航栏启用下拉菜单，只需要在对应的导航项中添加items配置即可。

侧边栏

在rspress.config.ts启用侧边栏

rspress.config.ts
1...
2import sidebarConfig from './conf/sidebarConfig'; // 引入侧边栏配置
3export default defineConfig({
4  ...
5  themeConfig: {
6    sidebar: sidebarConfig,
7  }
8  ...
9});

在sidebarConfig.ts详细配置导航栏

sidebarConfig.ts
1// sidebarConfig.ts
2export default {
3    '/guide/': [
4      {
5        text: '开始',
6        items: [
7          {
8            text: '介绍',
9            link: '/guide/index',
10          },
11          {
12            text: '快速开始',
13            link: '/guide/quick-start',
14          }
15        ],
16      },
17      {
18        text: 'Rspress',
19        link: '/rspress/index',
20        items:[
21          {
22            text: 'mdx使用指南',
23            link: '/rspress/1-mdx_guide',
24          },
25          {
26            text: '路由配置指南',
27            link: '/rspress/2-route_guide',
28          },
29          {
30            text: '首页定制',
31            link: '/rspress/3-home_page',
32          },
33          {
34            text: '图片使用指南',
35            link: '/rspress/4-image_guide',
36          }
37        ]
38      }
39    ],
40    '/note/':[
41      {
42        text: '笔记',
43        items:[
44            {
45              text: '笔记1',
46              link: '/note/note1',
47            },
48            {
49              text: '笔记2',
50              link: '/note/note2',
51            }
52        ]
53      }
54    ]
55  }