PrimeEdge 主题教程

导航菜单

配置顶部导航栏和页脚链接

导航菜单

PrimeEdge 支持自定义顶部导航栏，可以添加任意数量的菜单项。

基础配置

在 hugo.toml 中使用 [[params.nav]] 定义导航菜单：

[[params.nav]]
  name = "首页"
  url = "/"
  icon = "fa-solid fa-house"

[[params.nav]]
  name = "文章"
  url = "/posts/"
  icon = "fa-solid fa-pen-nib"

[[params.nav]]
  name = "关于"
  url = "/about/"
  icon = "fa-solid fa-user"

菜单项参数

每个菜单项支持以下参数：

参数 必填 说明
name 是 菜单显示文字
url 是 链接地址，支持相对路径和绝对路径
icon 否 Font Awesome 图标类名

图标使用

PrimeEdge 使用 Font Awesome 6 图标库。

常用图标

# 基础图标
fa-solid fa-house        # 首页
fa-solid fa-pen-nib      # 文章/博客
fa-solid fa-book         # 文档
fa-solid fa-user         # 关于
fa-solid fa-envelope     # 联系

# 内容类型
fa-solid fa-note-sticky  # 笔记
fa-solid fa-images       # 相册
fa-solid fa-bookmark     # 书签
fa-solid fa-link         # 友链
fa-solid fa-heart        # 好物
fa-solid fa-chart-line   # 投资

# 功能
fa-solid fa-search       # 搜索
fa-solid fa-comment-dots # 留言
fa-solid fa-rss          # RSS
fa-solid fa-tags         # 标签
fa-solid fa-folder       # 分类

图标查找

访问 Font Awesome 图标库 搜索更多图标。

完整导航示例

[[params.nav]]
  name = "首页"
  url = "/"
  icon = "fa-solid fa-house"

[[params.nav]]
  name = "文档"
  url = "/docs/"
  icon = "fa-solid fa-book"

[[params.nav]]
  name = "笔记"
  url = "/notes/"
  icon = "fa-solid fa-note-sticky"

[[params.nav]]
  name = "博客"
  url = "/posts/"
  icon = "fa-solid fa-pen-nib"

[[params.nav]]
  name = "好物"
  url = "/good-things/"
  icon = "fa-solid fa-heart"

[[params.nav]]
  name = "投资"
  url = "/investing/"
  icon = "fa-solid fa-chart-line"

[[params.nav]]
  name = "相册"
  url = "/photos/"
  icon = "fa-solid fa-images"

[[params.nav]]
  name = "书签"
  url = "/bookmarks/"
  icon = "fa-solid fa-bookmark"

[[params.nav]]
  name = "友链"
  url = "/links/"
  icon = "fa-solid fa-link"

[[params.nav]]
  name = "留言"
  url = "/comments/"
  icon = "fa-solid fa-comment-dots"

[[params.nav]]
  name = "关于"
  url = "/about/"
  icon = "fa-solid fa-user"

外部链接

导航菜单也支持链接到外部网站：

[[params.nav]]
  name = "GitHub"
  url = "https://github.com/username"
  icon = "fa-brands fa-github"

[[params.nav]]
  name = "Twitter"
  url = "https://twitter.com/username"
  icon = "fa-brands fa-twitter"

外部链接会自动在新标签页打开。

下拉菜单（暂不支持）

当前版本导航栏为单层结构，如需多级菜单，建议：

  1. 使用文档页面的侧边栏导航
  2. 创建专门的导航页面
  3. 自定义模板实现

移动端适配

导航栏在移动端会自动折叠为汉堡菜单：

  • 屏幕宽度小于 768px 时触发
  • 点击展开/收起动画流畅
  • 保持所有菜单项可访问

下一步

Comments

0%