@5ime/likeme v1.0.1
likeMe
🍰快速为你的网站添加 你喜欢我吗/Do you like me 小组件
LeanCloud 设置
- 登录 或 注册
LeanCloud 国际版
并进入 控制台 - 点击左上角 创建应用 并起一个你喜欢的名字 (请选择免费的开发版):
- 进入应用,选择左下角的
设置
>应用凭证
。你可以看到你的APP ID
,APP Key
和REST API 服务器地址
。请记录它们,以便后续使用。 - 进入应用,选择左上角的
数据存储
>结构化数据
>创建 Class
。Class 名称
填写为likeCount
,Class 访问权限
除update
和find
外均选择指定用户
,默认 ACL 权限
选定为限制读取
,点击创建
。 - 选择新建的
Class
然后添加行
->设置 ACL 权限
均设置为所有用户
,点击添加
,你可以看到新建行的objectId,
。请记录它,以便后续使用。
此时你应该拥有了以下信息:APP ID
,APP Key
,REST API 服务器地址
和 objectId
:tada:
Vercel部署
点击上方按钮,跳转至
Vercel
进行部署。输入一个你喜欢的
Vercel
项目名称并点击Create
继续:此时
Vercel
会基于likeMe
模板帮助你新建并初始化仓库,仓库名为你之前输入的项目名。一两分钟后,满屏的烟花会庆祝你部署成功。此时点击
Go to Dashboard
可以跳转到应用的控制台。点击顶部的
Settings
-Environment Variables
进入环境变量配置页,并配置四个环境变量appId
,appKey
,serverURL
和objectId
。它们的值分别对应上一步在LeanCloud
中获得的APP ID
,APP KEY
,REST API 服务器地址
和objectId
。环境变量配置完成之后点击顶部的
Deployments
点击顶部最新的一次部署右侧的Redeploy
按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。此时会跳转到
Overview
界面开始部署,等待片刻后STATUS
会变成Ready
。此时请点击Visit
,即可跳转到部署好的网站地址,此地址即为你的服务端地址。
绑定域名 (可选)
点击顶部的
Settings
-Domains
进入域名配置页输入需要绑定的域名并点击
Add
在域名服务器商处添加新的
CNAME
解析记录Type Name Value CNAME example cname.vercel-dns.com 等待生效,你可以通过自己的域名来访问了:tada:
HTML 引入
在你的网页中进行如下设置:
使用
CDN
引入likeMe
:https://unpkg.com/ likeme@latest/static/css/likeme.css
。https://unpkg.com/ likeme@latest/static/js/likeme.js
。
创建
<script>
标签使用new limeMe()
初始化,并传入必要的el
与serverURL
选项。el
选项是likeMe
渲染使用的元素,你可以设置一个字符串形式的CSS 选择器
或者一个HTMLElement
对象。serverURL
是服务端的地址,即上一步获取到的值。
<head> <!-- ... --> <link rel="stylesheet" href='https://unpkg.com/likeme@latest/static/css/likeme.css'/> <script src="https://unpkg.com/likeme@latest/static/js/likeme.js"></script> <!-- ... --> </head> <body> <!-- ... --> <div id="likeme"></div> <script> new limeMe({ el: '#likeme', serverURL: 'https://your-domain.vercel.app', }); </script> </body>
此时
likeMe
就会在你的网站上成功运行 :tada: