跳到主要内容

导航栏格式

最后更新于:

默认风格

默认风格

 1export default defineConfig({
 2
 3  themeConfig: {
 4    //导航栏
 5    nav: [
 6      { text: '首页', link: '/' }, 
 7      { text: '快速上手', link: '/getting-started' },
 8      { text: 'VitePress', link: 'https://vitepress.dev/' },
 9    ], 
10  },
11
12})

效果:

image-20250525083810797

下拉式菜单导航 风格

若想要下拉式菜单导航,就需要加一个 iteams

 1export default defineConfig({
 2
 3  themeConfig: {
 4    //导航栏
 5    nav: [
 6      { text: '首页', link: '/' }, 
 7      {
 8        text: '指南',
 9        items: [
10          { text: '前言', link: '/preface' },
11          { text: '快速上手', link: '/getting-started' },
12          { text: '配置', link: '/configuration' }
13        ]
14      },
15      { text: 'VitePress', link: 'https://vitepress.dev/' },
16    ], 
17  },
18
19})

效果:

image-20250525083845218

分组风格

给下拉菜单赋予分组标题,就要再次嵌套 iteams

 1export default defineConfig({
 2
 3  themeConfig: {
 4    //导航栏
 5    nav: [
 6      { text: '首页', link: '/' },
 7      {
 8        text: '指南',
 9        items: [
10          {
11            // 分组标题1
12            text: '介绍',
13            items: [
14              { text: '前言', link: '/preface' },
15            ],
16          },
17          {
18            // 分组标题2
19            text: '基础设置',
20            items: [
21              { text: '快速上手', link: '/getting-started' },
22              { text: '配置', link: '/configuration' },
23              { text: '页面', link: '/page' },
24              { text: 'Frontmatter', link: '/frontmatter' },
25            ],
26          },
27          {
28            // 分组标题3
29            text: '进阶玩法',
30            items: [
31              { text: 'Markdown', link: '/Markdown' },
32              { text: '静态部署', link: '/assets' },
33            ],
34          },
35        ],
36      },
37      { text: 'VitePress', link: 'https://vitepress.dev/' },
38    ],
39  },
40
41})

image-20250524094158267

导航栏图标

分组风格(html方式)

给下拉菜单赋予分组标题,就要再次嵌套 iteams

 1      {
 2        text: '🗃️笔记',
 3        items: [
 4          {
 5            // 分组标题1
 6            text: '运维',
 7            items: [
 8              {
 9                text: `
10                  <div style="display: flex; align-items: center; gap: 4px;">
11                    <img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
12                    <span>Linux</span>
13                  </div>
14                  `,
15                link: '/linux',
16              },
17              {
18                text: `
19                  <div style="display: flex; align-items: center; gap: 4px;">
20                    <img src="/img/nav/nginx.avif" alt="" style="width: 16px; height: 16px;">
21                    <span>Nginx</span>
22                  </div>
23                  `,
24                link: '/nginx',
25              },
26            ],
27          },
28          {
29            // 分组标题2
30            text: '前端',
31            items: [
32              {
33                text: `
34                  <div style="display: flex; align-items: center; gap: 4px;">
35                    <img src="/img/nav/html.avif" alt="" style="width: 16px; height: 16px;">
36                    <span>Html</span>
37                  </div>
38                  `,
39                link: '/html',
40              },
41              {
42                text: `
43                  <div style="display: flex; align-items: center; gap: 4px;">
44                    <img src="/img/nav/css.avif" alt="" style="width: 16px; height: 16px;">
45                    <span>Css</span>
46                  </div>
47                  `,
48                link: '/css',
49              },
50            ],
51          },
52        ],
53      },  

image-20250524094158267

自己html最终版

  1    nav: [
  2      { text: "🏡首页", link: "/" },
  3
  4      // 笔记
  5      {
  6        text: '🗃️笔记',
  7        items: [
  8          {
  9            // 分组标题1
 10            text: '运维',
 11            items: [
 12              {
 13                text: `
 14                  <div style="display: flex; align-items: center; gap: 4px;">
 15                    <img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
 16                    <span>Linux</span>
 17                  </div>
 18                  `,
 19                link: '/linux',
 20              },
 21              {
 22                text: `
 23                  <div style="display: flex; align-items: center; gap: 4px;">
 24                    <img src="/img/nav/nginx.avif" alt="" style="width: 16px; height: 16px;">
 25                    <span>Nginx</span>
 26                  </div>
 27                  `,
 28                link: '/nginx',
 29              },
 30            ],
 31          },
 32          {
 33            // 分组标题2
 34            text: '前端',
 35            items: [
 36              {
 37                text: `
 38                  <div style="display: flex; align-items: center; gap: 4px;">
 39                    <img src="/img/nav/html.avif" alt="" style="width: 16px; height: 16px;">
 40                    <span>Html</span>
 41                  </div>
 42                  `,
 43                link: '/html',
 44              },
 45              {
 46                text: `
 47                  <div style="display: flex; align-items: center; gap: 4px;">
 48                    <img src="/img/nav/css.avif" alt="" style="width: 16px; height: 16px;">
 49                    <span>Css</span>
 50                  </div>
 51                  `,
 52                link: '/css',
 53              },
 54            ],
 55          },
 56          {
 57            // 分组标题3
 58            text: '编程',
 59            items: [
 60              {
 61                text: `
 62                  <div style="display: flex; align-items: center; gap: 4px;">
 63                    <img src="/img/nav/python.avif" alt="" style="width: 16px; height: 16px;">
 64                    <span>Python</span>
 65                  </div>
 66                  `,
 67                link: '/python',
 68              },
 69              {
 70                text: `
 71                  <div style="display: flex; align-items: center; gap: 4px;">
 72                    <img src="/img/nav/go.svg" alt="" style="width: 16px; height: 16px;">
 73                    <span>Go</span>
 74                  </div>
 75                  `,
 76                link: '/go',
 77              },
 78            ],
 79          },
 80          {
 81            text: '专题',
 82            items: [
 83              {
 84                text: `
 85                  <div style="display: flex; align-items: center; gap: 4px;">
 86                    <img src="/img/nav/博客.svg" alt="" style="width: 16px; height: 16px;">
 87                    <span>博客搭建</span>
 88                  </div>
 89                  `,
 90                link: '/blog',
 91              },
 92              {
 93                text: `
 94                  <div style="display: flex; align-items: center; gap: 4px;">
 95                    <img src="/img/nav/前端demo.svg" alt="" style="width: 16px; height: 16px;">
 96                    <span>前端demo</span>
 97                  </div>
 98                  `,
 99                link: '/qianduan-demo',
100              },
101              {
102                text: `
103                  <div style="display: flex; align-items: center; gap: 4px;">
104                    <img src="/img/nav/Git.svg" alt="" style="width: 16px; height: 16px;">
105                    <span>Git</span>
106                  </div>
107                  `,
108                link: '/git',
109              },
110              {
111                text: `
112                  <div style="display: flex; align-items: center; gap: 4px;">
113                    <img src="/img/nav/面试.svg" alt="" style="width: 16px; height: 16px;">
114                    <span>面试</span>
115                  </div>
116                  `,
117                link: '/mianshi',
118              },
119              {
120                text: `
121                  <div style="display: flex; align-items: center; gap: 4px;">
122                    <img src="/img/nav/NAS.svg" alt="" style="width: 16px; height: 16px;">
123                    <span>NAS</span>
124                  </div>
125                  `,
126                link: '/NAS',
127              },
128              {
129                text: `
130                  <div style="display: flex; align-items: center; gap: 4px;">
131                    <img src="/img/nav/脚本.svg" alt="" style="width: 16px; height: 16px;">
132                    <span>脚本</span>
133                  </div>
134                  `,
135                link: '/jiaoben',
136              },
137              {
138                text: `
139                  <div style="display: flex; align-items: center; gap: 4px;">
140                    <img src="/img/nav/工具.svg" alt="" style="width: 16px; height: 16px;">
141                    <span>工具</span>
142                  </div>
143                  `,
144                link: '/tools',
145              },
146            ],
147          },
148          {
149            text: '开源项目',
150            items: [
151              {
152                text: `
153                  <div style="display: flex; align-items: center; gap: 4px;">
154                    <img src="/img/nav/teek.svg" alt="" style="width: 16px; height: 16px;">
155                    <span>Teek-one</span>
156                  </div>
157                  `,
158                link: '/teek',
159              },
160              {
161                text: `
162                  <div style="display: flex; align-items: center; gap: 4px;">
163                    <img src="/img/nav/Typora.svg" alt="" style="width: 16px; height: 16px;">
164                    <span>Typora-one</span>
165                  </div>
166                  `,
167                link: '/typora-theme-one',
168              },
169              
170            ],
171          },
172        ],
173      },  
174
175      // 生活
176      {
177        text: '🏓生活',
178        items: [
179          {
180            // 分组标题1
181            text: '娱乐',
182            items: [
183              {
184                text: `
185                  <div style="display: flex; align-items: center; gap: 4px;">
186                    <img src="/img/nav/相册.svg" alt="" style="width: 16px; height: 16px;">
187                    <span>相册</span>
188                  </div>
189                  `,
190                link: 'https://photo.onedayxyy.cn/',
191              },
192              {
193                text: `
194                  <div style="display: flex; align-items: center; gap: 4px;">
195                    <img src="/img/nav/电影.svg" alt="" style="width: 16px; height: 16px;">
196                    <span>电影</span>
197                  </div>
198                  `,
199                link: '/movie',
200              },
201              {
202                text: `
203                  <div style="display: flex; align-items: center; gap: 4px;">
204                    <img src="/img/nav/音乐.svg" alt="" style="width: 16px; height: 16px;">
205                    <span>音乐</span>
206                  </div>
207                  `,
208                link: '/music',
209              },
210            ],
211          },
212          {
213            // 分组标题2
214            text: '小屋',
215            items: [
216              {
217                text: `
218                  <div style="display: flex; align-items: center; gap: 4px;">
219                    <img src="/img/nav/精神小屋.svg" alt="" style="width: 16px; height: 16px;">
220                    <span>精神小屋</span>
221                  </div>
222                  `,
223                link: '/love',
224              },
225              {
226                text: `
227                  <div style="display: flex; align-items: center; gap: 4px;">
228                    <img src="/img/nav/时间管理.svg" alt="" style="width: 16px; height: 16px;">
229                    <span>时间管理</span>
230                  </div>
231                  `,
232                link: '/time-plan',
233              },
234            ],
235          },
236        ],
237      },  
238
239      // 索引
240      {
241        text: '👏索引',
242        items: [
243          { text: '📃分类页', link: '/categories' },
244          { text: '🔖标签页', link: '/tags' },
245          {
246            text: `
247              <div style="display: flex; align-items: center; gap: 4px;">
248                <img src="/img/nav/归档.svg" alt="" style="width: 16px; height: 16px;">
249                <span>归档页</span>
250              </div>
251              `,
252            link: '/archives',
253          },
254          {
255            text: `
256              <div style="display: flex; align-items: center; gap: 4px;">
257                <img src="/img/nav/清单.svg" alt="" style="width: 16px; height: 16px;">
258                <span>清单页</span>
259              </div>
260              `,
261            link: '/articleOverview',
262          },
263          {
264            text: `
265              <div style="display: flex; align-items: center; gap: 4px;">
266                <img src="/img/nav/登录.svg" alt="" style="width: 16px; height: 16px;">
267                <span>登录页</span>
268              </div>
269              `,
270            link: '/login',
271          },
272          {
273            text: `
274              <div style="display: flex; align-items: center; gap: 4px;">
275                <img src="/img/nav/风险提示.svg" alt="" style="width: 16px; height: 16px;">
276                <span>风险链接提示页</span>
277              </div>
278              `,
279            link: '/risk-link?target=https://onedayxyy.cn/',
280          },
281        ],
282      },  
283
284      // 关于
285      {
286        text: '🍷关于',
287        items: [
288          { text: '👋关于我', link: '/about-me' },
289          { text: '🎉关于本站', link: '/about-website' },
290          { text: '🌐网站导航', link: '/websites' },          
291          { text: "👂留言区", link: "/liuyanqu" },
292          { text: "💡思考", link: "/thinking" },
293          {
294            text: `
295              <div style="display: flex; align-items: center; gap: 4px;">
296                <img src="/img/nav/时间轴.svg" alt="" style="width: 16px; height: 16px;">
297                <span>时间轴</span>
298              </div>
299              `,
300            link: 'https://onedayxyy.cn/time-line/',
301          },
302          {
303            text: `
304              <div style="display: flex; align-items: center; gap: 4px;">
305                <img src="/img/nav/网站统计.svg" alt="" style="width: 16px; height: 16px;">
306                <span>网站统计</span>
307              </div>
308              `,
309            link: 'https://umami.onedayxyy.cn/share/DzS4g85V8JkxsNRk/onedayxyy.cn',
310          },
311          {
312            text: `
313              <div style="display: flex; align-items: center; gap: 4px;">
314                <img src="/img/nav/站点监控.svg" alt="" style="width: 16px; height: 16px;">
315                <span>站点监控</span>
316              </div>
317              `,
318            link: 'https://status.onedayxyy.cn/status/monitor',
319          },
320
321        ],
322      },       
323    ],

Hyde 组件方式版

 1// nav导航栏配置
 2import { TeekIcon, VdoingIcon, SSLIcon, BlogIcon } from "./icon/NavIcon";
 3export const Nav = [
 4  {
 5    text: "🏡首页",
 6    items: [
 7      { text: "首页", link: "/" },
 8      { text: "起始页", link: "https://hyde.seasir.top/" },
 9    ],
10  },
11  {
12    text: "📖笔记专栏",
13    items: [
14      {
15        component: "NavIcon",
16        props: TeekIcon,
17      },
18      {
19        component: "NavIcon",
20        props: VdoingIcon,
21      },
22      {
23        component: "NavIcon",
24        props: SSLIcon,
25      },
26      {
27        component: "NavIcon",
28        props: BlogIcon,
29      },
30    ],
31  },
32  {
33    text: "🧰工具资源", // 目录页链接,此处 link 是 vdoing 主题新增的配置项,有二级导航时,可以点击一级导航跳到目录页
34    items: [
35      { text: "开发工具", link: "/tools/" },
36      { text: "VSCode配置", link: "/vscode/" },
37      { text: "Git教程", link: "/git/" },
38      { text: "Docker", link: "/Docker/" },
39      { text: "实用软件", link: "/software/" },
40    ],
41  },
42  {
43    text: "🏙️生活娱乐",
44    items: [
45      { text: "相册", link: "https://photo.seasir.top/" },
46      { text: "音乐", link: "http://music.alger.fun/#/" },
47      { text: "电影", link: "/go-cata/" },
48    ],
49  },
50  { text: "👂畅所欲言", link: "/message-area/" },
51  {
52    text: "👏文章索引",
53    items: [
54      {
55        text: "本站",
56        items: [
57          { text: "分类", link: "/categories/" },
58          { text: "标签", link: "/tags/" },
59          { text: "归档", link: "/archives/" },
60          { text: "清单", link: "/articleOverview/" },
61          {
62            text: "风险提示页",
63            link: "/risk-link?target=http://localhost:5173/",
64          },
65        ],
66      },
67    ],
68  },
69  {
70    text: "🌐站点信息",
71    items: [
72      { text: "关于博主", link: "/about-me/" },
73      { text: "关于本站", link: "/about-website/" },
74      { text: "友链链接", link: "/friends/" },
75      { text: "网站导航", link: "/nav/" },
76      { text: "开源项目", link: "/opensource-project/" },
77      {
78        text: "站点统计",
79        link: "https://umami.seasir.top/share/rvVBNZWa0sUCN6wG/teek.seasir.top",
80      },
81      {
82        text: "站点状态",
83        link: "https://status.seasir.top/",
84      },
85    ],
86  },
87];

最新-抽离nav

编辑docs\.vitepress\config.ts

1import { Nav } from "./ConfigOne/Nav"; // 导入Nav模块
2
3
4    nav: Nav, // 导航栏配置

image-20250608161548387

image-20250608161615543

创建docs\.vitepress\ConfigOne目录:

image-20250608161744326

docs\.vitepress\ConfigOne\Nav.ts文件

  1// nav导航栏配置
  2import { TeekIcon, VdoingIcon, SSLIcon, BlogIcon } from "./icon/NavIcon";
  3export const Nav = [
  4    { text: "🏡首页", link: "/" },
  5
  6
  7    // 下拉菜单 (测试 导航栏图标-自定义组件 对  下拉菜单的影响)
  8    // {
  9    //   text: "📖笔记专栏",
 10    //   items: [
 11    //     {
 12    //       component: "NavIcon",
 13    //       props: TeekIcon,
 14    //     },
 15    //     {
 16    //       component: "NavIcon",
 17    //       props: VdoingIcon,
 18    //     },
 19    //     {
 20    //       component: "NavIcon",
 21    //       props: SSLIcon,
 22    //     },
 23    //     {
 24    //       component: "NavIcon",
 25    //       props: BlogIcon,
 26    //     },
 27    //   ],
 28    // },
 29
 30
 31
 32    // (测试 导航栏图标-自定义组件 对  分组菜单 的影响)
 33    // {
 34    //   text: '指南',
 35    //   items: [
 36    //     {
 37    //       // 分组标题1
 38    //       text: '介绍',
 39    //       items: [
 40    //         {
 41    //           component: "NavIcon",
 42    //           props: SSLIcon,
 43    //         },
 44    //         {
 45    //           component: "NavIcon",
 46    //           props: BlogIcon,
 47    //         },
 48    //       ],
 49    //     },
 50    //     {
 51    //       // 分组标题2
 52    //       text: '基础设置',
 53    //       items: [
 54    //         {
 55    //           component: "NavIcon",
 56    //           props: SSLIcon,
 57    //         },
 58    //         {
 59    //           component: "NavIcon",
 60    //           props: BlogIcon,
 61    //         },
 62    //       ],
 63    //     },
 64    //   ],
 65    // },
 66
 67
 68
 69    // 笔记
 70    {
 71      text: '🗃️笔记',
 72      items: [
 73        {
 74          // 分组标题1
 75          text: '运维',
 76          items: [
 77            {
 78              text: `
 79                <div style="display: flex; align-items: center; gap: 4px;">
 80                  <img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
 81                  <span>Linux</span>
 82                </div>
 83                `,
 84              link: '/linux',
 85            },
 86            {
 87              text: `
 88                <div style="display: flex; align-items: center; gap: 4px;">
 89                  <img src="/img/nav/nginx.avif" alt="" style="width: 16px; height: 16px;">
 90                  <span>Nginx</span>
 91                </div>
 92                `,
 93              link: '/nginx',
 94            },
 95          ],
 96        },
 97        {
 98          // 分组标题2
 99          text: '前端',
100          items: [
101            {
102              text: `
103                <div style="display: flex; align-items: center; gap: 4px;">
104                  <img src="/img/nav/html.avif" alt="" style="width: 16px; height: 16px;">
105                  <span>Html</span>
106                </div>
107                `,
108              link: '/html',
109            },
110            {
111              text: `
112                <div style="display: flex; align-items: center; gap: 4px;">
113                  <img src="/img/nav/css.avif" alt="" style="width: 16px; height: 16px;">
114                  <span>Css</span>
115                </div>
116                `,
117              link: '/css',
118            },
119          ],
120        },
121        {
122          // 分组标题3
123          text: '编程',
124          items: [
125            {
126              text: `
127                <div style="display: flex; align-items: center; gap: 4px;">
128                  <img src="/img/nav/python.avif" alt="" style="width: 16px; height: 16px;">
129                  <span>Python</span>
130                </div>
131                `,
132              link: '/python',
133            },
134            {
135              text: `
136                <div style="display: flex; align-items: center; gap: 4px;">
137                  <img src="/img/nav/go.svg" alt="" style="width: 16px; height: 16px;">
138                  <span>Go</span>
139                </div>
140                `,
141              link: '/go',
142            },
143          ],
144        },
145        {
146          text: '专题',
147          items: [
148            {
149              text: `
150                <div style="display: flex; align-items: center; gap: 4px;">
151                  <img src="/img/nav/博客.svg" alt="" style="width: 16px; height: 16px;">
152                  <span>博客搭建</span>
153                </div>
154                `,
155              link: '/blog',
156            },
157            {
158              text: `
159                <div style="display: flex; align-items: center; gap: 4px;">
160                  <img src="/img/nav/前端demo.svg" alt="" style="width: 16px; height: 16px;">
161                  <span>前端demo</span>
162                </div>
163                `,
164              link: '/qianduan-demo',
165            },
166            {
167              text: `
168                <div style="display: flex; align-items: center; gap: 4px;">
169                  <img src="/img/nav/Git.svg" alt="" style="width: 16px; height: 16px;">
170                  <span>Git</span>
171                </div>
172                `,
173              link: '/git',
174            },
175            {
176              text: `
177                <div style="display: flex; align-items: center; gap: 4px;">
178                  <img src="/img/nav/面试.svg" alt="" style="width: 16px; height: 16px;">
179                  <span>面试</span>
180                </div>
181                `,
182              link: '/mianshi',
183            },
184            {
185              text: `
186                <div style="display: flex; align-items: center; gap: 4px;">
187                  <img src="/img/nav/NAS.svg" alt="" style="width: 16px; height: 16px;">
188                  <span>NAS</span>
189                </div>
190                `,
191              link: '/NAS',
192            },
193            {
194              text: `
195                <div style="display: flex; align-items: center; gap: 4px;">
196                  <img src="/img/nav/脚本.svg" alt="" style="width: 16px; height: 16px;">
197                  <span>脚本</span>
198                </div>
199                `,
200              link: '/jiaoben',
201            },
202            {
203              text: `
204                <div style="display: flex; align-items: center; gap: 4px;">
205                  <img src="/img/nav/工具.svg" alt="" style="width: 16px; height: 16px;">
206                  <span>工具</span>
207                </div>
208                `,
209              link: '/tools',
210            },
211          ],
212        },
213        {
214          text: '开源项目',
215          items: [
216            {
217              text: `
218                <div style="display: flex; align-items: center; gap: 4px;">
219                  <img src="/img/nav/teek.svg" alt="" style="width: 16px; height: 16px;">
220                  <span>Teek-one</span>
221                </div>
222                `,
223              link: '/teek',
224            },
225            {
226              text: `
227                <div style="display: flex; align-items: center; gap: 4px;">
228                  <img src="/img/nav/Typora.svg" alt="" style="width: 16px; height: 16px;">
229                  <span>Typora-one</span>
230                </div>
231                `,
232              link: '/typora-theme-one',
233            },
234            
235          ],
236        },
237      ],
238    },  
239
240    // 生活
241    {
242      text: '🏓生活',
243      items: [
244        {
245          // 分组标题1
246          text: '娱乐',
247          items: [
248            {
249              text: `
250                <div style="display: flex; align-items: center; gap: 4px;">
251                  <img src="/img/nav/相册.svg" alt="" style="width: 16px; height: 16px;">
252                  <span>相册</span>
253                </div>
254                `,
255              link: 'https://photo.onedayxyy.cn/',
256            },
257            {
258              text: `
259                <div style="display: flex; align-items: center; gap: 4px;">
260                  <img src="/img/nav/电影.svg" alt="" style="width: 16px; height: 16px;">
261                  <span>电影</span>
262                </div>
263                `,
264              link: '/movie',
265            },
266            {
267              text: `
268                <div style="display: flex; align-items: center; gap: 4px;">
269                  <img src="/img/nav/音乐.svg" alt="" style="width: 16px; height: 16px;">
270                  <span>音乐</span>
271                </div>
272                `,
273              link: '/music',
274            },
275          ],
276        },
277        {
278          // 分组标题2
279          text: '小屋',
280          items: [
281            {
282              text: `
283                <div style="display: flex; align-items: center; gap: 4px;">
284                  <img src="/img/nav/精神小屋.svg" alt="" style="width: 16px; height: 16px;">
285                  <span>精神小屋</span>
286                </div>
287                `,
288              link: '/love',
289            },
290            {
291              text: `
292                <div style="display: flex; align-items: center; gap: 4px;">
293                  <img src="/img/nav/时间管理.svg" alt="" style="width: 16px; height: 16px;">
294                  <span>时间管理</span>
295                </div>
296                `,
297              link: '/time-plan',
298            },
299            {
300              text: `
301                <div style="display: flex; align-items: center; gap: 4px;">
302                  <img src="/img/nav/文案.svg" alt="" style="width: 16px; height: 16px;">
303                  <span>文案</span>
304                </div>
305                `,
306              link: '/wenan',
307            },
308            { text: "💖情侣空间", link: "https://fxj.onedayxyy.cn/" },
309          ],
310        },
311      ],
312    },  
313
314    // 索引
315    {
316      text: '👏索引',
317      items: [
318        { text: '📃分类页', link: '/categories' },
319        { text: '🔖标签页', link: '/tags' },
320        {
321          text: `
322            <div style="display: flex; align-items: center; gap: 4px;">
323              <img src="/img/nav/归档.svg" alt="" style="width: 16px; height: 16px;">
324              <span>归档页</span>
325            </div>
326            `,
327          link: '/archives',
328        },
329        {
330          text: `
331            <div style="display: flex; align-items: center; gap: 4px;">
332              <img src="/img/nav/清单.svg" alt="" style="width: 16px; height: 16px;">
333              <span>清单页</span>
334            </div>
335            `,
336          link: '/articleOverview',
337        },
338        {
339          text: `
340            <div style="display: flex; align-items: center; gap: 4px;">
341              <img src="/img/nav/登录.svg" alt="" style="width: 16px; height: 16px;">
342              <span>登录页</span>
343            </div>
344            `,
345          link: '/login',
346        },
347        {
348          text: `
349            <div style="display: flex; align-items: center; gap: 4px;">
350              <img src="/img/nav/风险提示.svg" alt="" style="width: 16px; height: 16px;">
351              <span>风险链接提示页</span>
352            </div>
353            `,
354          link: '/risk-link?target=https://onedayxyy.cn/',
355        },
356      ],
357    },  
358
359    // 关于
360    {
361      text: '🍷关于',
362      items: [
363        { text: '👋关于我', link: '/about-me' },
364        { text: '🎉关于本站', link: '/about-website' },
365        { text: '🌐网站导航', link: '/websites' },          
366        { text: "👂留言区", link: "/liuyanqu" },
367        { text: "💡思考", link: "/thinking" },
368        {
369          text: `
370            <div style="display: flex; align-items: center; gap: 4px;">
371              <img src="/img/nav/时间轴.svg" alt="" style="width: 16px; height: 16px;">
372              <span>时间轴</span>
373            </div>
374            `,
375          link: 'https://onedayxyy.cn/time-line/',
376        },
377        {
378          text: `
379            <div style="display: flex; align-items: center; gap: 4px;">
380              <img src="/img/nav/网站统计.svg" alt="" style="width: 16px; height: 16px;">
381              <span>网站统计</span>
382            </div>
383            `,
384          link: 'https://umami.onedayxyy.cn/share/DzS4g85V8JkxsNRk/onedayxyy.cn',
385        },
386        {
387          text: `
388            <div style="display: flex; align-items: center; gap: 4px;">
389              <img src="/img/nav/站点监控.svg" alt="" style="width: 16px; height: 16px;">
390              <span>站点监控</span>
391            </div>
392            `,
393          link: 'https://status.onedayxyy.cn/status/monitor',
394        },
395
396      ],
397    },       
398  ]

docs\.vitepress\ConfigOne\icon\NavIcon.ts文件

 1import { Blog } from "./Svgicon";
 2export const TeekIcon = {
 3  text: "Teek主题",
 4  link: "/Teek",
 5  subMenu: true, // 是否有子菜单
 6  iconProps: {
 7    icon: "https://vp.teek.top/teek-logo-mini.svg",
 8    iconType: "img",
 9    // size: 12, // 图标大小
10  },
11};
12
13export const VdoingIcon = {
14  text: "Vdoing主题",
15  link: "/Vdoing",
16  subMenu: true, // 是否有子菜单
17  iconProps: {
18    icon: "https://vuepress.vuejs.org/images/hero.avif",
19    iconType: "img",
20    size: 16, // 图标大小
21  },
22};
23
24export const SSLIcon = {
25  text: "SSL证书",
26  link: "/SSL",
27  subMenu: true, // 是否有子菜单
28  iconProps: {
29    icon: "https://allinssl.com/logo.svg",
30    iconType: "img",
31    size: 12, // 图标大小
32  },
33};
34
35export const BlogIcon = {
36  text: "博客搭建",
37  link: "/Blog",
38  subMenu: true, // 是否有子菜单
39  iconProps: {
40    icon: Blog,
41    iconType: "svg",
42  },
43};

docs\.vitepress\ConfigOne\icon\Svgicon.ts文件

1const Blog = `<svg t="1748063380189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="256" height="256"><path d="M0 0h1024v1024H0z" fill="#5da8ff" opacity=".01" p-id="4049"></path><path d="M795.562667 228.437333A126.037333 126.037333 0 0 1 921.6 354.474667v504.106666c0 34.816-28.202667 63.018667-63.018667 63.018667h-141.568V354.474667c0-69.632 8.96-126.037333 78.549334-126.037334z" fill="#7aaeeb" p-id="4050" data-spm-anchor-id="a313x.search_index.0.i15.1dbc3a81biy5SY" class=""></path><path d="M669.525333 102.4a126.037333 126.037333 0 0 1 126.037334 126.037333v630.186667c0 34.773333 28.202667 62.976 63.018666 62.976H228.394667A126.037333 126.037333 0 0 1 102.4 795.562667V228.437333A126.037333 126.037333 0 0 1 228.437333 102.4z m-220.544 519.893333h-189.013333a47.274667 47.274667 0 1 0 0 94.506667h189.013333a47.274667 47.274667 0 1 0 0-94.506667z m189.013334-189.056h-378.026667a47.274667 47.274667 0 1 0 0 94.506667h378.026667a47.274667 47.274667 0 0 0 0-94.506667zM322.986667 244.224H259.925333a47.274667 47.274667 0 0 0 0 94.464H322.986667a47.274667 47.274667 0 1 0 0-94.506667z" fill="#5da8ff" p-id="4051" data-spm-anchor-id="a313x.search_index.0.i7.1dbc3a81biy5SY" class=""></path></svg>`;
2
3export { Blog };
最新文章

文档导航