使用OrLike为博文添加点赞系统

2021-05-27 约 1056 字预计阅读 3 分钟

摘要

本文介绍了如何使用OrLike插件为博客添加点赞系统，详细说明了插件的功能特点、部署方法以及在页面中嵌入点赞功能的步骤。OrLike基于LeanCloud和Vercel，支持用户隐私保护、点赞/踩功能、加载动画和自定义图标等。文章提供了完整的代码示例和配置参数说明，并建议使用私有服务器地址以确保数据安全。此外，还介绍了如何在Hugo博客中集成OrLike插件。

OrLike

使用LeanCloud, 部署在vercel的博客点赞插件, 保障安全.

当前功能:

分离APPID/APPKEY, 保护账号安全
使用随机用户ID, 不保存用户其他信息, 保障用户隐私
支持设置用户过期时间
支持取消点赞/踩
将orlike发布为pipy包, 方便自动升级
加载动画
自定义图标和CDN

Branch

server: server端代码
client: client端代码
master: demo

Deployment

在这里可以将OrLike部署到你的Vercel账户上.

我们更推荐使用这个零配置的例子.

Usage

在你期望嵌入OrLike的页面加入以下链接:

1
<script src="https://cdn.jsdelivr.net/gh/caibingcheng/orlike@client/orlike.min.js"></script>

当然, 也可以使用自己的CDN. 本项目也依赖JQuery, 所以别忘记引用JQuery:

1
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接下来, 在你期望嵌入OrLike的位置加上一个div标签, 并且加上class或者id:

1
<div class="orlike-box"></div>

然后在合适的地方初始化OrLike:

1
2
3
4
5
6
7
8
9
<script>
    new OrLike({
        serverUrl: "https://orlike.vercel.app/",
        el: ".orlike-box",
        days: 30,
        icon: {like: "fa fa-heart", dislike: false},
        style: "https://cdn.jsdelivr.net/gh/caibingcheng/orlike@client/orlike.min.css",
    });
</script>

尽管可以使用公共的serverUrl, 但是更推荐使用私有的serverUrl, 这样更容易保证数据安全.

目前初始化需要的参数:

serverUrl: 必填, Vercel服务地址
el: 必填, 放orlike的div名字(class或id)
days: 可选, 用户id保存的时间, 默认是30天
icon: 可选, 自定义点赞和踩的图标, 不填写这是默认, 如果是false, 则不显示对应的按扭
style: 可选, 可自定义样式, 如果不填写, 则使用默认CDN
ifont: 可选, 可自定义font-awesome CDN, 如果不填写, 则使用默认CDN

到此为止, 本地工作已经做完了, 现在需要创建LeanCloud账户, 可以参考Valine的配置方法.

创建账户并且新建应用之后，需要给应用添加一个名为OrLike的class, 并且设置读写权限为所有用户, 然后再拿到LeanCloud的APP ID 和 APP Key填入到Vercel的环境变量.

APPID 对应 APP ID
APPKEY 对应 APP Key

然后部署OrLike就可以正常工作了.

Todo & Contributes

项目初期, 还有很多想象空间, 加油↖(^ω^)↗

提供点赞/踩排名

为hugo添加orlike

添加文件layouts/partials/single/orlike.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script src="https://cdn.jsdelivr.net/gh/caibingcheng/orlike@client/orlike.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="orlike-box"></div>
<script>
    new OrLike({
        serverUrl: "https://orlike-vercel.vercel.app/",
        el: ".orlike-box",
        days: 30,
    });
</script>

要记得引用jquery, 如果已经引用过了并且jquery可以工作, 那么这里就不需要重复引用了.

在layouts/posts/single.html合适的位置引用以上文件, 例如在content末尾:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{{- /* Content */ -}}
<div class="content" id="content">
    {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}

    {{- /* OrLike */ -}}
    {{- partial "single/orlike.html" . -}}

    {{- /* Reward */ -}}
    {{- partial "single/reward.html" . -}}

    {{- /* Notice */ -}}
    {{- partial "single/notice.html" . -}}
</div>

现在可以刷新页面试试是否有效.