跳到主要内容

Docusaurus配置评论系统artalk

· 阅读需 3 分钟

Artalk 是一款简洁的自托管评论系统.

Artalk的应用场景

丰富博客的社会化功能

功能亮点:

  • 轻量设计
  • 麻雀虽小,五脏俱全
    • Markdown语法 + 代码高亮
    • 通知中心支持站内:侧边栏 + 红点标记
    • 表情包支持 OwO 格式 + 动态加载
    • 等等

部署服务端

自主可控选择自己安装服务端哈。支持多种安装方式. 这里我们以k8s为例, 其实服务比较简单, 在k8s跑起来也比较简单.

k8s yaml
artalk.yaml
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
labels:
k8s.ysicing.me/name: artalk
name: artalk
spec:
# storageClassName: tkecfs
accessModes:
- ReadWriteMany
resources:
requests:
storage: 1Gi
---
apiVersion: apps/v1
kind: Deployment
metadata:
labels:
k8s.ysicing.me/name: artalk
name: artalk
spec:
replicas: 1
selector:
matchLabels:
k8s.ysicing.me/name: artalk
strategy:
rollingUpdate:
maxSurge: 25%
maxUnavailable: 0%
type: RollingUpdate
template:
metadata:
labels:
k8s.ysicing.me/name: artalk
spec:
containers:
- image: artalk/artalk-go
imagePullPolicy: Always
name: artalk
resources:
limits:
cpu: 150m
memory: 256Mi
requests:
cpu: 50m
memory: 128Mi
volumeMounts:
- mountPath: /data
name: artalk
restartPolicy: Always
volumes:
- name: artalk
persistentVolumeClaim:
claimName: artalk
---
apiVersion: v1
kind: Service
metadata:
labels:
k8s.ysicing.me/name: artalk
name: artalk
spec:
ports:
- name: http
port: 23366
protocol: TCP
targetPort: 23366
selector:
k8s.ysicing.me/name: artalk
type: ClusterIP
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
labels:
k8s.ysicing.me/name: artalk
name: artalk
spec:
rules:
- host: artalk.ysicing.cloud
http:
paths:
- backend:
service:
name: artalk
port:
name: http
path: /
pathType: ImplementationSpecific

将上述文件保存为artalk.yaml并apply到集群

kubectl apply -f artalk.yaml

配置管理员

进入容器创建管理员:

kubectl exec -it pods/artalk-6bcf66b5cf-77569  -- bash
# 交换完成信息添加
artalk admin
# 登录后台访问添加站点

修改配置文件

直接修改配置文件, 按需修改配置文件, 细节可以参考 artalk官方指南

s 注意事项

需要禁用版本检查,不然前端会报错

需要检查这个参数是否为false
versionCheck: false`

Docusaurus集成

yarn add artalk

评论支持

由于我的博客主题从愧怍那抄过来的,只需要将giscus换成artalk即可

artalk代码
import React, { useEffect }  from 'react'
import 'artalk/dist/Artalk.css'
import BrowserOnly from '@docusaurus/BrowserOnly';
export default function Comment(): JSX.Element {
return (
<BrowserOnly fallback={<div>Loading Comments...</div>}>
{() => {
const Artalk = require('artalk').default;
useEffect(() => {
Artalk.init({
el: '#comment',
pageKey: `${window.location.pathname}`,
pageTitle: `${window.document.title}`,
server: 'https://artalk.ysicing.cloud/',
site: '缘生笔记',
});
});
return <div id="comment" className="artalk-comments" />;
}}
</BrowserOnly>
);
}

问题

备注

评论框需要刷新页面才能看到

最后

欢迎大家评论测试哈哈哈

Loading Comments...