问题：

在我们学习了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 appIdappKey: '这里写上面叫你记下的appkey' // Your leancloud appKey
})
</script>

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

效果：

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

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

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

补充：

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

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

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

总结：

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

10分钟实现个人博客布置说说留言功能，Artitalk.js插件使用相关推荐

一看就会的保姆级教程，10分钟搭建个人博客
前言相信很多人都想拥有一个自己的个人博客,现有的个人博客搭建框架已经有很多了,例如 hexo .vuepress .jekyll 等等,这里我选用 vuepress 来快速搭建个人博客网上教程千千 ...
10大高权重博客_你知道几个？
客营销在现实网络环境中还是有着较大的作用,搜索引擎对博客的收录也是较快的. 在百度收录新站小技巧和新站外链建设文章中,陈迪均提到利用目前比较高权重的博客创造外链,新站都不好找外链,好好利用这些博客,虽 ...
关于博客园的TrackBack功能
博客园的TrackBack功能已经重新开通. TrackBack功能分为:发送TrackBack与接收TrackBack. 发送TrackBack: 当你添加或编辑随笔时 ...
php语录网站,杨泽业：给你的wordpress博客添加经典语录功能，适合所有php网站
我们做一个网站就是要不断给访客提供最佳的用户体验,同时提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能这个 ...
【博客项目】—登录功能实现（四）
[博客项目]-登录功能实现( 四) 创建用户集合,初始化用户连接数据库创建用户集合初始化项目
我的csdn博客所有的留言和评论我都不太想回复了
常言道,林子大了,什么鸟都有! 我的csdn博客所有的留言和评论我都不太想回复了: 第1,懒得回复: 第2,不太想回复: 第3,我既不太想,又懒得回复,尤其是喷子.酸子,我特别反感和讨厌,牛人一般都是 ...
Django by Example·第二章|Enhancing Your Blog with Advanced Features(为博客系统添加高级功能)@笔记
Django by Example·第二章|Enhancing Your Blog with Advanced Features(为博客系统添加高级功能)@笔记这本书的结构确实很不错,如果能够坚持看 ...
爆肝1个多月，严选10大热门静态博客框架，官方文档、教学视频、经典案例、热门插件一应俱全，强烈建议收藏
[文章编号 t001] 凌晨 12 点,我有一位朋友,在电话里,气愤地说他的博客文章又被平台删掉了. 我很好奇为什么,原来是他在某平台发布了一篇技术类原创文章,读者都比较喜欢.后来,他把这篇文章转发到 ...
用 toto 3分钟建轻量级博客
对于程序员或创业团队来说,还是有必要拥有一个属于自己的博客.Wordpress 曾经让个人或企业搭建博客变得非常容易.但是我们觉得 Wordpress 还是有些重量级,所以选择了一个非常轻便的工具 t ...

10分钟实现个人博客布置说说留言功能，Artitalk.js插件使用

问题：

介绍：

解决方案第一步：

解决方案第二步：

效果：

补充：

总结：

10分钟实现个人博客布置说说留言功能，Artitalk.js插件使用相关推荐

最新文章

热门文章