Skip to content

快速制作一个有创意的捐赠页面 #27

@rainyear

Description

@rainyear

Slack 和 GitHub 都添加了一个 Reaction 功能,可以对别人的发言或 Issue 通过 emoji 进行互动。这是一个非常有趣的小功能,于是我也想把它用在我的页面上!

先来看看效果(代码):
emoji

  1. 页面托管当然用 GitHub Pages;
  2. 首先我需要 Emoji,解决方案有很多 EmojiOne、Twemoji 啦,我选择了 Twemoji ,并用国内的 CDN
  3. 然后我需要服务器记录,当然这个小功能不需要自己搭建服务器,于是我选择 LeanCloud
  4. 因为没有用户登录限制,暂时只在本地对每天投票次数进行限定;
  5. 对我来说CSS布局才是最痛苦的,我选择妹子UI稍微减轻一点痛苦。

LeanCloud 的文档写得很不错,按照JavaScript 数据存储开发指南很快就可以实现数据存储的功能:

  1. 首先,在 LeanCloud 创建一个应用,然后在数据后台创建一个新的 Class;
  2. 把他们的 Js 库添加到页面,拿到 APP ID 和 APP Key 之后初始化;
  3. 页面加载之后初始化查询得到数量,用户点击之后更新数量。

最后,来试一下吧:rainy.im/donate/

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions