目录
1 概述
Quarto 提供多种网站导航 :
顶部导航栏支持子菜单侧边导航栏带层级结构组合导航栏顶部与侧边相结合- 还可以增加
全文检索功能
下面是典型的 Quarto 网站 结构和导航栏布局 :
2 侧边导航栏
如果网站包含较多文档,可能会更倾向于使用侧边导航。它可以展示任意深度的文章层级结构 :
侧边栏的顶层有很多可能性 :
目前有两种侧边导航样式可用 :
2.1 title 标题
侧边标题栏标题 :
2.2 logo 标题
可以给侧边导航增加 logo :
还可以给 logo 增加超链接 :
2.3 search 搜索框
可以增加一个搜索栏,检索文章里面的信息 :
2.4 tools 工具
下面范例是自定义工具,可以使用 Bootstrap图标 :
2.5 contents 内容
导航列表内容 :
2.6 style 风格
下面设置侧边导航的显示风格:
2.7 border 边框
下面是利用 border 来设置侧边导航栏的边框 :
2.8 collapse-level 展开层级
折叠侧边导航,默认情况下是 2 层:
2.9 pinned 置顶
屏幕变窄了会自动置顶侧边导航,pinned 帮助一直固定在最上面 :
2.10 指定页面的侧边导航
下面代码在主页设置了工具栏,其他页面则没有工具栏 :
2.11 配色
还可以给导航栏定制外观配色,更多配色请参考 侧边导航栏配色 :
2.12 宽度
还可以调整导航栏的宽度,更多宽度可以参考 :
2.13 自动生成侧边栏
可以基于文件系统自动生成侧边栏导航 :
2.13.1 分组
可以利用子目录来分组,子目录被自动解析成树上的节点 :
如果要修改一个分组的名字,可以使用下面方法:
2.13.2 排序
可以在 .qmd文件 中通过 order 选项来进行排序 :
2.13.3 部分包含
如果只希望包含根目录下面的文件,可以像下面这样 :
还可以自动+手动:
3 章节目录
右侧是章节的目录,标题可以自定义:
4 混合导航
如果网站包含数大量页面,可能需要将 顶部导航 和 侧边导航 结合在一起使用:
还可以在顶部导航栏使用 id 引用侧边栏菜单 :
5 面包屑导航
Breadcrumbs 面包屑 是国外通话故事中,走山路的时候洒面包屑标记返回的路径 :
还可以禁用面包屑导航 :
还可以在某个页面中单独禁用 :
6 翻页导航
如果某个章节很多页面,可以提供 下一页、上一页 的功能:
还可以在某个页面禁用 翻页导航:
如果要控制某个目录下所有页面的行为,可以通过修改 _metadata.yml:
6.1 分隔符
可以使用分隔符来将翻页导航器中断:
7 返回顶部
可以到达页面最底部的时候, 自动产生一个 “回到顶部” 的链接, 每个页面可以单独禁用 :
8 页脚
可以为网站所有页面提供页脚:
还可以更复杂的在左、中、右分别控制页脚内容 :
默认情况下,页脚会带一个顶部边框。可以禁用它 :
还可以设置页脚的背景色,通常前景色 foreground 不用自己设定,系统会自动计算:
页脚下面很大留白,因为底部还有消息提示栏 :
9 隐藏导航栏
对于完全自定义布局的页面,可以完全隐藏 顶部导航栏、侧边导航栏:
10 阅读模式
阅读模式会隐藏侧边导航栏和目录,提高阅读体验: