为小团队内部分享技术文档而生的一个 markdown 博客

[hanxi]

起因

在网上找了一天的 markdown 博客，dropplets 算是找到的一个不错的，支持上传markdown，但不支持在线编辑。折腾之后，决定自己动手写一个。

构思

决定主要操作都放在前端，服务端只做存储。于是就抽出了一个 http-file-server ，专门用来存储 markdown 文件和图片。前端做一个类似于 issues-blog 的来浏览文档，然后在加一个编辑器，以前写过一个简单的本地 markdown 编辑器。

• 不打算做账号系统，小团队的话账号不重要，署名的话完全可以写到文档中去。
• 一定要加的功能就是退拽上传图片，像 github 的编辑器一样。
• 主页列出所有的文档列表，点击链接进入到文档详情，点击修改进入到编辑页面。
• 还要来个新建文档的按钮放到主页。
• 缓存编辑中的文件也很重要。

具体实现

前端浏览

• 参考 issues-blog 使用 ajax 实现单页面浏览 markdown 文档
• 采用 marked 实现本地解析 markdown 文档
• 服务器只需要架设一个静态 HTTP Server 即可实现
• 读取文件服务器 /md 路径下的所有文件列表，列表信息中包含文件的最后修改时间
• 文件名是有规则的命名的：time.titlename.md，time 格式为：2015.8.14.23.48.33.100
• 由 time 唯一确定文档，time 相同的选取最新修改的文档
• 根据上面的文件命名规则，可以只需要简单的文件服务器实现文档的改标题功能
• 文件服务器需要设置跨域访问选项 access-control-allow-origin

文档编辑

• 使用 codemirror 作为 markdown 的编辑器
• 采用 marked 实现实时预览
• 代码高亮是由 marked 和 highlight.js 实现
• markdown 语法都选用 GFM 语法
• 使用 localStorage 缓存正在编辑的未发布的文档
• 同样是根据文件名的 time 前缀来确定载入哪个缓存，包括缓存的文档标题
• 发布文档调用 ajax POST 保存文档到文件服务器

删除文档

• 不支持直接删除文档
• 可以通过修改文档的标题和内容达到删除文档的目的
• 多次修改一个文件的标题会导致文件服务器冗余很多旧文件
• 可以在文件服务器上写一个脚本定时清除无效旧文件或者定时备份

上传图片

• 实现效果：拖拽上传图片并将地址插入到编辑器中
• 给 editor 添加 ondrop 事件
• 获取 e.dataTransfer.files，遍历每个文件，实现拖拽多张图片
• 使用 FileReader.readAsArrayBuffer 读取文件的二进制格式
• 使用 postBinary 异步上传图片，图片上传成功则在编辑器中插入图片地址

[wujun4code]

https://ghost.org/