为 valaxy 博客 yun 主题添加 artitalk 说说页面

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,只能等大佬实现啦。现在又不是不能用

ArchLinux on Y9000P2022十分好用,就是有点难用
使用ShareX和Markdown Image自动压缩截图为WebP格式并一键插入Markdown文档