vuepress配置artalk

Artalk (opens new window)是一款轻量、安全、易上手的自托管评论系统。

前端引入方式参考https://artalk.js.org/guide/backend/fe-control.html

提示：注意配置artalk的CORS等安全措施。

# 部署

可参考https://artalk.js.org/guide/backend/install.html

docker-compose.yaml

version: "3"
services:
  artalk:
    container_name: artalk
    image: artalk/artalk-go
    ports:
      - 23366:23366
    volumes:
      - xxx/data:/data

1
2
3
4
5
6
7
8
9
10

# vuepress 配置artalk

# 安装依赖

yarn add artalk -S

1
2

# 新建Artalk.vue组件

我的vuepress使用的是vdoing主题，vuepress版本是1.xxx

在vdoing/components下新建Artalk.vue：

<template>
  <div>
    <!-- 自定义评论 -->
    <h2 id="commentArea">评论</h2>
    <div id="Comments"></div>
  </div>
</template>

<script>
import "artalk/dist/Artalk.css";

export default {
  mounted() {
    if (typeof window != "undefined") {
      // 初始化Artalk
      this.initArtalk();
    }
  },
  methods: {
    initArtalk() {
      const ArtalkComponent = () => ({
        component: import("artalk"),
      });

      ArtalkComponent().component.then(function (result) {
        const Artalk = result.default;

        new Artalk({
          el: "#Comments",
          pageKey: "", // 页面链接
          pageTitle: "", // 页面标题
          server: "https://talk.xuqilong.top", // 后端地址
          site: "程序员 Life",
        });
      });
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 设置评论页面

然后在所需页面添加artalk评论组件。例如，在vdoing/components/Page.vue下配置评论：

          <Content class="theme-vdoing-content" />
          <!-- 自定义评论 -->
          <Artalk />
        </div>
        <slot name="bottom" v-if="isShowSlotB" />
        <PageEdit />

1
2
3
4
5
6

如果没有问题，就大功告成啦！

上次更新: 2024/05/29, 06:25:22

← 极值 WMware虚拟机环境搭建F5 BIG-IP Virtual Edition→