VuePass评论功能转载
# 前言
该主题配置实战经历 , 也是给了自己在当中学习的经历作为记录 , 虽说是转载 , 但自己也在当中踩了不少坑
以下是采用 Artalk自托管评论系统 来配置 vuepress-theme-vdoing (opens new window) 主题
官方文档 : https://artalk.js.org (opens new window)
转载文章 : https://wiki.eryajf.net (opens new window)
# 后端
后端基于 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) }
以上内容仅限做引导说明 , 如有问题评论区讨论吧