remark42评论系统的安装与使用方法

1.下载最新的release版本:

wget https://github.com/umputun/remark42/releases/download/v1.9.0/remark42.linux-amd64.tar.gz -O remark42.linux-amd64.tar.gz
tar xzf remark42.linux-amd64.tar.gz remark42.linux-amd64
sudo mv remark42.linux-amd64 /usr/local/bin

2.创建remark42专属用户及其目录:

sudo useradd -r remark42
sudo mkdir -p -m 770 /var/www/remark42
sudo chown :remark42 /var/www/remark42

3.创建配置文件:

sudo vi /var/www/remark42/remark42.conf
REMARK_URL=http://remark42.moorzon.com                                   
SECRET=123123qq
SITE=xgoogle,xme
AUTH_ANON=true
EMOJI=true

其中SITE字段可以用,分隔以支持多个站点的不同ID标识,也即一个remark42实例可为多个不同的博客站点提供评论服务。

4.为remark42创建systemd service:

新建文件:/etc/systemd/system/remark42.service,内容如下:

[Unit]
Description=remark42 comment engine
After=network.target

[Service]
User=remark42
Group=remark42
EnvironmentFile=/var/www/remark42/remark42.conf
WorkingDirectory=/var/www/remark42
Restart=always
RestartSec=5
ExecStart=/usr/local/bin/remark42.linux-amd64 server

[Install]
WantedBy=multi-user.target

激活remark42服务:

sudo systemctl enable --now remark42

此时可以测试一下,访问:http://remark42.moorzon.com:8080/web/

如果能看到Demo page出现,则说明配置基本完成。

5.GitHub OAuth配置:

  1. Click on New OAuth App

  2. Set base URL:http://remark42.moorzon.com

  3. Set callback URL by appending auth/github/callback to the base RemarkURL: http://remark42.moorzon.com/auth/github/callback

  4. 将获取到的client id 和client secret添加到remark42配置文件中:

    sudo vi /var/www/remark42/remark42.conf
    
    AUTH_GITHUB_CID=7c54af028aei43e021li                                     
    AUTH_GITHUB_CSEC=ede3atyu0cf3119058baa2be9c17fb9783a54da3
    

6.以GitHub账号登录,获取GitHub Login ID(以github_开头),用来配置管理员身份:

sudo vi /var/www/remark42/remark42.conf
ADMIN_SHARED_ID=<GitHub Login ID>

7.Nginx反向代理配置:

sudo vi /etc/nginx/sites-enabled/remark42.conf
server {
    server_name remark42.moorzon.com;
    add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";

    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://127.0.0.1:8080/;
     }
}
sudo nginx -s reload

此时可以直接访问:http://remark42.moorzon.com/web/,无需再指定端口。

8.在博客中嵌入remark42评论系统:

添加如下内容到\Hugo\Sites\moorzon.com\themes\meme\layouts\partials\components\comments.html

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

<script>
  var remark_config = {
    host: "https://remark42.moorzon.com",
    site_id: 'xgoogle',
    components: ['embed'],
	
                
    max_shown_comments: 10, 
    theme: 'light', 
    
    locale: 'zh', 
    show_email_subscription: false 
  };
</script>
<script>
  (function(c) {
    for(var i = 0; i < c.length; i++){
      var d = document, s = d.createElement('script');
      s.src = remark_config.host + '/web/' +c[i] +'.js';
      s.defer = true;
      (d.head || d.body).appendChild(s);
    }
  })(remark_config.components || ['embed']);
</script>

至此,在博客文章页面就可以看到remark42评论区了。

9.自定义remark42显示样式:

为了匹配不同博客页面显示风格,我们可以自定义remark42的样式。Remark42是通过iframe来嵌入到我们博客页面的,不便直接修改它的CSS。这里采用的方法是,通过nginx反代 /web/remark.css 或者 /web/last-comments.css 来指向我们自己的CSS文件。

最好的处理方式当然是保留原css文件在一个不同的路径,然后在我们自己的CSS中可以导入原始版本,在此基础上重载我们想要改变的styles.下面是个例子可以参考:

nginx配置文件添加:

server {
    listen      80;
    server_name remark42.yourdomain.com;
    
    #...

    location = /web/remark.css {
        proxy_pass http://gatsby:8000/remark-updated.css;
    }
    
    location = /web/last-comments.css {
        proxy_pass http://gatsby:8000/last-comments-updated.css;
    }

    location /web-orig/ {
        proxy_pass http://remark42:8080/web/;
    }
}

yourdomain.com/remark-updated.css内容:

1
2
3
4
5
6
@import '/web-orig/remark.css';

/* As an example, let's remove the padding from around the Remark42 comment box. */
body {
	padding: 0;
}

yourdomain.com/last-comments-updated.css内容:

1
2
3
@import '/web-orig/last-comments.css';

/* Override whatever CSS you would like here. */

注-参考:

1.Setup a self-hosted commenting system on your blog (jaysinha.me)

2.remark42给博客加个评论功能 • 威远博客,威远工作室,Ease (scwy.net)

3.Installation | Remark42

4.Zenyet's blog | Hugo添加remark42评论系统 (yequalsx.com)

5.How to Customize Remark42 CSS via a Proxy Workaround

6.可能出现的问题1

7.可能出现的问题2

8.参考

全文完全文完2024-07-292024-07-29