👀 前言
GitHub 倉庫：Artitalk.js（https://github.com/ArtitalkJS/Artitalk）
#🎉 特性
增刪查改全方面支持
支持針對每條說說的評論
支持 Markdown/html 語法
支持圖片上傳
#🚀 快速使用
下列主題已將本項目整合進去，可以直接使用。 感謝以下主題對本項目的支持~
- #hexo-theme-volantis
- #hexo-theme-cards
- #hexo-theme-butterfly
- #hexo-theme-matery
- #gridea-theme-dark
- #hexo-theme-MengD
#🚀 開始使用
#🌈 LeanCloud 的相關准備
TIP
🎃 與 Valine 在同一個頁面使用
如果迫切需要將 Artitalk 與 Valine 在同一個頁面使用，可以通過 Artitalk 與 Valine 使用同一個 LeanCloud 的應用來解決。
🌍 建議使用國際版的 LeanCloud
因為國際版的 LeanCloud 不需要配置 serverurl，所以推薦使用國際版，速度沒有區別，如果使用國內版的 LeanCloud 別忘了填寫 serverurl 即可
👀 與valine在同一頁面使用
如果有這個需要，可以將 artitalk 與 valine 存放在同一個應用中。可以有效避免同一個頁面使用兩個leancloud應用所產生的沖突。
前往 LeanCloud 國際版，注冊賬號。
注冊完成之后根據 LeanCloud 的提示綁定手機號和郵箱。
綁定完成之后點擊創建應用，應用名稱隨意，接着在結構化數據中創建 class，命名為 shuoshuo。
在你新建的應用中找到結構化數據下的用戶。點擊添加用戶，輸入想用的用戶名及密碼。
回到結構化數據中，點擊 class 下的 shuoshuo。找到權限，在 Class 訪問權限中將 add_fields 以及 create 權限設置為指定用戶，輸入你剛才輸入的用戶名會自動匹配。為了安全起見，將 delete 和 update 也設置為跟它們一樣的權限。
然后新建一個名為atComment的class，權限什么的使用默認的即可。
點擊 class 下的 _User 添加列，列名稱為 img，默認值填上你這個賬號想要用的發布說說的頭像url，這一項不進行配置，說說頭像會顯示為默認頭像 —— Artitalk 的 logo。
在最菜單欄中找到設置-> 應用 keys，記下來 AppID 和 AppKey ，一會會用。
最后將 _User 中的權限全部調為指定用戶，或者數據創建者，為了保證不被篡改用戶數據以達到強制發布說說。
❗ 關於設置權限的這幾步
這幾步一定要設置好，才可以保證不被 “閑人” 破解發布說說的驗證
#🌼 開始使用
<!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放說說的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({
appId: '', // Your LeanCloud appId
appKey: '' // Your LeanCloud appKey
})
</script>
#🎅 配置項的說明
可以通過修改配置項快捷更改部分功能，點我查看詳細說明
#🔨 測試使用
如果上面的配置沒有問題，打開你的頁面，點擊頁面右下角的登錄輸入用戶密碼后，在輸入框中輸入說說，點擊發布即可。
#🔨 說說內容的刪除
登錄后點擊說說內容框右上角的 x，點擊確定刪除即可。
#🔨 說說內容的修改
點擊想要修改的那條說說的頭像，會自動跳轉到只有一條提示語以及輸入框的界面，在輸入框中編輯完之后點擊保存即可
注：說說內容的修改與刪除在 LeanCloud 后台也可進行操作
#🔨 評論的使用
點擊每條說說右下角的評論圖標即可查看針對本條說說的評論或者對本條說說發起評論，再次點擊會刷新頁面已達到返回的作用
填寫郵箱以獲得 gravatar 的頭像
#🦄 在 Typecho 中使用
登陸后台后新增獨立頁面
標題隨意填，內容填為
!!!
<body>
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<div id="artitalk_main"></div>
<script>
new Artitalk({
appId: '', // Your LeanCloud appId
appKey: '' // Your LeanCloud appKey
})
</script>
</body>
!!!
發布頁面
#🍖 在 Vue 單頁項目中使用
例如 vuepress Gridsome 等博客框架是由 Vue 構建的。
在Gridsome中的准備
在gridsome.config.js中引入 artitalk
module.exports = { // ... head: [ ['script', { src: "https://cdn.jsdelivr.net/npm/artitalk" }], ], // ... }
在普通Vue項目中的准備
在<YOUR_PROJ>/public/index.html中引入 artitalk
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> + <script src="https://cdn.jsdelivr.net/npm/artitalk"></script> </body> </html>
新建 src/components/Artitalk.vue（VuePress: .vuepress/components/Artitalk.vue），添加以下內容
<template> <div id="artitalk_main" /> </template> <script> export default { mounted() { function addScript(url) { var s = document.createElement("script"); s.id = "at"; url.indexOf("appId") == -1 ? (s.src = url) : (s.innerHTML = url); document.head.appendChild(s); } addScript(` new Artitalk({ appId: 'ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI', appKey: 'nHXLd3N3Jgh460t2iRQKWAtr', shuoPla: 'Demo頁密碼：123456', bgImg: 'https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp', atEmoji: { huaji: 'https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/smilies/icon_huaji.gif', baiyan: 'https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/baiyan.png', bishi: 'https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bishi.png', bizui: 'https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bizui.png', chan: 'https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/chan.png' }, }) `); }, destroyed() { document .querySelectorAll("#at") .forEach(element => element.parentNode.removeChild(element)); delete window.AV; } }; </script>
如果需要加入 Artitalk 的頁面為 .md（例如 VuePress），直接在其中寫入 <Artitalk /> 即可。
如果為 .vue （開發項目） 除了寫入 <Artitalk />，還需要加入以下內容
<script> +import Artitalk from "@/components/Artitalk.vue"; export default { components: { + Artitalk }, }; </script>
#🚀 安全性
由於 leancloud 的機制，應用的 Appid 以及 Appkey 均會暴漏在前端，可能會遭受到其他人的惡意攻擊。 如果你在擔心這個問題，你可以使用Artitalk_SafeMode（https://artitalk.js.org/settings.html/Artitalk_SafeMode）
#🕸 使用 cdn
#🕸 UNPKG
#⭐ 獲取最新
// 默認獲取最新，推薦使用
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
#🍳 獲取指定版本
使用指定版本，在版本號填上對應版本即可，例如：https://unpkg.com/artitalk@1.1.15/artitalk.js
關於版本可查看：https://unpkg.com/artitalk/
<script type="text/javascript" src="https://unpkg.com/artitalk@版本號/artitalk.js"></script>
#🕸 JsDelivr
#⭐ 獲取最新
// 默認獲取最新，推薦使用
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script>
#🍳 獲取指定版本
使用指定版本，在版本號填上對應版本即可，例如：https://cdn.jsdelivr.net/npm/artitalk@1.1.15
關於版本可查看：https://cdn.jsdelivr.net/npm/artitalk/
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk@版本號"></script>
