基於Vue 2的前端如何引入評論區元件Artalk

FlyHippo發表於2024-04-26
Vue前端元件

1. Artalk介紹

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

相關文章