目录

1 概述

Quarto 提供多种网站导航 :

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

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

...

Quarto页面布局和导航栏位置

2 侧边导航栏

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

Quarto侧边栏入门范例

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

Quarto侧边栏深入剖析

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

Quarto两种侧边导航样式对比

2.1 title 标题

侧边标题栏标题 :

Quarto侧边栏title设置标题

2.2 logo 标题

可以给侧边导航增加 logo :

Quarto侧边栏logo设置图标

还可以给 logo 增加超链接 :

Quarto给侧边导航logo增加超链接

2.3 search 搜索框

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

Quarto给侧边导航增加搜索框

2.4 tools 工具

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

Quarto给侧边导航增加tools

2.5 contents 内容

导航列表内容 :

Quarto侧边栏contents

2.6 style 风格

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

Quarto侧边栏风格style

2.7 border 边框

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

Quarto设置侧边导航栏的border

2.8 collapse-level 展开层级

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

Quarto侧边栏展开层级

2.9 pinned 置顶

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

Quarto侧边导航置顶

2.10 指定页面的侧边导航

下面代码在主页设置了工具栏,其他页面则没有工具栏 :

Quarto给页面定制侧边导航

2.11 配色

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

Quarto给侧边栏增加配色

2.12 宽度

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

Quarto修改侧边导航器的宽度

2.13 自动生成侧边栏

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

Quarto侧边栏自动生成目录

2.13.1 分组

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

Quarto侧边栏保护目录自动构建

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

Quarto侧边栏保护目录自动构建并为分组设置标题

2.13.2 排序

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

Quarto侧边栏设置order进行目录自动排序

2.13.3 部分包含

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

Quarto侧边栏只自动生成部分文件

还可以自动+手动:

Quarto侧边栏手动配合自动生成

3 章节目录

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

Quarto自定义章节目录

4 混合导航

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

Quarto顶和侧边栏混合导航

还可以在顶部导航栏使用 id 引用侧边栏菜单 :

Quarto顶和侧边栏混合导航方法2

5 面包屑导航

Breadcrumbs 面包屑 是国外通话故事中,走山路的时候洒面包屑标记返回的路径 :

Quarto什么是面包屑导航栏

还可以禁用面包屑导航 :

Quarto禁用面包屑导航栏

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

Quarto单独禁用某个页面的面包屑导航栏

6 翻页导航

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

Quarto设置翻页导航

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

Quarto某个文档关闭翻页导航栏

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

Quarto在文件夹下控制翻页导航中的总体行为

6.1 分隔符

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

Quarto使用分隔符控制翻页导航

7 返回顶部

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

Quarto页面设置back-to-top

8 页脚

可以为网站所有页面提供页脚:

Quarto为网页提供页脚

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

Quarto设置更复杂的页脚包括左中右

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

Quarto禁用页脚的顶部边框

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

Quarto设置页脚的背景色

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

Quarto页脚下部消息提示占用一排空间

9 隐藏导航栏

对于完全自定义布局的页面,可以完全隐藏 顶部导航栏、侧边导航栏:

Quarto隐藏某个页面的导航栏

10 阅读模式

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

Quarto开启阅读模式提高阅读体验