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

您所在的位置:网站首页 问题图片说说 10分钟实现个人博客布置说说留言功能,Artitalk.js插件使用

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

2024-07-15 11:17| 来源: 网络整理| 查看: 265

问题:

在我们学习了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代码:

new Artitalk({ appId: '这里写上面叫你记下的appid', // Your leancloud appId appKey: '这里写上面叫你记下的appkey' // Your leancloud appKey })

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

效果:

完成上面步骤后,你就可以直接运行html文件查看效果了~ 在这里插入图片描述 这是发布了几条说说的效果。

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

补充:

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

比如:修改说说输入框背景图片,为bgImg; 代码直接在后面添加:

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3