使用说明

点击图片查看视频演示

「一鱼两吃」是一道很「聪明」的菜品，利用一条鱼的不同部位做出两味，甚至多味菜。我由此获得启发，基于相同的一堆 Markdown 文件作为数据源，搭建一个静态网站，即是部落格也可以管理学习笔记，达到类似「一鱼两吃」的效果。

由于文章主要是文本，而且网站的交互需求不高，所以选择使用静态网页。现在有很多基于 Markdown 文档生成静态网页的工具，基于我目前掌握的技能和需求选择以 VuePress 作为静态网站生成器。

VuePress 已经内置了默认主题只需要进行简单的参数配置就可以做到开箱即用。我的主要工作是基于默认模板进行拓展，优化在检索、浏览文章和笔记时有更好的体验：

• 虽然部落格文章和学习笔记都是以 Markdown 文档为单位，但部落格是面向读者的，一般文章具较完整的前后文内容；而学习笔记则是面向自己，内容较为零碎。所以不能靠一套 UI 来实现两种需求，因此我以主页为统一入口，做了两套文章分类导航页面。Markdown 文档可以通过标记的方式分成两种类型，一种是作为部落格文章和学习笔记，另一种是只作为学习笔记。
• 添加了部落格文章导航页，有三种方式浏览文章：Grid 网格布局、Masonry 瀑布流式布局、List 列表布局。
• 添加了学习笔记导航页，所有的 Markdown 文件都会作为学习笔记展示，可以通过网格嵌套布局来浏览，这些笔记的层级关系和它们在文件存储系统一致，而且通过 D3.js 对这些笔记文件数据进行可视化构建出树图，方便快速浏览。
• 支持给 Markdown 文档加标签，在导航页中可以基于标签对文章进行筛选。
• 遵循 RWD 响应式网页设计原则，可以在不同尺寸的屏幕浏览网页。

你可以参考以下步骤来搭建一个网站：

1. 搭建本地工作环境
2. 项目结构
3. 参数设置
4. 写作创作
5. 开发与预览（可选）
6. 版本控管
7. 与远程仓库同步
8. 部署网页

⚠️ 这也是作为我学习 Vue3 的一个练手小项目，所以使用的 VuePress 是 V2 版本（也称作 VuePress-next），该版本仍处于不稳定的 Beta 状态（后期可能会出现不兼容的版本更新），因此如果你需要将它应用到日常正式的开发中需要谨慎考量。根据 VuePress-next 的开发计划 Stable 版本可能会在 2021 年 Q2 末推出。由于是练手项目，项目可能有不少 Bugs 导致编译不成功，但静态网站是基于 Markdown 文件构建的，所以只要保存好 .md 后缀的文档和相关图片等静态资源，数据是不会丢失的，也可以将文档迁移到别处，使用其他支持 Markdown 文件的笔记软件管理知识体系或静态网站生成器构建博客。