VitePress 文档系统

开发说明

• assets：存放所有静态资源，使用方式![](/images/xxx.jpg)
• config：存放配置文件
  • navbar.js：顶部栏配置
  • index.js和sidebar：侧边栏配置
• docs：存放所有Markdown文档
  • docs/.vitepress/config.mjs：架构配置文件
  • docs/.vitepress/theme/index.js：全局样式配置文件
• 路径要求：起始位置必须带上斜杠/，否则导致上下页链接异常并失效

项目运行

• 安装：

pnpm install

• 开发环境编译并实现热重载

pnpm dev

• 生产环境编译并压缩

pnpm build

• 本地启动静态服务器

pnpm preview

图片查看器快捷键

图片查看时才生效

插件默认

1. Esc：退出全屏或关闭查看器或退出模式模式或停止播放
2. Space：停止播放
3. Tab：切换查看器中按钮的焦点状态
4. Enter：在按钮上触发点击事件处理程序
5. ←：查看上一张图片
6. →：查看下一张图片
7. ↑：放大图像
8. ↓：缩小图像
9. Ctrl + 0：缩小到初始大小
10. Ctrl + 1：放大到自然大

自定义

1. L：往左旋转90度
2. R：往右旋转90度
3. P：全屏播放幻灯片
4. H：水平翻转
5. V：垂直翻转
6. D：下载当前图片

解决旧版问题

1. 新增配置过于复杂，每次都要维护两套，Markdown和JavaScript两套，在新版开发中找到了灵感
2. 文章侧边栏大纲更好，支持所有层级的标题；旧版还在用目录表[[toc]]进行弥补
3. 本地搜索功能更简介；旧版需要单独的插件支持
4. 官方文档更友好，旧版官方文档和AI提供的思路都是过时的，扩展自定义的成本极高
5. 集成优秀图片查看器功能viewerjs，让查看图片成为享受
6. 全局样式自定义更美好，旧版由于很多功能的实现都是权衡利弊之后的结果，导致留空并没有去处理
7. 图片查看器快捷键：插件默认10种，自定义扩展6种

新增功能

1. 图片查看器功能
2. 图片懒加载功能
3. 大屏提高空间利用率，清除两边空白区域
4. 图片组件插入快捷键说明文档
5. 全局内容复制功能：
   • 选中内容复制：优先级最高
   • a标签不复制：自身、父级
   • code pre点击复制
6. Alt+S：添加回到顶部快捷键

和 VuePress 对比

• VitePress 则基于 Vue 3 和 Vite 开发，开发体验更优，配置更简单
• VuePress 则基于 Vue 2 和 Webpack 开发，配置相对复杂，最重要VuePress 2当前并不稳定