问题：

在我们学习了html与css的基础后，往往便申请了域名写了自己的个人博客。而个人博客常常有一个功能，那就是说说留言功能。而实现说说留言那必定得有后端数据库的数据交互支持才能实现，但是后端的环境布置与代码书写太复杂，我们也不想碰，就只想写页面。
本着分享快乐的原则（＾∀＾●）ﾉｼ，
所以想在分享一个js插件的好东西给学弟学妹们，10分钟就能布置好说说留言功能，再也不用担心处理复杂的后端问题啦。

介绍：

1.我们要使用的便是Artitalk.js插件，点击可以跳转网址Artitalk.js。

2.也可以直接去看官网地址，Artitalk的网址里的使用文档已经详细的说了使用的步骤，我下面内容也是基于使用文档的一些详细补充而已。

3.文章红色箭头标记的为需要操作部分。数字为操作步骤。

解决方案第一步：

一：前往LeanCloud的官网注册国际版的账号，注意是国际版。LeanCloud国际版。，其是拿来存放后台数据的。

注意：注册需要验证邮箱。

二：绑定完成之后点击创建应用，应用名称随意写，其它选项默认即可。


最后点击创建。

三：接着在结构化数据中创建 class，命名为 shuoshuo。这个就是拿来存放说说内容数据的。

注意：填完shuoshuo后，其它默认不用管，点击创建就好。

四：在你新建的应用中找到结构化数据下的用户，点击添加用户。看步骤：

五：填写账号密码，这个就是你的博客发布说说时候要登录的账号和密码，登录后才能发说说。

注：账号密码随意设计。

六：回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名（就是你设计的账号）会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。


注意：在步骤3里写你设计的账号，然后点击保存就行，角色栏不用填。
*接下来重复操作，把这剩下3个都设成指定用户就行。

七：然后新建一个名为atComment的class，权限什么的使用默认的即可。就是写完atComment后就直接点创建就好。

八：点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。

下面的2步骤可以省略：

九：在最菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey 。

十：跟设置shuoshuo权限那里一样，将 _User 中的那四个或全部全部调为指定用户。

解决方案第二步：

注意.如果你的说说留言是放在html文件的，可以继续看下面步骤，若是放vue项目或者其他的，可以去看官方使用文档，这里就不介绍啦。

1.建立一个html文件，或者用你原有的文件添加代码也行。

2.添加以下js代码：

   <!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放说说的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({ appId: '这里写上面叫你记下的appid', // Your leancloud appId appKey: '这里写上面叫你记下的appkey' // Your leancloud appKey
})
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

注意：把代码放在body标签里也行，还有< div id=“artitalk_main” >这个是说说留言功能的容器，可以把其当普通div盒子一样布局，设置宽高位置等等。

效果：

完成上面步骤后，你就可以直接运行html文件查看效果了~

这是发布了几条说说的效果。

当然也有许多成品项目，美观很多，可以去Artitalk官网查看引用。

补充：

还可以通过Artitalk里的配置项更改一些插件页面或布局的一些功能。详细见文档。

比如：修改说说输入框背景图片，为bgImg；
代码直接在后面添加：

new Artitalk({ appId: 'xxx', // Your leancloud appId appKey: 'xxx', // Your leancloud appKey bgImg: '这写上图片链接或者你图片的相对路径' })

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

总结：

若有不足和说错的地方，见谅见谅╭(′▽`)╯~

文章来源: blog.csdn.net，作者：北极光之夜。，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/luo1831251387/article/details/110925687