视图系统
视图系统
Vergil 提供多种页面视图模式,让读者可以选择不同的阅读体验。
默认视图
网站的常规浏览模式,包含:
- 左侧边栏导航
- 顶部导航菜单
- 右侧辅助信息栏
- 完整的文章排版
适合日常浏览和导航。
极简模式
专为长文章设计的无干扰阅读模式。
特点
- 隐藏左侧边栏和右侧信息栏
- 更大的内容区域
- 专注文章本身,减少干扰
- 保留返回按钮,方便回到常规视图
如何进入
在阅读文章时,点击文章上方工具栏的「沉浸」按钮,即可切换到极简模式。顶部导航菜单里也有「极简模式」入口。
文章地址会自动从 /blog/文章名 变为 /views/minimal/blog/文章名。
退出方式
点击页面底部的”返回”按钮,即可回到常规视图。
启用与关闭
极简模式的开关在 src/data/config/nav.ts 中配置:
TypeScript
export const views = { default: { name: '主页', path: '/' }, resume: { name: '简历', path: '/views/resume/' }, minimal: { name: '极简模式', path: '/views/minimal/', enabled: true }};将 enabled 设为 false 即可关闭极简模式的入口:
TypeScript
minimal: { name: '极简模式', path: '/views/minimal/', enabled: false }关闭后,导航菜单和文章工具栏中将不再显示极简模式的入口。已发布的极简模式页面 URL 仍可访问。
简历视图
专门用于展示个人简历的视图模式。
特点
- 简洁专业的排版
- 左侧个人信息栏
- 右侧详细内容
- 针对打印优化
访问路径
/views/resume/
打印为 PDF
简历视图支持直接打印为 PDF:
- 打开简历页面
- 按
Ctrl+P(或Cmd+P) - 选择”另存为 PDF”
视图切换
读者可以在不同视图之间自由切换:
- 默认视图 → 极简模式:点击文章工具栏的「沉浸」按钮
- 极简模式 → 默认视图:点击页面底部的返回按钮
- 简历视图通过独立路径访问
为内容选择合适的视图
| 内容类型 | 推荐视图 |
|---|---|
| 博客文章阅读 | 默认视图 / 极简模式 |
| 教程文档 | 默认视图 |
| 简历展示 | 简历视图 |
| 专注深度阅读 | 极简模式 |