爱意满满的作品展示区。
irainy

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

  •  2
     
  •   irainy · Mar 20, 2016 · 2532 views
    This topic created in 3731 days ago, the information mentioned may be changed or developed.

    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/

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2947 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 06:57 · PVG 14:57 · LAX 23:57 · JFK 02:57
    ♥ Do have faith in what you're doing.