基于Vue 2的前端如何引入评论区组件Artalk

1. Artalk介绍

Artalk是一个可以集成的评论区组件，可以直接添加到前端页面，而不用自己开发评论区来保存评论，支持点赞/踩，还支持评论区之间的相互回复，以及一些表情包的使用，同时也有丰富的后台管理页面
【如以下展示】

[========]

2. Artalk服务器部署

2.1 环境条件

• Vue 2
• Artalk 2.8.4
• （Windows 10） docker

2.1 拉取镜像

docker pull artalk/artalk-go@2.8.4

2.2 Docker启动Artalk

(Windows版本启动使用docker命令和Linux有所不同，以下默认Linux)

生成配置文件
（windows命令行）
docker run -it -v $(pwd)/data:/data --rm artalk/artalk-go gen config data/artalk.yml

2.3 编辑配置文件，这里记得配置自己数据库的登录名和密码，以及可信域名防止CORS跨域警告，locale: "zh-CN"可配置中文显示

vim data/artalk.yml

启动容器

## Linux命令
docker run -d \\
  --name artalk \\
  -p 0.0.0.0:8080:23366 \\
  -v $(pwd)/data:/data \\
  artalk/artalk-go
  
## windows 命令
docker run -d ^
  --name artalk ^
  -p 9080:23366 ^
  -v "%cd%\\data:/data" ^
  --restart=always ^
  artalk/artalk-go:2.8.4

2.4 创建第一个账户，否则进入后台页面不知如何登录

命令行输入，然后会分别让你输入昵称和密码

docker exec -it artalk artalk admin

后台管理页面
默认后台地址 http://localhost:8080/
【后台服务器页面】

3.前端运用

3.1 Node安装Artalk

npm install artalk:2.8.4

3.2 页面配置组件

Vue某个页面的引入

<template>
<!-- 省略其它代码 -->
<!-- 评论区组件引入 -->
          <div id="artalk-comments"></div>
</template>

<script>
 <!-- 省略其它代码 -->
  import Artalk from 'artalk'
  import { onBeforeUnmounted, onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import 'artalk/dist/Artalk.css'
  
      mounted() {
      const el = document.getElementById('artalk-comments');

      const artalk = Artalk.init({
        el: el,
        // 其他Artalk配置参数
        server: '<http://localhost:8080>',
        site: 'xx的Blog',
        pageKey: '', // 如果你正在使用vue-router
        pageTitle: '',
        // ...
      });

      // 当组件卸载时，销毁Artalk实例
      this.$once('hook:beforeDestroy', () => {
        artalk && artalk.destroy();
      });
    },
 </script>

疑难杂症

1. Artalk在前端CORS跨域错误

在Artalk服务器上配置可信域名Trusted Domains

格式大概是

http://localhost:8082/blogs

2. 服务器后台管理需要账户邮箱密码

需要先用命令行创建第一个账户，执行命令创建管理员账户： docker exec -it artalk artalk admin

具体使用方法配置请查阅官网

https://artalk.js.org/guide/intro.html