🍰快速为你的网站添加 你喜欢我吗/Do you like me 小组件
- 登录 或 注册
LeanCloud 国际版并进入 控制台 - 点击左上角 创建应用 并起一个你喜欢的名字 (请选择免费的开发版):
- 进入应用，选择左下角的
设置>应用凭证。你可以看到你的APP ID,APP Key和REST API 服务器地址。请记录它们，以便后续使用。 - 进入应用，选择左上角的
数据存储>结构化数据>创建 Class。Class 名称填写为likeCount，Class 访问权限除update和find外均选择指定用户，默认 ACL 权限选定为限制读取，点击创建。 - 选择新建的
Class然后添加行->设置 ACL 权限均设置为所有用户，点击添加，你可以看到新建行的objectId,。请记录它，以便后续使用。 - 再次
创建 Class，Class 名称填写为likeUser，Class 访问权限除create和find外均选择指定用户，默认 ACL 权限选定为限制读取，点击创建。
此时你应该拥有了以下信息：APP ID,APP Key,REST API 服务器地址 和 objectId🎉
-
点击上方按钮，跳转至
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:
在你的网页中进行如下设置:
-
使用
CDN引入likeMe:https://unpkg.com/@5ime/likeme@latest/static/css/likeme.css。https://unpkg.com/@5ime/likeme@latest/static/js/likeme.js。
-
创建
<script>标签使用new limeMe()初始化，并传入必要的el与serverURL选项。el选项是likeMe渲染使用的元素，你可以设置一个字符串形式的CSS 选择器或者一个HTMLElement对象。serverURL是服务端的地址，即上一步获取到的值。color是卡片的背景颜色 (可选)。
<head> <!-- ... --> <link rel="stylesheet" href='https://unpkg.com/@5ime/likeme@latest/static/css/likeme.css'/> <script src="https://unpkg.com/@5ime/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就会在你的网站上成功运行 🎉