使用Artitalk为Hexo博客加上随笔(说说)功能

想添加随笔功能原因是我觉得写一篇完整的文章对我来说压力太大了,很容易导致拖延症。同时,还是有很多情绪、想法需要找一个方式表达出来,想到了建立一个自己的微博。进而发现可以使用Artitalk实现。

系统介绍

使用的平台及其版本:

  • npm:8.1.2
  • node:16.3.2
  • Hexo:5.4.0
  • Theme:fluid
  • Hexo-cli:4.3.0

Artitalk简介

这是一个基于LeanCloud实现的可实时发布说说/微语的js。我不大懂技术,并且目前也没有找到类似的竞品,没法找到产品的优劣。这是Artitalk项目的主页,各位读者可以自行了解与分析。

下面是项目主页中列出的产品特性,我对这些特性没感觉,完全只是喜欢这个功能。

  • 增删查改全方面支持;
  • 支持针对每条说说的评论;
  • 支持 Markdown/html 语法;
  • 支持图片上传。

不仅如此,这个项目还有加分项:

  1. 项目Issue回应比较及时并且还有QQ互助群,出现问题可以向开发同学寻求支持。
  2. 在项目主页中有成功案例分享,遇到无法解决的问题,可联系一下与你相同框架主题的小伙伴提问。
  3. 项目主页结构完整功能,细节丰富。下次添加新功能一定要先研究主页,与社群联系,可以减少很多工作量

LeanCloud账户申请以及后台配置

项目主页的使用文档中有详细的账户申请和后台配置流程。还可以参考其他博主文章, 图文结合更方便,例如:叶遮沉阳的博文Amnesia_Fu的博文

有一点需要注意,LeanCloud后台已经改版,有些功能位置发生变化。目前Artitalk主页以及其他博主的文章仍然基于老版的配置界面。虽然逻辑仍然通畅,但是可能按照说明找不到功能。基于2022年5月9日的LeanCloud后台界面。我对后台配置流程进行修订,修订步骤是3、4和8,都是功能位置,如下:

  1. 前往 LeanCloud 国际版,注册账号。
  2. 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
  3. 绑定完成之后点击创建应用,应用名称随意,接着单击新建的应用名,在进入应用概览界面。在数据存储选项卡的结构化数据中创建class,命名为 shuoshuo
  4. 内建账户选项卡的用户管理中点击添加用户,输入想用的用户名及密码。
  5. 回到结构化数据中,点击class下的shuoshuo。找到权限,在Class访问权限中将add_fields以及create权限设置为指定用户,输入你刚才输入的用户名会自动匹配。为了安全起见,将deleteupdate也设置为跟它们一样的权限。
  6. 然后新建一个名为atCommentclass,权限什么的使用默认的即可。
  7. 点击class下的_User添加列,列名称为img,默认值填上你这个账号想要用的发布说说的头像url,这一项不进行配置,说说头像会显示为默认头像 —— Artitalk 的 logo。
  8. 设置选项卡中找到应用凭证,记下来AppIDAppKey,一会会用。
  9. 最后将_User中的权限全部调为指定用户,或者数据创建者,为了保证不被篡改用户数据以达到强制发布说说。

本地配置

首先需要说明,我不想把随笔单放一页,因此把他集成到关于页面中,因此将ArtitalkJS文件插入/themes/fluid/layout/about.ejs。我把他放在主要内容之后,评论之前。你问我为什么不单独建立一个ejs文件或者采用更优雅的方式,很简单,我读不懂JS,也不会写,也不想学。

如果想要新建一个随笔页面可以参考叶遮沉阳的博文中页面引入的思路。我想fluid主题可能需要以下步骤:

  1. Hexo新建Artitalk页面。
  2. 修改_config.fluid.yml文件中的menu(导航菜单栏)和Custom Page(自定义页)两处。
  3. 在layout下添加arrtitalk.ejs,将项目主页中的JS放入其中,引入说说。

参考资料