Artalk 简洁的自托管评论系统安装教程

Artalk 是一款简洁的自托管评论系统，你可以在服务器上轻松部署并置入前端页面中。

来到你的博客，或是任意位置，放置 Artalk 评论框，让页面具备丰富的社会化功能。

功能亮点#

轻量设计
前端采用 TypeScript (Vanilla JS)，轻量级，无冗余依赖，仅 ~30KB (gzipped)。
后端采用 Golang 重制 (Artalk v2)，跨平台，体积小巧，五脏俱全，快速部署。
“麻雀虽小，五脏俱全”
Markdown 语法 + 代码高亮
通知中心 - 站内：侧边栏 + 红点标记
多形式推送 - 站外：邮件、TG、钉钉、飞书 + 异步执行
评论审核：折叠 / 反垃圾 / 频率限制 / 滑动验证
多站点：共用同一个后端程序，多站点集中化管理
表情包：支持 OwO 格式 + 动态加载
Artrans：评论数据快速迁移 (导入 / 导出) 工具
评论投票 / 身份徽章 / 密码验证 / 说说模式
评论盖楼 / 评论分页 / 滚动加载 / 实时预览
评论排序 / 评论置顶 / 评论防丢 / 自动填充
图片上传 / 页面管理 / 站点隔离 / 暗黑模式
穷举不是我们的特长，更多有趣的功能期待你来探索！

Artalk 正在持续成长，创意由你发挥，价值由你赋予！

不论是 Vue、React、Svelte 的前端项目，还是 WordPress、Typecho、Hexo 等博客系统，都可以快速引入 Artalk，结合诸位的聪明才智，我们相信 Artalk 能够自如应对各种业务场景。

更多支持 / 计划的功能，详见：“README.md”。

用户体验#

我们相信优雅的设计能带来良好的用户体验，良好的用户体验能帮助项目走得更远。

「平凡而不平庸的设计」倍受专业 UI 设计师青睐的设计工具 Figma 这次在 Artalk 的重新设计中也帮了大忙。我们预先使用 Figma 设计人性化、现代化的界面，再编写前端样式使其自然融合至现代化的网站中，简约清新的界面由此诞生。此外，我们还设计了用户身份认证徽章、评论平铺 / 无限嵌套模式、评论分页等样式，同时兼顾不同尺寸的设备，在有限的空间体验无限的内容。

「崩溃就在一瞬间」对于不加优化的评论系统，用户每次评论可能需要反复输入个人信息，发生意外状况时辛苦键入的见解还可能完全丢失。要知道，成年人的崩溃只在一瞬间。为解决这些痛点，Artalk 借助浏览器缓存自动填充用户信息、自动保存评论数据，让用户以最少的成本发表见解。

「丰富站点表情，重燃评论热情」千篇一律的表情包可能容易使访客丧失评论的热情，于是 Artalk 自带一套精心挑选的滑稽表情包。除此之外，Artalk 也支持自定义图片表情。

「你所热爱的，就是你的生活？」用户体验不仅仅就访客而言，对于站点管理者，Artalk 也不乏人性化的设计。通过侧边栏集成管理控制中心，管理员用户可以方便快捷地管理名下多个站点，所有数据通过规范化 API 交流并且异步处理，减少数据处理阻塞，降低服务资源占用。针对可能出现的垃圾评论，Artalk 支持自动拦截，降低管理者工作强度，也还站点以清净。

我们希望 Artalk 不仅能实现评论系统应有的基础功能，更能成为搭建知识传播者和知识学习者交流思想桥梁的媒介，让知识不再局限于文本，帮助知识传播者创造其应有的价值。

////////////////////////////////////////////////////////////////////////////////////

Docker 部署#

推荐使用 Docker 部署，需预先安装 Docker 引擎，服务器执行命令创建容器：

1

2

3

4

5

docker run -d \

    --name artalk-go \

    -p 8080:23366 \

    -v $(pwd)/data:/data \

    artalk/artalk-go

假设域名 http://your_domain 已正确添加 DNS 记录并指向你的服务器 IP

浏览器打开 http://your_domain:8080 将出现 Artalk 后台登陆界面。

执行命令创建管理员账户：

1	`docker` `exec` `-it artalk-go artalk admin`

在你的网站引入 Artalk 程序内嵌的的前端 CSS、JS 资源并初始化：

注：将 http://your_domain:8080 改为你的服务器域名，或使用公共 CDN 资源。

<!-- CSS -->

<link href="http://your_domain:8080/dist/Artalk.css" rel="stylesheet">

<!-- JS -->

<script src="http://your_domain:8080/dist/Artalk.js"></script>

<!-- Artalk -->

<div id="Comments"></div>

<script>

new Artalk({

  el:        '#Comments',                // 绑定元素的 Selector

  pageKey:   '/post/1',                  // 固定链接 (留空自动获取)

  pageTitle: '关于引入 Artalk 的这档子事',  // 页面标题 (留空自动获取)

  server:    'http://your_domain:8080',  // 后端地址

  site:      'Artalk 的博客',             // 你的站点名

})

</script>

在评论框输入管理员的用户名和邮箱，控制台入口按钮将出现在评论框右下角位置。

在控制台，你可以根据喜好配置评论系统、将评论迁移到 Artalk。

祝贺！你已成功完成 Artalk 部署 ?

普通方式部署#

前往 GitHub Release 下载程序压缩包

提取压缩包：tar -zxvf artalk-go_版本号_系统_架构.tar.gz

运行程序 ./artalk-go server

后台运行程序 nohup ./artalk-go server

前端配置

1	`new Artalk({ server: "http://your_domain:23366" })`

其它可选操作：

“反向代理端口到 80 / 443 (Nginx, Apache)”

"持久化运作 (tmux, systemd, supervisor)"

附表：文件名释义表

文件名操作系统CPU 架构
artalk-go_linux_amd64.tar.gzLinuxx86_64
artalk-go_linux_arm64.tar.gzLinuxARM64
artalk-go_linux_arm7.tar.gzLinuxARMv7
artalk-go_windows_amd64.zipWindowsx86_64
artalk-go_darwin_arm64.tar.gzmacOSApple Silicon
artalk-go_darwin_amd64.tar.gzmacOSIntel Chip (什么狗屎)

Docker Compose 部署#

提供 docker-compose.yaml 文件可供参考：

version: "3.5"

services:

  artalk:

    container_name: artalk-go

    image: artalk/artalk-go

    ports:

      - 8080:23366

    volumes:

      - ./data:/data

在与配置文件相同的目录执行命令创建容器：

1

2

3

4

5

6

7

docker-compose up -d

一些 Docker Compose 常用命令

docker-compose restart  # 重启容器

docker-compose stop     # 暂停容器

docker-compose down     # 删除容器

docker-compose pull     # 更新镜像

docker-compose exec artalk bash # 进入容器

CDN 资源#

Artalk 最新版本

当前 Artalk 前端最新版本号为： 2.4.3

若需升级前端，请将 URL 中的版本号数字部分替换即可。

Artalk 后端程序内嵌了前端 JS、CSS 文件，使用公共 CDN 资源请注意前后端版本的兼容性。

Artalk 静态资源通过上游 CDNJS 分发，国内有许多镜像可供选择：

BootCDN (国内)

https://cdn.bootcdn.net/ajax/libs/artalk/2.4.3/Artalk.js

https://cdn.bootcdn.net/ajax/libs/artalk/2.4.3/Artalk.css

ElemeCDN (国内)

https://npm.elemecdn.com/artalk@2.4.3/dist/Artalk.js

https://npm.elemecdn.com/artalk@2.4.3/dist/Artalk.css

CDNJS

https://cdnjs.cloudflare.com/ajax/libs/artalk/2.4.3/Artalk.js

https://cdnjs.cloudflare.com/ajax/libs/artalk/2.4.3/Artalk.css

UNPKG

https://unpkg.com/artalk@2.4.3/dist/Artalk.js

https://unpkg.com/artalk@2.4.3/dist/Artalk.css

JS DELIVR

https://cdn.jsdelivr.net/npm/artalk@2.4.3/dist/Artalk.js

https://cdn.jsdelivr.net/npm/artalk@2.4.3/dist/Artalk.css

ArtalkLite#

可选择精简版 ArtalkLite：体积更小、更简约。

Node 环境#

1	`pnpm add artalk`

引入到你的项目：

1

2

3

4

5

import 'artalk/dist/Artalk.css'

import Artalk from 'artalk'

new Artalk({

  // ...

})

何时引入、何时 new？#

可以在任意位置引入 JS 和 CSS 资源，但需确保 JS 引入在执行 new Artalk({}) 前。

执行 new Artalk({ el: '#x' }) 时，需要确保 <div id="x"></div> 存在于页面当中。

本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。Mail To:718588255@qq.com

THE END

# Artalk

Artalk 简洁的自托管评论系统安装教程