网站导航

1 概述

Quarto 提供多种网站导航 :

  • 顶部导航栏 支持子菜单
  • 侧边导航栏 带层级结构
  • 组合导航栏 顶部与侧边相结合
  • 还可以增加 全文检索 功能

下面是典型的 Quarto 网站 结构和导航栏布局 :

2 顶部导航栏

若要为网站添加顶部导航,在配置文件 _quarto.yml 的 website 下方添加 navbar 条目 :

如果要关闭 搜索框,可以参考下面设置 :

还可以创建一个 菜单 把几个页面放在它的子菜单下 :

2.1 title 标题

顶部导航栏 title 是上面最左的内容, 它被自动链接到了与 _quarto.yml 文件同路径下的 index.qmd 文件 :

还可以隐藏顶部导航栏 title :

2.2 pinned 置顶

导航栏是否置顶 :

2.3 logo 图标

下面为网站添加 logo 图标 :

禁用 logo :

为 logo 增加一个链接,点击跳转到相应页面 :

还可以使用 _brand.yml 配置出企业级风格 详细参考

2.4 right 右对齐

可以让某些菜单右对齐 :

2.5 tools 工具

下面范例是自定义工具,图标用的 Bootstrap :

NoteBootstrap 图标

Bootstrap 是著名图标网站 Bootstrap图标
Quarto 的标准 HTML 输出默认内置 Bootstrap 5,所以通常不用额外引入 Bootstrap

2.6 collapse 汉堡菜单

当屏幕变窄时可以将导航栏菜单项折叠进汉堡菜单中,见下图页面的左上角 :

还可以为汉堡设置对应的屏幕断点位置 :

汉堡通常放在屏幕左侧,但是也可以放置在屏幕右侧 :

还可以控制是否将 tools 也压缩到汉堡中:

2.7 按钮 href 链接

下面给一个菜单按钮加上了链接跳转位置 :

2.8 按钮 text 标题

可以给按钮设置一个文字标题, 否则使用的是 .qmd 中 title 的内容 :

2.9 按钮 icon 图标

Quarto 内置了 Bootstrap 图标 库,可以随时引用 :

2.10 按钮 ref 链接关系

在网页设计中 rel 用于定义当前页面与链接网页之间的关系,对 SEO、网站安全、友情链接至关重要 :

2.11 按钮 target 目标

点击按钮链接以后是 新窗口弹出 还是 本窗口覆盖 :

如果需要了解更多目标,可以参考 target

2.12 按钮 menu 菜单

可以创建一个 菜单 把几个页面放在它的子菜单下 :

2.13 搜索框

可以在 顶部导航栏 上增加一个搜索按钮 :

2.14 配色

可以给导航栏定制外观配色 :

更多的外观设置,可以参考 定制外观

3 侧边导航栏

如果网站包含较多文档,可能会更倾向于使用侧边导航。它可以展示任意深度的文章层级结构 :

侧边栏的顶层有很多可能性 :

目前有两种侧边导航样式可用 :

3.1 title 标题

侧边导航栏 title :

3.2 logo 标题

可以给侧边导航增加 logo :

还可以给 logo 增加超链接 :

3.3 search 搜索框

可以增加一个搜索栏,检索文章里面的信息 :

3.4 tools 工具

下面范例是自定义工具,可以使用 Bootstrap图标 :

3.5 contents 内容

导航列表内容 :

3.6 style 风格

下面设置侧边导航的显示风格 :

3.7 border 边框

下面是利用 border 来设置侧边导航栏的边框 :

3.8 collapse-level 展开层级

折叠侧边导航,默认情况下是 2 层:

3.9 pinned 置顶

当屏幕变窄了 Quarto 会自动置顶侧边导航, pinned 帮助一直固定在最上面 :

3.10 指定页面的侧边导航

下面在 index.qmd 中, 指定自己需要的侧边栏, 利用了 id :

3.11 配色

还可以给导航栏定制外观配色,更多配色请参考 侧边导航栏配色 :

3.12 宽度

还可以调整导航栏的宽度,更多宽度可以参考 :

3.13 自动生成侧边栏

可以基于文件系统自动生成侧边栏导航 :

3.13.1 分组

可以利用子目录来分组,子目录被自动解析成树上的节点 :

如果要修改一个分组的名字,可以使用下面方法:

3.13.2 排序

可以在 .qmd文件 中通过 order 选项来进行排序 :

3.13.3 部分包含

如果只希望包含根目录下面的文件,可以像下面这样 :

还可以自动+手动:

4 章节目录

右侧是章节的目录,标题可以自定义 :

5 混合导航

如果网站包含数大量页面,可能需要将 顶部导航 和 侧边导航 结合在一起使用 :

还可以在顶部导航栏使用 id 引用侧边栏菜单, 直接在顶部下来出侧边栏 :

6 面包屑导航

在国外的童话故事里, 走山路边走边洒面包屑 breadcrumbs用来标记返程的路 :

还可以禁用面包屑导航 :

也可以在某个页面中单独禁用 :

7 翻页导航

如果某个章节很多页面,可以提供 下一页、上一页 的功能:

还可以在某个页面禁用 翻页导航:

如果要控制某个目录下所有页面的行为,可以通过修改 _metadata.yml:

7.1 分隔符

可以使用分隔符来将翻页导航器中断:

8 回到顶部

可以到达页面最底部的时候, 自动产生一个 “回到顶部” 的链接, 每个页面可以单独禁用 :

9 页脚

可以为网站所有页面提供页脚, 显示器最下方本来显示正文看起来就非常难受,设置成页脚是非常好的选择 :

还可以更复杂的在左、中、右分别控制页脚内容 :

默认情况下,页脚会带一个顶部边框。可以禁用它 :

可以设置页脚的背景色,设置好背景色以后前景色 foreground 不用设定,系统会自动计算 :

页脚下面很大留白,因为底部还有消息提示栏 :

10 隐藏导航栏

整个网站的配置文件 _quarto.yml 里设置了导航栏, 有些页面为了看起来清爽, 可以单独控制隐藏 顶部导航栏、侧边导航栏 :

11 阅读模式

阅读模式会隐藏侧边导航栏和目录,提高阅读体验:

12 Github 链接

适合未来有一定基础以后

13 重定向

适合未来有一定基础以后

14 404页面

适合未来有一定基础以后

15 链接