网站导航
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 :
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.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页面
适合未来有一定基础以后