GhostOsintDesk

外观

VuePress Plume 主题导航栏布局说明

约 743 字大约 2 分钟

1. 导航栏布局结构

VuePress Plume 主题的导航栏采用左右分栏布局：

1.1 左侧区域

  • 显示主要导航菜单
  • 包括首页、介绍说明、用户指南等
  • 配置通过 navbar 数组的前半部分定义

1.2 右侧区域

  • 显示辅助功能按钮和自定义图标
  • 固定包含：
    • 外观切换按钮（昼夜切换）
    • 自定义图标（通过 navbar 数组的后半部分定义）

2. 导航栏渲染顺序

导航栏的渲染顺序如下：

  1. 左侧：主要导航菜单（首页、介绍说明、用户指南）
  2. 右侧：外观切换按钮（昼夜切换）
  3. 最右侧：自定义图标（GitHub、飞机、Email）

3. 自定义图标的位置

3.1 配置说明

当您在 navbar 数组中添加自定义图标时，它们会被渲染在外观切换按钮的右侧，也就是导航栏的最右侧。

3.2 当前配置

我们当前的配置是：

navbar: [
  // 左侧导航菜单
  { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
  { 
    text: '介绍说明', 
    icon: 'material-symbols:info-outline',
    items: [...] 
  },
  { text: '用户指南', link: '/guide/user-guide.md', icon: 'material-symbols:help-outline' },
  
  // 右侧自定义图标（显示在外观切换按钮的右侧）
  { text: '', link: 'https://github.com/hackerschina', target: '_blank', icon: 'mdi:github', badge: 'GitHub' },
  { text: '', link: 'https://hello.ghostosint.com/', target: '_blank', icon: 'mdi:airplane', badge: 'Airplane' },
  { text: '', link: 'https://mail.ghostosint.com/', target: '_blank', icon: 'material-symbols:mail-outline', badge: 'Email' },
],

4. 为什么只能在后面加？

4.1 主题设计限制

这是 Plume 主题的设计限制，外观切换按钮的位置是固定的，位于导航栏右侧的最前面，自定义图标只能显示在它的右侧。

4.2 实际显示效果

虽然从配置顺序上看，自定义图标是在主要导航菜单的后面，但从视觉效果上看，它们是显示在外观切换按钮的右侧，也就是导航栏的最右侧。

5. 调整建议

5.1 接受默认布局

Plume 主题的默认布局已经经过优化，外观切换按钮位于右侧，自定义图标位于最右侧，这种布局符合大多数用户的使用习惯。

5.2 调整图标顺序

如果您想调整自定义图标的顺序，可以修改 navbar 数组中自定义图标项的顺序：

navbar: [
  // 左侧导航菜单
  // ...
  
  // 右侧自定义图标（可以调整顺序）
  { text: '', link: 'https://mail.ghostosint.com/', target: '_blank', icon: 'material-symbols:mail-outline', badge: 'Email' },
  { text: '', link: 'https://github.com/hackerschina', target: '_blank', icon: 'mdi:github', badge: 'GitHub' },
  { text: '', link: 'https://hello.ghostosint.com/', target: '_blank', icon: 'mdi:airplane', badge: 'Airplane' },
],

6. 总结

  • VuePress Plume 主题的导航栏采用左右分栏布局
  • 外观切换按钮固定位于右侧
  • 自定义图标显示在外观切换按钮的右侧
  • 自定义图标的顺序可以通过调整 navbar 数组中项的顺序来改变
  • 自定义图标已经显示在昼夜切换按钮的后面，符合您的要求