Artalk评论系统部署教程

本文为付费文章，在购买前，请先阅读 https://cloudlark.cn/archives/d740524e-0904-49b4-aa5e-ab563874e6cb 食用需求。

一、本地部署Artalk

如需替换为MySQL数据库存放数据，或者需开启Redis缓存，请先提前准备好这些环境。

编辑 compose 文件，如下：

networks:
    1panel-network:
        external: true
services:
    artalk:
        container_name: ${CONTAINER_NAME}
        deploy:
            resources:
                limits:
                    cpus: ${CPUS}
                    memory: ${MEMORY_LIMIT}
        environment:
            - ATK_SITE_DEFAULT=${ATK_SITE_DEFAULT}
            - ATK_SITE_URL=${ATK_SITE_URL}
            - ATK_LOCALE=${ATK_LOCALE}
            - TZ=${TZ}
            # 【以下配置均为可选项】
            # 使用MySQL替代默认SQLite
            - ATK_DB_TYPE=mysql
            - ATK_DB_HOST=mysql
            - ATK_DB_NAME=$(数据库名称)
            - ATK_DB_USER=$(数据库账户)
            - ATK_DB_PASSWORD=$(数据库密码)
            # 开启Redis缓存
            - ATK_CACHE_ENABLED=true
            - ATK_CACHE_WARM_UP=true
            - ATK_CACHE_TYPE=redis
            - ATK_CACHE_REDIS_DB=2
            - ATK_CACHE_SERVER=$(服务器地址):6379
            - ATK_CACHE_REDIS_PASSWORD=$(Redis数据库密码)
        image: artalk/artalk-go:2.9
        labels:
            createdBy: Apps
        networks:
            - 1panel-network
        ports:
            - ${HOST_IP}:${PANEL_APP_PORT_HTTP}:23366
        restart: always
        volumes:
            - ./data:/data

安装完毕后，打开Artalk容器的终端，并输入命令 artalk admin 以注册账号。

二、开启HTTPS

开启HTTPS服务需要自备域名。

SSL证书推荐到1Panel申请，具体如下：

申请Acme账户：
- 1panel面板 -> 网站 -> 证书 -> Acem账户 -> 创建（输入邮箱地址，其它保持默认）
申请证书：
- 需先在服务器配置好DNS解析，以腾讯云为例：
- 1panel面板 -> 网站 -> 证书 -> 申请证书

为网站配置HTTPS：1panel面板 -> 网站 -> 网站 -> 选择刚刚创建的网站，点击配置 -> HTTPS

至此，基本配置已经完成，现在你可通过访问 https://你的Artalk域名 来修改你的配置。当然，你也可在操作完第四节后，在评论区选择输入邮箱登录Artalk来修改更多配置。

三、修改前端代码

①修改 themes/theme-hao/templates/assets/js/halo.js

if (GLOBAL_CONFIG.source.comments.use == 'Artalk') {
    // 获取配置参数
    const artalkConfig = GLOBAL_CONFIG.source.artalk;
    const type = 'latest_comments';

    // 构建URL
    const statsURL = new URL(`${artalkConfig.artalkUrl}api/v2/stats/${type}`);

    // 添加查询参数
    statsURL.searchParams.append('site_name', artalkConfig.siteName);
    statsURL.searchParams.append('limit', '100');

    // 配置请求头
    const fetchOptions = {
        method: 'GET', // 改为GET请求
        headers: {
            'Origin': window.location.origin
        }
    };
    fetch(statsURL, fetchOptions)
        .then(response => response.json())
        .then(({ data }) => {
            const n = [];
            data.forEach(e => {
                n.push({
                    avatar: `https://weavatar.com/avatar/${e.email_encrypted}?sha256=1&d=mp&s=240`,
                    content: `${e.nick}: ${btf.changeContent(e.content_marked)}`,
                    href: `${e.page_url}#atk-comment-${e.id}`
                });
            });
                        
        e.batchSend(n, true);
        saveToLocal.set("danmu", n, 0.02);
    });
}

②修改 themes/theme-hao/templates/modules/comment/Artalk.html

const getComment = () => {
    const serverUrl = "[(${theme.config.comments.artalks.server})]" + '/api/v2/stats';
    const type = 'latest_comments'; // 明确请求类型
    const siteName = GLOBAL_CONFIG.source.artalk.siteName;
              
    // 构建完整请求URL
    const url = new URL(`${serverUrl}/${type}`);
    url.search = new URLSearchParams({
        site_name: siteName,
        limit: '20',
        // page_keys: 'page1,page2' // 按需启用
    });
              
    // 发起GET请求
    fetch(url, {
        method: 'GET',
        headers: {
            'Origin': window.location.origin
        }
    })
    .then(response => {
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            return response.json();
        })
    .then(data => {
        const artalk = data.data.map(e => ({
            avatar: `https://weavatar.com/avatar/${e.email_encrypted}?sha256=1&d=mp&s=240`,
            content: btf.changeContent(e.content_marked, 150),
            nick: e.nick,
            url: `${e.page_url}#atk-comment-${e.id}`,
            date: e.date,
        }));
        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), 10/(60*24));
        generateHtml(artalk);
        document.querySelector('#newcomm') && necommHtml(artalk);
    })
    .catch(e => {
        const $dom = document.querySelector('#card-newest-comments .aside-list')
        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
    });
}

③修改 themes/theme-hao/templates/new_comment.html

if (isArtalk) {
    //获取配置参数
    const artalkConfig = GLOBAL_CONFIG.source.artalk;
    const type = 'latest_comments';
    // 构建URL
    const statsURL = new URL(`${artalkConfig.artalkUrl}api/v2/stats/${type}`);
    // 添加查询参数
    statsURL.searchParams.append('site_name', artalkConfig.siteName);
    statsURL.searchParams.append('limit', '100');
    const fetchOptions = {
        method: 'GET',
        headers: {
            'Origin': window.location.origin
        }
    }
    fetch(statsURL, fetchOptions)
    .then(res=> res.json())
    .then(({ data }) => {
        const artalk = [];
        data.forEach(e => {
            artalk.push({
                avatar: `https://weavatar.com/avatar/${e.email_encrypted}?sha256=1&d=mp&s=240`,
                comment: changeContents(e.content_marked),
                nick: e.nick,
                url: e.page_key,
                barrageBlogger: e.email_encrypted === config.mailMd5,
                id: '#atk-comment-' + e.id,
                created: e.date
            });
        });
        renderer(artalk)
    }).catch((err) => { console.log(err); })
}

④分别删除 themes/theme-hao/templates/assets/libs/artalk下的Artalk.js、Artalk.css，然后从 https://你的artalk域名/disk/Artalk.js、https://你的artalk域名/disk/Artalk.css 下载上传至此目录。

四、修改主题设置

①打开 Halo控制面板 -> 主题 -> 评论 -> 选择Artalk评论系统

②留言弹幕配置的评论 - 博主邮箱MD5值获取方式：访问以下网址，密文输入自己的邮箱（如：xxx@163.com）

https://www.cmd5.com

将获取的md5查询结果第一个复制到评论 - 博主邮箱MD5值一栏。

至此部署教程至此结束，如您还需要修改跟博主一样的评论样式或者需要配置图床，以及支持数学公式，可接着往下看。

五、评论系统样式

声明：该样式参照的是大佬 artalk评论区美化｜webjing 的样式

序号	美化内容	序号	美化内容
1	调整表情包内表情间的间距	2	调整表情、图片上传、预览之间的显示样式
3	给评论和回复区域加入边框	4	美化登录时的输入框
5	优化评论区回复内容	6	优化评论内容图片
7	优化评论内容链接	8	美化代码展示区域
9	美化时间、徽标、浏览器、操作系统标签	10	美化徽章显示

在 theme-hao 主题的 themes/theme-hao/templates/assets/zhheo/custom.css 后边加入如下内容：

/*artalk 样式修改*/
[data-theme=dark] .atk-comment-wrap {
    border: 1px solid #3d3d3f !important;
    border-radius: 12px !important;
    margin-bottom: .5rem !important;
    background-color: #1b1c20;
}
.atk-comment-wrap {
    border: 1px solid #e3e8f7 !important;
    border-radius: 12px !important;
    margin-bottom: .5rem !important;
}
.atk-grp-switcher span{
    padding: 0 .6rem !important;
}
[data-theme=dark] .atk-main-editor .atk-header input{
    border-radius: 8px;
    border: 1px solid #3d3d3f;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}
.atk-main-editor .atk-header input{
    border-radius: 8px;
    border: 1px solid #3d3d3f;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}
[data-theme=light] .atk-main-editor .atk-header input{
    border-radius: 8px;
    border: 1px solid #e3e8f7;;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}

.atk-comment>.atk-main>.atk-body>.atk-reply-to{
    border: 1px solid var(--at-color-border) !important;
    border-radius: 8px;
}
.atk-comment>.atk-main>.atk-header .atk-date{
    background: var(--heo-secondbg);
    border: var(--style-border-always);
    padding: 0 8px ;
    border-radius: 8px;
    margin-right: 4px !important;
    color: var(--at-color-meta) !important;
    display: inline !important;
}

.atk-comment>.atk-main>.atk-header .atk-ua-wrap .ua-browser,.ua-os, .atk-region-badge{
    background: var(--heo-secondbg) !important;
    border: var(--style-border-always) !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    margin-right: 4px !important;
    color: var(--at-color-meta) !important;
    display: inline !important;
}
.atk-comment>.atk-main>.atk-header .atk-badge{
    border: var(--style-border-always) !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    margin-right: 4px !important;
}
.artalk pre code {
    background: var(--heo-secondbg) !important;
    border-radius: 12px;
    border: var(--style-border-always);
}
.atk-comment-children>.atk-comment-wrap>.atk-comment {
    padding: 6px !important;
}
.atk-comment>.atk-main>.atk-body>.atk-content a:not(.fancybox){
    background: var(--heo-secondbg);
    border: var(--style-border-always);
    padding: 0 8px;
    border-radius: 8px;
    display: inline;
}
.atk-comment>.atk-main>.atk-body>.atk-content a:not(.fancybox)::after{
    content: " 🔗";
}
.atk-comment>.atk-main>.atk-body>.atk-content img{
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

六、数学公式插件【可选】

在 themes/theme-hao/templates/modules/comment/Artalk.html 中新增如下

<div class="js-pjax">
    <!-- KaTeX核心库 -->
    <link rel="stylesheet" href="https://unpkg.com/katex@0.16.7/dist/katex.min.css" />
    <script src="https://unpkg.com/katex@0.16.7/dist/katex.min.js"></script>
    <!-- Artalk插件依赖KaTeX，需先加载 -->
    <script src="https://unpkg.com/@artalk/plugin-katex@0.2.4/dist/artalk-plugin-katex.js"></script>
    <script th:src="${assets_link + '/js/comment/artalk.js'}"></script>
    <input type="hidden" name="page-type" id="page-type" value="album">
</div>

随后，在评论区输入以下代码，并使用markdown预览测试是否生效。

$$
P(A|B_1, B_2, \ldots, B_n) = \frac{P(B_1, B_2, \ldots, B_n|A) \cdot P(A)}{P(B_1, B_2, \ldots, B_n)}
$$

七、Upgit图片上传【可选】

这里以兰空图床为例

八、部署常见问题

执行完操作后，没有效果？
1. 重建 Halo 应用，然后清理反向代理缓存；
2. 清除浏览器缓存，推荐使用无痕浏览；
3. 考虑是否版本不一致，配置有变更。
Artalk版本不一致造成错误，如何解决？
1. 建议自行参照https://artalk.js.org/；
2. 代码及操作借鉴博主的来做调整。

最后，感谢您对本站的关注和支持，希望该文章对您有所帮助！

更多关于 Hao 主题的深度定制和修改，您可以访问以下链接进行了解。

https://cloudlark.cn/archives/d740524e-0904-49b4-aa5e-ab563874e6cb