给奶油葡萄做个五周年年报 | 猎人杂货铺

给奶油葡萄做个五周年年报

拖延症晚期

南洋在快三周年的时候,正值用户热情高峰期。当时,我就在想,是不是得搞个「年报」出来活跃活跃气氛。可惜当时被找工作和准备毕业的事缠身,所以这件事情一拖再拖,拖到了第五个年头。

在去年年底的时候,我就开始规划,该怎么自然地把南洋停掉。反反复复讲了很多次,最后决定了让它随「市场走向」自生自灭 —— 如果需要它的人越来越少了,那也就自然停掉了。

现在唯一希望的是,能够从南洋里找到一些有能力的又合得来的人,将来能够组个团队一起做事情,这也不枉我经营南洋这么多年。

计划和实施

话不多说,回到正题。

在下半年刚开始的时候,我和 @ajycc20 聊到,想让他准备南洋五周年年报的事情。小伙子也挺给力,比较快速地找到了 fullpage.js 这个好东西,利用这个「半开源」库,可以很方便地实现年报效果。

插句嘴,除了 fullpage.js 之外,类似的 impress.js、reveal.js、nodeppt 也不错。

我把年报该体现的一些点列了出来,@ajycc20 一周左右给了个初稿。除了样式有点非主流,背景、内容、音乐、图表等该有的都有了。但离真正的上线水平还有一段距离,所以我这个前端渣也只好亲自动手了。

对我来说,难点更主要在于设计方面:一是年报主线和各页内容安排、二是每页的样式设计,真叫人头大。后端也需要一些写 SQL 的搬砖工作,统计出个人在站内的参与活动情况。

在 @ajycc20 的基础版本上魔改之后,再通过他来润色前端样式,就诞生了目前还看得过去的「奶油葡萄五周年年报」。最终的前端代码开源在 endpot/nypt-fifth-anniversary,希望能给有需要的人一点帮助。@ajycc20 之前写过一篇介绍文章 基于fullpage.js编写的一个年度总结?,也推荐看看。

最终效果

年报使用统一的淡蓝色背景图(在谷歌上无意中发现的),有点萌和小清新的感觉。背景音乐一开始用的「City」,后面 @ajycc20 推荐了一首更适合年报的「夏恋」,于是就用上了。

封面

因为背景较淡,年报中大多数字体用的加粗黑色。封面比较简单,仅有一句五周岁告警和带用户名字的「不得不说的故事」副标题。

1

五周年时间线

NexusPHP 有史册功能,所以这一页我用了一个步骤条组件,把南洋这五年来的大事件一一展示出来。

2

大家的留言

想到站上有一个帖子是专门给新人报道用的,如果把大家的精彩留言展示出来,一定特别棒。一开始是想用的弹幕插件,把留言像子弹一样弹出来。无奈这方面的插件比较少,实现效果也很简陋,达不到我的心理预期。

所以我干脆做成下图效果,把所有精彩留言的作者的头像展示出来,鼠标移到上方可以查看留言,同时高亮出「NYPT」的字样。

3

加入时间和小伙伴

这一页展示了用户的加入时间,以及当天一同加入的小伙伴。相信早些年注册的用户会发现,和自己一同加入的小伙伴估计只剩一两个了。

4

破壳萌图

这一页,我用了一个萌系的破壳图,展示了南洋破壳五周年之际,我在南洋大家庭度过了多少个日夜。

5

常用登录地址

和其它年报一样,此处有一页常登录的地址,如果这不是你的「常住地址」,那可能要考虑修改密码了哟!

6

吸血小报

NexusPHP 用的「leech」表示下载,而 leech 又有吸血的意思。所以这里,我用了吸血小报来概括用户的下载情况。

当然,用户的下载记录还可以做很多更深层次的分析,进而做一个简要的推荐系统。但是个人的时间和精力有限,就不折腾那么多了。

7

上传战绩

有「吸血小报」,当然也少不了「上传战绩」。请原谅我的偷工减料,此处的数据挖掘依然只是点到为此。PS:如果落后同等级用户的平均水平太多,说明真的需要加油啦!

8

站内互动

除了资源上传下载,站上还有很多有趣的版块,比如群聊区、趣味盒、论坛、竞猜等等。细究起来,可分析的指标实在是太多太多了。这里再次偷懒:把一些容易计算的指标,用轮播的形式展示出来。

9

最后一页

最后一页特别鸣谢了参与制作和测试的人员,同时放了南洋的一些友链。当然,最重要的是简约版的「奶油葡萄成就卡」。

这里用了一个 html-to-image 插件,把前端元素转换成图片,再借助 downloadjs 提供一键下载成就卡的功能,方便用户分享至 QQ/朋友圈等。

10

小结

好了,前端渣的本次装逼到此结束。

『猎人杂货铺 • 微信公众号』