Artitalk
Artitalk 是一个基于 Leancloud 的简单说说 js,具体参见官方文档。
我成功将它接入了我的博客,点这里看看。下面简单介绍一下接入方法。
由于构建上的一些问题,我把它暂时移除了
注册并配置 Leancloud
这一步与官方文档完全相同,点击查看
配置 valaxy
在博客根目录下,新建 index.heml,写入以下内容
html
<!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="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>
然后在 /components/ 目录下,新建 Artitalk.vue ,写入以下内容
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: '你的appid',
appKey: '你的key',
shuoPla: '',
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>
这样就可以啦。在你想要显示说说的页面(.md文件)里,写上<Artitalk />
就可以显示了。
问题
目前 Artitalk 只支持以 Leancloud 作为数据库,并且 cdn 用的还是 jsdeliver,速度感人。我提了 issue 希望能支持更多部署方式,不过看起来作者已经失踪有一段时间了…
可惜我不会 js,只能等大佬实现啦。现在又不是不能用