artalk评论系统

首先安装artalk评论系统，本站使用docker安装

#安装镜像
docker run -d \
    --name artalk \
    -p 8080:23366 \
    -v $(pwd)/data:/data \
    -e "ATK_LOCALE=zh-CN" \
    -e "ATK_SITE_DEFAULT=your_blog_name" \
    -e "ATK_TRUSTED_DOMAINS=https://your_domain" \
    artalk/artalk-go

#创建用户
docker exec -it artalk artalk admin

反代

由于使用的是腾讯云预装系统，直接在1Panel面板的网站上设置反代

• 前端请求路径

/自定义路径/ 注意结尾要加"/"

• 后端代理地址

127.0.0.1:8081/ 注意结尾要加"/"

站点

• 站点名称

需要和artalk评论区插件设置里同步

• 站点url

博客的地址，加上协议名

头像 Gravatar

默认的镜像地址太慢，改成国内的，查看官网文档

• API 地址

https://cravatar.cn/avatar/

• API 参数

d=mp&s=240 s 代表头像尺寸，d表示无法匹配到任何头像时的默认头像

• 404：如果没有与电子邮件哈希关联的图像，则不加载任何图像，而是返回 HTTP 404（未找到文件）响应

• mp：一个简单的卡通风格的人物轮廓

• identicon：一个几何图案（随机生成）

• monsterid：具有不同颜色、面孔的“怪物”（随机生成）

• wavatar：具有不同特征和背景的人脸（随机生成）

• retro：8位色的像素人脸（随机生成）

• robohash：具有不同颜色、面部的机器人（随机生成）

• blank：透明的 PNG 图像（为方便演示，已为其添加了一个边框）

artalk评论区

主题适配 - 文章评论数

修改主题目下halo/data/themes/theme-xue/templates/module/widget/post_cards.html

<!-- 标签显示数量 -->
 <label name="commentcount"/>
  
<!-- 读取artalk评论数量 -->
  <script th:inline="javascript">
  /*<![CDATA[*/
      var list = /*[[${postItems}]]*/;
      //console.log(list);
  for(let i=0;i<list.length;i++){
    var url="/apis/halo.wenjing.xin/v1alpha1/artalk/pageKeyComments?pageKey="+list[i].status.permalink;
    //console.log(url);
    fetch(url)
       .then(res => res.json())
       .then(d => {
           //console.log(d);  
            var label= document.getElementsByName("commentcount")[i];            
            label.innerText=d.count;
          })
        .catch((err) => { console.log(err); })
  } 
  /*]]>*/
</script>

插件设置

• 站点名称

需要和artalk评论系统 站点设置里同步

• artalk 部署地址

网站地址+反代路径 需要加上协议名，注意结尾不要加"/"

• 暗黑模式适配

需要根据主题样式去修改，查看插件说明

元素类名明暗切换

• 选择器名称

body=dark