使用remark42为静态网站添加评论功能

类别：信息技术作者：ATScore 发布日期：2024年9月12日浏览人数：人

alt text

remark42是一个自托管的评论服务

为什么选择remark42

本站是一个“几乎”全静态的个人博客站点。因为服务器的性能实在不咋地。静态网站是无状态的，服务端无法处理客户端提交的数据，这包括评论功能。

一个比较好的选择，是引用外部服务来实现评论功能。以下页面都对该类型的评论服务做了大致的调研：

调研基本都提到了Disque、Valine等服务，以及通过Github来实现评论功能。不过更吸引我的是remark42，这个支持自托管部署服务。能够自托管，意味着数据能够一定程度掌握在自己手里。不必担心外部服务提供方跑路后数据全部丢失的情况。1

部署过程

这是它的文档页：https://remark42.com/docs/getting-started/installation/

docker 部署

使用官方的建议配置做说明。

container_name，随便取名字
hostname，随便取名字
ports，注意做好选择，需要设置
volumes，映射文件，自己设，玩docker的应该都会

环境变量

REMARK_URL，这是你部署的remark42服务的URL，访问REMARK_URL/web可以进行测试。
AUTH_XXX，全都不要，我觉得匿名评论就可以了。remark42似乎自带垃圾评论过滤功能了。
SECRET，随便起
ADMIN_PASSWORD，要注释掉
AUTH_ANON，如果你要匿名，这一项设为true
SITE，请设为remark，必要。如果设为别的，好像服务用不了。

version: "2"

services:
  remark:
    # remove the next line in case you want to use this docker-compose separately
    # as otherwise it would complain for absence of Dockerfile
    build: .
    image: umputun/remark42:latest
    container_name: "remark42"
    hostname: "remark42"
    restart: always

    logging:
      driver: json-file
      options:
        max-size: "10m"
        max-file: "5"

    # uncomment to expose directly (no proxy)
    #ports:
    #  - "80:8080"
    #  - "443:8443"

    environment:
      - REMARK_URL
      - SECRET
      - DEBUG=true
      - AUTH_GOOGLE_CID
      - AUTH_GOOGLE_CSEC
      - AUTH_GITHUB_CID
      - AUTH_GITHUB_CSEC
      - AUTH_FACEBOOK_CID
      - AUTH_FACEBOOK_CSEC
      - AUTH_DISQUS_CID
      - AUTH_DISQUS_CSEC
      # Enable it only for the initial comment import or for manual backups.
      # Do not leave the server running with the ADMIN_PASSWD set if you don't have an intention
      # to keep creating backups manually!
      # - ADMIN_PASSWD=<your secret password>
    volumes:
      - ./var:/srv/var

前端使用

在页面中添加以下javascript代码。第一段应该是配置，第二段则是初始化代码。

var remark_config = {
            host: 'https://xxx.xxx.xxx',    //同docker里的 REMARK_URL
            site_id:'remark',               //同docker里的 SITE
            max_shown_comments: 100,
            theme: 'light',                
            locale: 'zh',                
            simple_view: true,
            no_footer: false
        };

同时再添加以下代码，以下代码我手动加了换行，实际使用要合为一行。

!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",
d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,
r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);

最后，在你想要放置评论框的地方使用以下代码

<div id="remark42"></div>

评论通知

登陆通知功能后，可以使用RSS订阅，在RSS上接收评论通知。这功能太赞了。另外，remark42同样也提供了通知(notification)功能，包括邮件通知和telegram机器人通知。但我觉得最好的方式是RSS。

效果

alt text

效果很不错。实际使用速度还可以接受，挺满意。感谢remark42的杰出工作。