2021幸福感好物清单MVP制作过程分享

sam.zhang2022年02月14日20:22

得到的《2021年带给大家幸福感的好物有哪些》 飞书文档看的时候，浏览器会卡顿，评论里也有分类的需求。趁着时间充裕，整理到了Notion，每个商品都打了标签，支持关键字搜索，电脑和手机浏览起来都不就顺畅。

1、最初想法

基于vue-element-admin+Java后台，开发一个简单的支持产品类别筛选的页面（这个页面要能集成到谷歌插件里），一直没开始。

2、中间的想法

有几天突然开始捣鼓Ghost博客，用了两天在腾讯云部署好后，开始看Ghost的官方文档。Ghost博客可以自定义页面，就把最初的想法否定了，决定基于这个博客的模板语言开发好物推荐的页面，避免原来前后端开发联调部署的工作。

在看官方文档的过程中，发现了Ghost博客可以集成Ecommerce的功能：

台，看到文章里可以插入的内容很多，其中就有Product选项。

选项如下图，可以维护商品名称、商品描述、星级评价、按钮文本、跳转链接，完全满足设想的基于博客模板语言开发的商品展示信息要求。索性就不自己开发，使用文章来代替吧。

基于以上考虑，录了近200个的商品、四篇文章后，发现一些问题以及基于问题有了新的想法。文章效果识别下面二维码即可访问。

3、发现的问题

1）飞书文档在浏览过程中，谷歌浏览器会提示内存不足，然后飞书文档崩溃，只能刷新重新加载。浏览一会儿必现该问题，而我的电脑内存是16G_c。

2）文档中商品信息无法检索，以博客文章展示也不能检索（根据商品类别检索，比如宠物）。

新的想法

1)需要商品打标签功能，便于用户检索。

遂放弃用文章展示商品的做法，考虑飞书表格是否可以满足要求。同时又想到要和Notion做个对比，因为使用过别人用Nation制作的一个列表页面，不仅支持检索还可以筛选。

对比过后，基于以下两点原因放弃飞书文档（两者功能差不多）

1）列表行高不能自适应，只能设置四个选项，造成推荐语无法展示完全，而Notion可以自适应高度。如下图所示

飞书行高固定

Notion行高自适应

2）飞书表格移动端页面展示不美观，就是一张Excel表格，体验被Notion碾压。如下图所示：

飞书移动端展示

Notion移动端展示

4、最后成果

通过Notion把近700多商品数据录入完毕，每个商品都维护了标签，支持关键词搜索，页面浏览不会因为内存不足而崩溃，体验还不错。识别下面二维码即可体验。

PS

由于飞书文档设置了不能复制，申请相关权限无人回复。一开始用浏览器F12查看源代码的方式复制，操作到200个商品，突然想到了截图后通过OCR识别的方式。白描网页版最多支持50张同时识别，然后合并到一个Word里，操作速度提升不少。

知识星球