maxiee.github.io 资源收集功能设计

前言

年前的时候我会将每周收藏的资源梳理成一篇博客。但是当进行了四周之后，我觉得这种形式既繁琐又低效，有很大的改进空间。

过年到现在我都在重构 maxiee.github.io，用 react-static 替换了自己编写的框架，添加了“画作”板块。下一步我打算再做一个资源导航板块，来解决这个问题。

本文是我对这一功能的需求文档，文档中只包含需求描述，不包含代码实现。

需求收集

我都有哪些需求呢？

• 网络上的资源可以抽象成：uuid、标题、描述、图片、标签列表
• 每个资源有一个唯一 uuid
• 资源库是对资源元素的汇集
• 可以按照标签维度进行检索（不需要支持组合标签过滤）
• 有一个列表视图
• 有一个详情页
• 当列表视图过长时考虑分页
• 支持社交分享，自动生成分享文案“我在 maxiee.github.io 上发现一个资源 example/example，一个示例工程库，推荐给大家！（网址）

数据结构

model

只有一个 Model，就是资源元素（WebItem）：

name	type	comment
id	string	uuid
title	string	资源的标题
desc	string	资源描述、点评
img	string	图片
tags	string[]	标签列表
url	string	资源 URL

存储方式

使用 JSON 数组方式进行存储。

资源录入

当看到好的资源的时候，手工编辑 JSON 文件添加进去。

回头可以写 cli、gui 脚本进行添加。

静态数据生成

maxiee.github.io 是一个静态站点，与一般的基于数据库的站点不同。

基于数据库的站点，一般是动态请求数据，向后端发起请求，后端查询数据库，并将数据返回。

而对于静态站点来说，它是不发起数据请求的。而是在网页生成的时候，就考虑所有的请求可能性，将每种可能性所对应的页面都生成出来。（对于 react-static 其实生成的是数据 json 文件）

在我们的资源收集功能中，需要生成的数据有：

• 列表页
  • 全部列表
  • 单个 Tag 下列表（多 Tag 组合搜索就不支持了，因为会随 Tag 增多组合式增长，会多生成很多很多页面，降低生成速度，空间增长，不过实际访问速度是不受影响的）
• 详情页
  • 每个资源的详情页
  • 突然发现也没几个字段，列表中完全足够展示，没必要再搞个详情页了，点击列表 Item 直接跳资源 url 即可

总结

至此就完成了资源收集功能的设计，从中可以看出数据结构很简单，页面展示也很直观。

不过这些都是最基本功能，在它们之上还有更高级的功能需要开发：

• 分页（当资源变多后单页数据量太大，需要分页）
• cli、gui 添加资源脚本
• 自动生成一周收藏周报
• 统计功能