【Hexo】实现博客的动态说说功能

摘要

• 基于leancloud实现的可实时发布说说的js.
• 指条明路 → https://artitalk.js.org/
• 由于此项目处于初期阶段，更新或许比较频繁，故此文仅作参考，建议去查阅官方文档。
• 我的说说：https://wblog.tech/photos/Sshuo.html
• 博客教程：https://wblog.tech/hexo-shuoshuo.html

设置

Leancloud

1. 使用国际版的leancloud注册账号以及完成绑定邮箱及手机号等实名操作，否则不能创建应用。
2. 创建应用，名称随意，建议取名为shuoshuo.
3. 在新创建的应用中，找到"结构化数据"下的"用户"，点击"添加用户",输入用户名密码，记住此用户名密码，下面的设置会用到。
4. 点击"结构化数据"，点击"class"下的"shuoshuo"。找到"权限"，在"Class"访问权限"中,将"add_fields",“create”,“delete”,"update"设置指定用户可见，输入刚刚设置的用户名，系统会自动匹配到刚刚你设置的用户名密码的，点击添加并确认即可。
5. 在菜单栏中找到"设置"->“应用keys”，将"AppID"和"AppKey"记录下来，之后的设置会用到。

hexo博客

1. hexo new page shuoshuo ,生成一个说说界面，在此文件夹中的index.md文件中，填下下属代码。

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var img="";                 //说说旁边显示的头像
var appID="";               //Leancloud中的AppID
var appKEY="";              //Leancloud中的AppKEY
var per="";                 //每页显示说说的数量
var username="";            //Leancloud中设置的用户名
</script>
<div id="lazy"></div>
<div id="artitalk"></div>
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>

上述中列出来的五项var，均为必须设置。
其中还可以在后添加

var placeholder1=""	//在编辑说说的输入框中的占位符
var placeholder2=""	//输入密码的输入框的占位符
var placeholder3=""	//输入头像url的输入框的占位符（不填写开启即为默认头像）
var lazy=""	        //是否开启加载动画（1：开启 0：关闭）
var bgimg=""	    //说说输入框背景图片（需为图片格式）

2. 更新测试

• hexo g && hexo s,进行本地的更新测试。
  打开设置的说说界面，这个说说界面还需要在博客主题目录下的_config.yml添加，不同的主题添加的方式不同，我的主题为在menu中添加"说说：/shuoshuo/"即可。
  进入说说界面，进行测试即可。
  输入完说说的内容后，输入之前在leancloud创建的shuoshuo应用中,设置的用户名的密码，点击发布即可。

说明

• 项目目前处于初步阶段，更新或频繁，建议多多阅读官方的使用文档。
• 我的主题为yileas,基于yilia主题的魔改版。
• 再次声明，此教程仅作参考，详细具体还请详见项目使用文档。
• 教程就是这么的简单，该功能的添加并不复杂，原则上适合任何的hexo主题。

项目源地址：https://github.com/Drew233/Artitalk
项目文档：https://artitalk.js.org/
我的说说：https://wblog.tech/photos/Sshuo.html