官网：Artitalk.js

后端配置

  1. 前往LeanCloud 国际版，注册账号。
  2. 注册完成之后根据 LeanCloud的提示绑定手机号和邮箱。
  3. 绑定完成之后点击创建应用，应用名称随意，接着在数据存储->结构化数据中选择创建class，命名为shuoshuo
  4. 在你新建的应用中找到内建账户->用户管理。点击添加用户，输入想用的用户名及密码。
  5. 回到数据存储->结构化数据，点击 class 下的 shuoshuo。找到权限，在 Class访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。此时需要注意，为了让其他人能够看到，或者说为了让前端能够读取说说内容，需要将find和get的权限设置为所有用户。
  6. 然后新建一个名为atComment的class，权限什么的使用默认的即可。
  7. 点击 class 下的_User->数据->添加列，添加一个新的列，列名称为img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像。
  8. 在最菜单栏中找到设置-> 应用Keys，记下来AppID 和 AppKey 备用。
  9. 最后将 _User 中的Class访问权限,默认 ACL 权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

前端配置

  • 安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

    1
    npm install hexo-butterfly-artitalk --save

  • 参考butterfly-plugins/hexo-butterfly-artitalk

  • 添加配置信息 在 Hexo 的配置文件 或者 主題的配置文件中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    # Artitalk 留言板
    # see https://artitalk.js.org/
    artitalk:
      enable: true
      appId: XXX
      appKey: XXXX
      path: talking # 默认为 artitalk，生成的页面为 artitalk/index.html
      js: https://unpkg.com/artitalk
      option:
        serverURL: https://leancloud.fulsun.ml #将此处的********替换为你的appId前八位
        lang: zh # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
        pageSize: 10  #每页说说的显示数量
        shuoPla: 开始记录生活吧 #在编辑说说的输入框中的占位符
        avatarPla: /medias/avatar.jpg #自定义头像url的输入框的占位符
        motion: 1 #加载动画的开关，1为开，0为关，默认为开
        # bgImg: #说说输入框背景图片url
        color1: linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%)  #说说背景颜色1&按钮颜色1
        color2: linear-gradient(45deg, rgb(109, 208, 222) 15%, rgb(245, 154, 190) 85%)  #说说背景颜色2&按钮颜色2
        color3: black #说说字体颜色
      front_matter:
        aside: true # 关闭侧边栏
        comments: false # 关闭评论

  • 配置项 | Artitalk.js