MikeTech开发笔记-写作模块

June 26, 2019
Front endSpring BootBackend Dev

作为一个博客网站,最主要的一个模块当然是写作模块,如果写作模块体验不好的话,那么每次写文章简直是痛苦不堪,这篇文章没有太多技术上的内容,主要是记录一下我对写作模块的设计思路。也是给需要自己开发博客网站的朋友们一点经验。

MikeTech 从2015年上线之后,我养成了写博客的习惯,以前WordPress平台所拥有的特性我几乎都保留了下来:

  • 主题图片
  • 摘要
  • 内容
  • 类别和Tag
  • 短链接
    其中,主题图片,摘要和Tag是会显示在文章列表上的,方便用户在短时间内知道文章的大致内容。

发布系统

本来发布系统我是没有想特别用心去设计的,所以第一版本的发布系统就是下图的样子,虽说颜值也还过得去,反正是给自己看的,能用就行。但是后来发现这样的设计实在是太古板了,这样复杂的排布在小屏幕上简直是噩梦,根本不能用。而且真的在这样的界面上面写文章也是很难受。

于是乎下定决心准备重新设计一下发布系统的界面,因为以前也在其他平台上写过文章,比如知乎和专栏和少数派等等,所以我参考了一下他们的界面设计。

下图就是重新设计过的文章发布界面,比原本的设计更加简洁了,主色调为白色。

同时编辑器也能够支持全屏支持。

发布文章时候需要的其他一些设置被放在了编辑器之后,写完文章后方便一并设置。
其中标签系统参考了 Instagram,每次为文章添加标签的时候只要用 # 打出来新的标签就好了。

图片上传

图片上传功能是和旧版 MikeTech 拉开了差距,曾经使用 WordPress 写作的时候每次上传图片都异常痛苦,因为服务器特别的慢,经常上传失败。后来知道了对象储存,于是开始把所有图片存到阿里的OSS服务上,但是每次都要借助一个python脚本来上传,让每次写作的体验很不连贯,需要各种界面来回切换。
这次自己开发的平台终于能把图片上传做的更加自动化了,上传图片功能会先使用TinyPNG的服务来压缩上传后的图片然后再上传到阿里云OSS上面。每次1M大小的图片最后会被压缩到几百KB,而且画质几乎不损失,提高了MikeTech文章加载的速度。

文章自动保存与回滚

一开始我觉得每次写文章的时候手动保存就行了,后来发现,这样子根本没有安全感,因为有时候在火车上写文章的时候,如果不能及时保存在服务器上的话,断网之后会很害怕文章丢掉,所以设计了一个自动保存的功能,在编辑文章的时候每过一分钟,编辑器就会把文章保存一次,特别省心,这样写作的时候根本不用担心文章保存的问题了。

文章导入与导出

这个功能可以说是整个发布系统中我觉得最有仪式感的功能了。虽然上面讲了那么多MikeTech在线文章编辑器的人性化的功能,但是我还是不喜欢使用在线编辑器来编写文章(摊手),我还是更喜欢使用Mac上的一些编辑器来编写文章,方便归档和记录。而且很多Mac上的笔记应用都设计的非常美观,从用户体验上网页版的编辑器简直不能比。

为了方便本地把文章导出之后的上传,我设计了上传Markdown的功能,知乎的写作也有类似的功能,不过非常不好用。在笔记应用上导出文章后,文章中插入图片也会导出来,这时候我只需要把这所有的文件打包成压缩文件,然后点击上传Markdown,MikeTech的服务器会提取所有的图片并且上传到OSS然后更改Markdown文章的本地图片链接为OSS的链接,非常方便和省心。

以上就我个人开发的文章发布系统的一些功能上的想法和使用体验。

Comments

July 21, 2018 at 10:52 am

There are no comments

keyboard_arrow_up