VuePass评论功能转载

# 前言

该主题配置实战经历 , 也是给了自己在当中学习的经历作为记录 , 虽说是转载 , 但自己也在当中踩了不少坑

以下是采用 Artalk自托管评论系统来配置 vuepress-theme-vdoing (opens new window) 主题

官方文档 : https://artalk.js.org (opens new window)

转载文章 : https://wiki.eryajf.net (opens new window)

# 后端

后端基于 docker , 开箱即用的容器 , 需要到服务器 !!

准备 :

Docker 服务器/搭载docker云空间
Nginx 反向代理

大致步骤 : (点击快速跳转)

拉取镜像
镜像容器运行
配置登录账号
Nginx反向代理配置
Web管理页配置
重启docker

# 拉取镜像

docker pull artalk/artalk-go

# 镜像容器运行

docker run -d \
    --name artalk \
    -p 8088:23366 \
    -v $(pwd)/data:/data \
    --restart=always \
    artalk/artalk-go

选项说明 :

选项	说明
-d	后台运行
--name	指定容器名称
-p	指定端口 [外部端口]:[容器端口]
-v	映射目录/文件

提示

端口可以自定义

# Nginx反向代理

检测上一步的容器是否正在运行

# 查看正在运行的容器相关信息
docker ps -a
# 查看容器端口是否开放 填下 容器名/容器id
docker port {name/id}

检查无误后进行配置反向代理

配置Nginx (注意自己的nginx根路径 , 可能和我的不同)
```
vim /etc/nginx/conf.d/comment.bozhu12.cc
```

粘贴以下配置 含SSL证书

server {
    listen 80;
    listen 443 ssl;
    listen [::]:80;
    listen [::]:443 ssl;
	
    # 外部访问的域名
    server_name comment.bozhu12.cc;

    ssl_certificate /etc/nginx/ssl/comment.bozhu12.cc.pem;
    ssl_certificate_key /etc/nginx/ssl/comment.bozhu12.cc.key;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_set_header Host $host;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
        proxy_pass http://localhost:8088;
    }
}

无SSL证书

server {
    listen 80;
    listen [::]:80;
	
    # 外部访问的域名
    server_name comment.bozhu12.cc;

    location / {
        proxy_set_header Host $host;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
        proxy_pass http://localhost:8088;
    }
}

注意

80是 http访问 / 443是 https访问
防火墙需要开放 80/443 端口 , 外部访问需要
有些平台并非采用防火墙 , 则是需要开放安全组
如果是个人的服务器 , 供应商必然会屏蔽 80/443 端口 , 因此配置需要添加端口

# 配置登录账号

通过管理员创建账户

docker exec -it artalk artalk admin

根据提示填写账号/密码

# Web管理页配置

有些人会倾向于在 docker 映射的 /data中更改配置 , 为了更直观的更改配置 , 我选择了Web进行配置

如果上面的配置没有问题 , 那么我们可以通过 comment.bozhu12.cc 访问到后台进行配置

提示

根据Nginx配置的不同 , 会有所差异!!!

关键配置 : (个人建议)

配置项	值
语言 (最新版默认英文)	zh-CN
可信域名(一个测试 , 一个发布)	http://localhost:8080 https://www.bozhu12.cc
前端配置->头像 (国内最好头像镜像平台)	https://cravatar.cn/avatar/
SSL 配置 (可选)	配置 .pem 和 .key 文件即可

其他配置自行细品

# 重启docker

必不可少的一个重要步骤 , 前面所有在Web配置中 , 不会立马生效 , 需要重启docker容器才能生效

docker restart artalk

# 前端

官方文档配置 : 点击更多配置 (opens new window)

大致步骤 :

安装评论插件

npm install --save vuepress-plugin-vdoing-comment --registry=https://registry.npmmirror.com

配置评论插件 , 在自己的 vdoing 工程项目中，插件配置可能在 :

docs/.vuepress/config.ts
docs/.vuepress/config/plugins.js

但下面的配置一定相同 :

plugins: <UserPlugins>[
    // 评论
    [
        'vuepress-plugin-vdoing-comment',
        {
            choosen: 'artalk',
            options: {
                server: 'https://comment.bozhu12.cc', // 评论后端（必填）
                site: '柏竹', // 站点名（必填）
                versionCheck: false, // 关闭版本检查（可选）
                // disableEmotion: false, // 是否禁用表情（可选）
                // disablePicture: true, // 是否禁用图片（可选）
                // disablePreview: false // 是否禁用预览（可选）
            }
        }
    ],

],

样式配置 , 兼容主题 docs/.vuepress/styles/palette.styl 最后添加如下内容进行优化：

// artalk 评论框 适配暗黑模式
.theme-mode-dark #vuepress-plugin-vdoing-comment {
  --at-color-bg: --bodyBg;
  color: #ffffff;
  --at-color-font: #ffffff;
  --at-color-bg-transl: --bodyBg;
  --at-color-bg-grey: #373a40
}
.theme-mode-dark #vuepress-plugin-vdoing-comment .atk-editor-plug-emoticons > .atk-grp-switcher > span:hover, .atk-editor-plug-emoticons > .atk-grp-switcher > span.active {
  background: var(--at-color-bg-grey);
}
.theme-mode-dark #vuepress-plugin-vdoing-comment .atk-editor-plug-emoticons > .atk-grp-switcher {
  background: var(--at-color-bg-grey)
}

以上内容仅限做引导说明 , 如有问题评论区讨论吧

#评论功能

← Vdoing主题建站 Markdown语法拓展→