10分鐘實(shí)現(xiàn)個(gè)人博客布置說(shuō)說(shuō)留言功能，Artitalk.js插件使用

問(wèn)題：

在我們學(xué)習(xí)了html與css的基礎(chǔ)后，往往便申請(qǐng)了域名寫了自己的個(gè)人博客。而個(gè)人博客常常有一個(gè)功能，那就是說(shuō)說(shuō)留言功能。而實(shí)現(xiàn)說(shuō)說(shuō)留言那必定得有后端數(shù)據(jù)庫(kù)的數(shù)據(jù)交互支持才能實(shí)現(xiàn)，但是后端的環(huán)境布置與代碼書寫太復(fù)雜，我們也不想碰，就只想寫頁(yè)面。

本著分享快樂(lè)的原則（＾?＾●）??，

所以想在分享一個(gè)js插件的好東西給學(xué)弟學(xué)妹們，10分鐘就能布置好說(shuō)說(shuō)留言功能，再也不用擔(dān)心處理復(fù)雜的后端問(wèn)題啦。

介紹：

1.我們要使用的便是Artitalk.js插件，點(diǎn)擊可以跳轉(zhuǎn)網(wǎng)址Artitalk.js。

2.也可以直接去看官網(wǎng)地址，Artitalk的網(wǎng)址里的使用文檔已經(jīng)詳細(xì)的說(shuō)了使用的步驟，我下面內(nèi)容也是基于使用文檔的一些詳細(xì)補(bǔ)充而已。

3.文章紅色箭頭標(biāo)記的為需要操作部分。數(shù)字為操作步驟。

解決方案第一步：

一：前往LeanCloud的官網(wǎng)注冊(cè)國(guó)際版的賬號(hào)，注意是國(guó)際版。LeanCloud國(guó)際版。，其是拿來(lái)存放后臺(tái)數(shù)據(jù)的。

注意：注冊(cè)需要驗(yàn)證郵箱。

二：綁定完成之后點(diǎn)擊創(chuàng)建應(yīng)用，應(yīng)用名稱隨意寫，其它選項(xiàng)默認(rèn)即可。

最后點(diǎn)擊創(chuàng)建。

三：接著在結(jié)構(gòu)化數(shù)據(jù)中創(chuàng)建 class，命名為 shuoshuo。這個(gè)就是拿來(lái)存放說(shuō)說(shuō)內(nèi)容數(shù)據(jù)的。

注意：填完shuoshuo后，其它默認(rèn)不用管，點(diǎn)擊創(chuàng)建就好。

四：在你新建的應(yīng)用中找到結(jié)構(gòu)化數(shù)據(jù)下的用戶，點(diǎn)擊添加用戶。看步驟：

五：填寫賬號(hào)密碼，這個(gè)就是你的博客發(fā)布說(shuō)說(shuō)時(shí)候要登錄的賬號(hào)和密碼，登錄后才能發(fā)說(shuō)說(shuō)。

注：賬號(hào)密碼隨意設(shè)計(jì)。

六：回到結(jié)構(gòu)化數(shù)據(jù)中，點(diǎn)擊 class 下的 shuoshuo。找到權(quán)限，在 Class 訪問(wèn)權(quán)限中將 add_fields 以及 create 權(quán)限設(shè)置為指定用戶，輸入你剛才輸入的用戶名（就是你設(shè)計(jì)的賬號(hào)）會(huì)自動(dòng)匹配。為了安全起見，將 delete 和 update 也設(shè)置為跟它們一樣的權(quán)限。

注意：在步驟3里寫你設(shè)計(jì)的賬號(hào)，然后點(diǎn)擊保存就行，角色欄不用填。

*接下來(lái)重復(fù)操作，把這剩下3個(gè)都設(shè)成指定用戶就行。

七：然后新建一個(gè)名為atComment的class，權(quán)限什么的使用默認(rèn)的即可。就是寫完atComment后就直接點(diǎn)創(chuàng)建就好。

八：點(diǎn)擊 class 下的 _User 添加列，列名稱為 img，默認(rèn)值填上你這個(gè)賬號(hào)想要用的發(fā)布說(shuō)說(shuō)的頭像url，這一項(xiàng)不進(jìn)行配置，說(shuō)說(shuō)頭像會(huì)顯示為默認(rèn)頭像 —— Artitalk 的 logo。

下面的2步驟可以省略：

九：在最菜單欄中找到設(shè)置-> 應(yīng)用 keys，記下來(lái) AppID 和 AppKey 。

十：跟設(shè)置shuoshuo權(quán)限那里一樣，將 _User 中的那四個(gè)或全部全部調(diào)為指定用戶。

解決方案第二步：

注意.如果你的說(shuō)說(shuō)留言是放在html文件的，可以繼續(xù)看下面步驟，若是放vue項(xiàng)目或者其他的，可以去看官方使用文檔，這里就不介紹啦。

1.建立一個(gè)html文件，或者用你原有的文件添加代碼也行。

2.添加以下js代碼：

1

2

3

4

5

6

7

8

9

10

注意：把代碼放在body標(biāo)簽里也行，還有< div id=“artitalk_main” >這個(gè)是說(shuō)說(shuō)留言功能的容器，可以把其當(dāng)普通div盒子一樣布局，設(shè)置寬高位置等等。

效果：

完成上面步驟后，你就可以直接運(yùn)行html文件查看效果了~

這是發(fā)布了幾條說(shuō)說(shuō)的效果。

當(dāng)然也有許多成品項(xiàng)目，美觀很多，可以去Artitalk官網(wǎng)查看引用。

補(bǔ)充：

還可以通過(guò)Artitalk里的配置項(xiàng)更改一些插件頁(yè)面或布局的一些功能。詳細(xì)見文檔。

比如：修改說(shuō)說(shuō)輸入框背景圖片，為bgImg；

代碼直接在后面添加：

new Artitalk({ appId: 'xxx', // Your leancloud appId appKey: 'xxx', // Your leancloud appKey bgImg: '這寫上圖片鏈接或者你圖片的相對(duì)路徑' })

1

2

3

4

5

6

總結(jié)：

若有不足和說(shuō)錯(cuò)的地方，見諒見諒╭(′▽`)╯~

HTML JavaScript

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。