hugo添加remark42评论系统

对于静态博客，有一个很大的缺点就是没有评论系统了。。大部分的静态生成器程序都没有带评论系统的，因此第三方的评论系统层出不穷。

关于为何选择remark42?

没错，好像有很多很容易部署的评论系统，例如gitment、disqus、valine、waline等等啥的，其实一开始我是用waline的，而且很容易就搭建好了(vercel一键部署几乎😂)，但最近碰到了remark42这个茬，奈何我就是要搞定它，所以最后就是选择了它🤣。

关于它的特性可自行去github上看。

后端部署

官方文档提供了两种部署方法：docker和自己编译安装。为此我选择了比较容易的docker部署，顺便复习下docker知识。。

我的服务器环境：

  • Debian10(腾讯云HK)

  • 宝塔面板

docker配置

首先在宝塔上新建一个网站(其实这个不是那么重要，主要给个地放docker-compose.yml配置文件)，在网站根目录创建一个dcoker-compose.yml文件，点击编辑，复制以下。

version: '2'
services:
  remark42:
    image: umputun/remark42:latest
    restart: always
    container_name: "remark42"
    environment:
      - REMARK_URL=https://comment.driim.cn  # URL 指向docker的后端remark42
      - SITE=www.driim.cn                    # site ID, 这个和后面配置的前端的site_id保持一致
      - SECRET=任意密钥，自己设置          # secret key
      - AUTH_GITHUB_CID=github的oauth应用的client ID        
      - AUTH_GITHUB_CSEC=github的oauth应用的client secrets     
      - AUTH_ANON=true  # 是否开启匿名用户评论
      - AUTH_EMAIL_ENABLE=true # 是否开启邮件用户评论
      - AUTH_EMAIL_FROM=你的邮件 # 发送确认消息的smtp邮件
      - SMTP_HOST=smtp.qq.com # smtp服务器提供者
      - SMTP_PORT=465 # 之前踩坑gmail和outlook的默认是587,协议STARTTLS，而后面看issue发现居然是
                                    # 不支持的 :(
      - SMTP_USERNAME=配置SMTP的邮箱,一般是你的邮箱
      - SMTP_PASSWORD=设置SMTP的邮箱密码(一般是)
      - SMTP_TLS=true # 上面的一致，只支持TLS
      - NOTIFY_USERS=email # 以什么方式通知用户，可选值，除了email还有telegram，可自行去项目上看
      - NOTIFY_ADMINS=email # 以什么方式通知管理员，同上
      - AUTH_EMAIL_SUBJ=验证你的邮箱并获得token  # 邮件通知自定义信息
      - ADMIN_SHARED_ID=以GitHub或者其他形式登陆时会有一串id值 # 这个用于设置管理员
    volumes:
      - ./var:/srv/var       # 数据存储位置
    ports:
      - "8080:8080" # 端口映射，remark42容器中默认端口为8080，我的80端口用了，所以使用8080

关于smtp的服务提供商是否支持TLS465端口可以到这里查看。

nginx代理设置

建议提前配置好https，不使用https会有奇奇怪怪的毛病。

limit_conn perip 10;
location / {
    proxy_redirect          off;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        Host $http_host;
    proxy_pass              http://localhost:8080/;
}

测试后端

利用终端连接到服务器，切换目录到开头的网站根目录，复制下面命令执行。

#拉取镜像并部署
docker-compose pull && docker-compose up -d

通过打开demo页面 REMARK_URL/web (REMARK_URL就是docker-compose上设置的).效果如下：

remark42_demo.png

不过这时候还不能进行评论，主要是因为demo页面配置的site_id是remark，而上面我自己设置的不是。

前端配置

在想要添加remark42评论的页面中(我的hugo主题是在single页面中)的底部添加以下js代码。

<script>
    //以下代码是为了自适应系统的深色模式
        var body = document.querySelector('#remark42 body');
    var theme = 'light';
    if ('matchMedia' in window) {
        var mq = window.matchMedia('(prefers-color-scheme: dark)');
        if (mq.matches) {
            body.classList.add('document_theme_dark');
        }
        function getTheme() {
            return mq.matches ? 'dark' : 'light';
        }
        theme = getTheme();
        mq.addListener(function () {
            REMARK42.changeTheme(getTheme());
        });
    }
    var remark_config = {
        site_id: 'www.driim.cn', // 同docker环境变量的SITE
        host: 'https://comment.driim.cn', //指向remark42服务器的URL，同上docker配置文件
        url: window.location.href,
        components: ['embed'],
        theme: theme, //自适应深色模式
        locale: "zh" //设置中文
        //show_email_subscription: false, 这个是显示订阅email通知的
    };
        //下面为默认配置
    !(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)
<script>

测试效果

remarktest.png

这就是简单的配置，后续邮箱订阅能用时会再更新，其他的配置可以到remark42的GitHub项目上查看，总体上文档还是比较详细的，但有些文档是隐藏在源文件里面。

后续：

订阅评论的配置生效了。而想修改嵌入的web的样式或整体结构，可以自行进入已经部署的容器中进行修改。

进入容器命令：

remark42_inside.png

docker exec -it 容器id或名字 sh

容器内部：

Reference：remark42