Artitalk: A JavaScript repository from kashuukiyoko

👀 前言

文档：Artitalk.js

Github：Artitalk.js

详细教程参考：为你的hexo博客添加动态的（可直接发布说说的）说说页面

视频教程：Hexo-shuoshuo bilibili

因为项目初期版本更新较为频繁，所以教程仅作参考，请仔细阅读使用文档，以此为准。

特性

实时发布
支持markdown语法
支持剪切板图片直接上传
方便引用

如果你对本项目感兴趣并且有心一起完善功能的，欢迎~

👭 可爱的小伙伴写出可爱的介绍教程

🐷 显然比我写的清晰的多

cungudafa：https://cungudafa.top/post/96c.html

🚀 开始使用

🌈 leancloud的相关准备

::: tip 🌍 使用国际版的leancloud 因为leancloud的国内节点需要接入备案域名作为安全域名。明显违背了适用性强的理念。所以本文档只针对国际版的leancloud进行说明。如果你有其他需要，可以根据自己的需要修改js。 :::

前往leancloud国际版，注册账号。
注册完成之后根据leancloud的提示绑定手机号和邮箱。
绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建class，命名为shuoshuo。
在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。
回到结构化数据中，点击class下的shuoshuo。找到权限，在Class 访问权限中将add_fields以及create权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将delete和update也设置为跟它们一样的权限。
在最菜单栏中找到设置->应用keys，记下来AppID和AppKey，一会会用。
最后将_User中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。 ::: danger ❗ 关于设置权限的这几步这几步一定要设置好，才可以保证不被“闲人”破解发布说说的验证 :::

🌼 HTML片段

::: warning 🐷 一个不足由于leancloud的限制，本功能暂时无法跟valine在同一个页面使用。若想使用本功能，请在页面中关闭valine。关于评论的功能，以后慢慢实现解决办法 :::

<head>
  ...
  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  ...
</head>
<body>
    <script>
    var img="";
    var appID="";
    var appKEY="";
    var per="";
    var username="";
    </script>
    <div id="lazy"></div>
    <div id="artitalk"></div>
    <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
</body>

🎅 配置项的说明

必要性为False的配置项可以不添加

变量名	作用	必要性	默认值
img	说说旁边显示的头像	True	无
appID	Leancloud中的应用ID	True	无
appKEY	Leancloud中的应用KEY	True	无
per	每页显示说说的数量	True	无
username	Leancloud中设置的用户名	True	无
placeholder1	在编辑说说的输入框中的占位符	False	""（空）
placeholder2	输入密码的输入框的占位符	False	"请输入密码"
placeholder3	输入头像url的输入框的占位符	False	""（默认头像）
lazy	是否开启加载动画（1：开启 0：关闭）	False	1（默认开启）
bgimg	说说输入框背景图片（需为图片格式）	False	""（空）

在头像url中输入图片链接会在本次发布的说说中覆盖默认头像

🔨 测试

如果上面的配置没有问题，打开你的页面，在身份验证的输入框中填入Leancloud设置的用户密码。点两次biu,即可成功发布说说。（这里有一个bug，有的小伙伴点击一次就行了。根据自己情况灵活应对一下吧

🔨 说说内容的修改与删除

在leancloud中找到自己添加的名为shuoshuo的class，在里面的content中编辑即可。

🔨 已发现的Bug

发表说说得时候，第一次会失败，即使你的密码正确。但并无任何提示，js判断逻辑也无问题，就是没有存储到leancloud，页面重新加载之后恢复正常。算是解决了吧。提交成功后会刷新界面。
不支持<a>标签，于1.2.1版本已修复。
Hexo可能会通过自带的渲染插件将"渲染成“导致js所需的参数出错。解决办法是在hexo根目录下的_config.yml文件中添加以下语句

kramed:
  smartypants: false

某些Hexo主题可能会对图片的链接进行处理。比如说将图片链接渲染出来的时候添加上a标签，导致所需参数赋值异常。目前想到的办法由两种一：hexo中自带的标签，标定不渲染的部分，将md文件中的js部分标中选择不渲染二: 下载js后直接把赋值放在js中注意，这两种办法都是可以直接解决上面两种bug的（引号和图片链接的渲染）
获取发布说说的设备的api似乎不是很给力。换一个应该就可以了。引用os.js判断发布系统。对于移动端不用的浏览器返回的返回的设备和位置仍然不准确。版本2.1.2中取消位置显示。
因为我的不严谨，在源码中少了一个</div>导致部分博客框架出现div错位的情况，已解决。

🔨 遇到问题自己排错的方法

查看js和css是否成功引用。
检查是否使用的是leancloud的国际版

如果以上两项都正确，还是不行，请联系我。

🚩 未来想要实现的功能

[] 添加表情。
[] 说说的评论及点赞功能。

使用cdn

jsdelivr

//推荐指定版本号为最新版本，目前最新为1.1.6 推荐使用最新以防止出现已知bug
https://cdn.jsdelivr.net/gh/drew233/artitalk/source/版本号/artitalk.js

🎆 开发者

👍 特别鸣谢

张渔：logo制作
leancloud：提供存储服务
VuePress：文档框架
Github: 代码存储

kashuukiyoko/Artitalk