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
2
3
4
5
6
7
8
9
# vuepress 配置artalk
# 安装依赖
yarn add artalk -S
1
# 新建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
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
# 设置评论页面
然后在所需页面添加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
2
3
4
5
6
原文链接：https://xuqilong.top/pages/783df7/#%E6%96%B0%E5%BB%BAartalk-vue%E7%BB%84%E4%BB%B6
上次更新: 2023/02/23, 18:13:16
|