乐趣区

关于hexo:能动手绝不多说开源评论系统remark42上手指南

jiezi

能动收不多说

开源评论零碎 remark42 上手指南

前言

写博客嘛，

谁不喜爱本人倒腾一下呢。

从自建零碎到 Github Page，

从 Jekyll 到 Hexo，

年老的时候谁不喜爱多折腾折腾呢。

年纪稍稍长了一下之后，最初我本人还是选了 Hexo 间接做动态博客生成，

联合一下 Gitlab CI 推代码之后主动构建之后更新到本人的服务器了。

起初又基于“多说”间接反对了博客内容评论，

再起初，多说倒下了，评论性能就始终没有保护了。

前阵子因为某些需要，对市面上局部评论零碎做了一次调研，

这时候发现其实大家都做了好多轮子了，近期空进去了终于能够再玩玩了。

开源评论零碎调研

调研前提：

  • 开源，协定敌对，可商用
  • 我的项目代码“失常”（切实不太想看 Ruby/PHP），保护踊跃
  • 部署简略，二开不便

上面间接扔了上次的调研后果进去。

vkuznecovas/mouthful

  • Mouthful is a self-hosted alternative to Disqus https://mouthful.dizzy.zone/
  • Golang 编写，反对 MySQL、PG、SQLIte，反对评论审核
  • 保护状态：2018 年之后没看到更新了
    Features
  • Multiple database support(sqlite, mysql, postgres, dynamodb)
  • Moderation with an administration panel
  • Server side caching to prevent excessive database calls
  • Rate limiting
  • Honeypot feature, to prevent bots from posting comments
  • Migrations from existing commenting engines(isso, disqus)
  • Configuration – most of the features can be turned on or off, as well as customized to your preferences.
  • Admin login through third parties such as facebook and twitter, and 35 more.
  • Dumping comments out, and importing an old dump.

schn4ck/schnack

  • Simple self-hosted node app for Disqus-like drop-in commenting on static websites https://schnack.cool/
  • Node js 编写, SQLite, 没看到其余数据库的反对
  • 保护状态：最初一次更新是 15 个月前
    Features
  • Tiny! It takes only ~8 KB!!! to embed Schnack.
  • Open source and self-hosted.
  • Ad-free and Tracking-free. Schnack will not disturb your users.
  • It’s simpy to moderate, with a minimal and slick UI to allow/reject comments or trust/block users.
  • webpush protocol to notify the site owner about new comments awaiting for moderation.
  • Third party providers for authentication like Github, Twitter, Google and Facebook. Users are not required to register a new account on your system and you don’t need to manage a user management system.

adtac/commento

  • A fast, bloat-free comments platform (Github mirror) https://commento.io
  • golang 编写，反对 PG
  • 保护状态：两个月还在更新，反对本地部署
  • https://docs.commento.io/
    What features does Commento have?
    Commento comes with a lot of useful features out-of-the-box: rich text support, upvotes and downvotes, automatic spam detection, moderation tools, sticky comments, thread locking, OAuth login, email notifications, and more!

posativ/isso

  • a Disqus alternative https://posativ.org/isso/
  • Python，SQLIte，引入了 ORM 组件然而临时没看到其余数据库的反对
  • Admin panel to moderate comments
  • 保护状态：沉闷，几天前还在更新

Isso – Ich schrei sonst – is a lightweight commenting server written in Python and JavaScript. It aims to be a drop-in replacement for Disqus.

umputun/remark42

  • comment engine https://remark42.com
  • Golang + SQLIte + 反对 Admin
  • 保护状态：沉闷，几天前还在更新
    Remark42 is a self-hosted, lightweight, and simple (yet functional) comment engine, which doesn’t spy on users. It can be embedded into blogs, articles or any other place where readers add comments.
  • Social login via Google, Twitter, Facebook, GitHub and Yandex
  • Login via email
  • Optional anonymous access
  • Multi-level nested comments with both tree and plain presentations
  • Import from Disqus and WordPress
  • Markdown support with friendly formatter toolbar
  • Moderator can remove comments and block users
  • Voting, pinning and verification system
  • Sortable comments
  • Images upload with drag-and-drop
  • Extractor for recent comments, cross-post
  • RSS for all comments and each post
  • Telegram and email notifications
  • Export data to json with automatic backups
  • No external databases, everything embedded in a single data file
  • Fully dockerized and can be deployed in a single command
  • Self-contained executable can be deployed directly to Linux, Windows and MacOS
  • Clean, lightweight and customizable UI with white and dark themes
  • Multi-site mode from a single instance
  • Integration with automatic ssl (direct and via nginx-le)
  • Privacy focused

jacobwb/hashover

  • Free and Open Source PHP Comment System http://tildehash.com/?page=ha…
  • PHP
  • 保护状态：九个月前

开始实际

调研搞完之后，停了一阵子，最近把我的项目扔给共事做进一步 demo 搭建，

共事花了点时候搭了一下 demo 和看了代码，最初在 commento 和 remark42 中“犹豫了”

最初比拟了代码构造和二次开发老本，抉择了 remark42

所以，我这边最初也应用 remark42 间接搭了本人的评论零碎。

开始“搞事”

remark42

因为文档写得切实太好了，部署也没遇到什么奇怪问题，

部署服务端这一步真的跳过了，有奇怪的问题须要的敌人自行发问吧。

Hexo next 集成 remark42

这一段是须要写写的。

看完了文档的敌人应该晓得，

在某个页面集成评论只须要加上面这些代码。

页面插入 script

<script>
  var remark_config = {
    host: "REMARK_URL", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
    site_id: "YOUR_SITE_ID",
    components: ["embed"], // optional param; which components to load. default to ["embed"]
    // to load all components define components as ['embed', 'last-comments', 'counter']
    // available component are:
    //     - 'embed': basic comments widget
    //     - 'last-comments': last comments widget, see `Last Comments` section below
    //     - 'counter': counter widget, see `Counter` section below
    url: "PAGE_URL", // optional param; if it isn't defined
    // `window.location.origin + window.location.pathname` will be used,
    //
    // Note that if you use query parameters as significant part of url
    // (the one that actually changes content on page)
    // you will have to configure url manually to keep query params, as
    // `window.location.origin + window.location.pathname` doesn't contain query params and
    // hash. For example default url for `https://example/com/example-post?id=1#hash`
    // would be `https://example/com/example-post`.
    //
    // The problem with query params is that they often contain useless params added by
    // various trackers (utm params) and doesn't have defined order, so Remark treats differently
    // all this examples:
    // https://example.com/?postid=1&date=2007-02-11
    // https://example.com/?date=2007-02-11&postid=1
    // https://example.com/?date=2007-02-11&postid=1&utm_source=google
    //
    // If you deal with query parameters make sure you pass only significant part of it
    // in well defined order
    max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
    theme: "dark", // optional param; if it isn't defined default value ('light') will be used
    page_title: "Moving to Remark42", // optional param; if it isn't defined `document.title` will be used
    locale: "en", // set up locale and language, if it isn't defined default value ('en') will be used
  };

  (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>

页面插入评论框 

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

那么问题来了，在 hexo 的 next 主题外面怎么做呢？

答案是：必定是抄代码啊！！！

hexo next 主题

首先晓得（鬼晓得啊），next 主题个别在我的项目 themes/next 门路，

themes/next/layout 这个文件夹寄存了布局文件，其中_layout.swig 是一个重要的全局布局文件。

所以，显著是批改_layout.swig 引入下面的 script 代码啦。

看了一眼_layout.swig 的代码, 底部根本是 include 引入同级的 swig 文件。

  {% include '_scripts/boostrap.swig' %}

  {% include 'remark42.swig' %}

  {% include '_third-party/comments/index.swig' %}
  {% include '_third-party/search/index.swig' %}

显著，咱们也能够加一个 swig，而后在下面引入一下。

新建 remark42.swig，贴入 script 代码 


<script>
  var remark_config = {
    host: "你部署的 remark42 服务", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
    site_id: '你的站点 Id, 部署的时候指定的',
    components: ['embed'], // optional param; which components to load. default to ["embed"]
                           // to load all components define components as ['embed', 'last-comments', 'counter']
                           // available component are:
                           //     - 'embed': basic comments widget
                           //     - 'last-comments': last comments widget, see `Last Comments` section below
                           //     - 'counter': counter widget, see `Counter` section below
    url: window.location.origin + window.location.pathname, // optional param; if it isn't defined
                     // `window.location.origin + window.location.pathname` will be used,
                     //
                     // Note that if you use query parameters as significant part of url
                     // (the one that actually changes content on page)
                     // you will have to configure url manually to keep query params, as
                     // `window.location.origin + window.location.pathname` doesn't contain query params and
                     // hash. For example default url for `https://example/com/example-post?id=1#hash`
                     // would be `https://example/com/example-post`.
                     //
                     // The problem with query params is that they often contain useless params added by
                     // various trackers (utm params) and doesn't have defined order, so Remark treats differently
                     // all this examples:
                     // https://example.com/?postid=1&date=2007-02-11
                     // https://example.com/?date=2007-02-11&postid=1
                     // https://example.com/?date=2007-02-11&postid=1&utm_source=google
                     //
                     // If you deal with query parameters make sure you pass only significant part of it
                     // in well defined order
    max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
    theme: 'dark', // optional param; if it isn't defined default value ('light') will be used
    page_title: 'Moving to Remark42', // optional param; if it isn't defined `document.title` will be used
    locale: 'en' // set up locale and language, if it isn't defined default value ('en') will be used
  };

  (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>

layout.swig 增加 remark42.swig 援用 

  {% include '_scripts/boostrap.swig' %}

  {% include 'remark42.swig' %}

  {% include '_third-party/comments/index.swig' %}
  {% include '_third-party/search/index.swig' %}

搞完这个，全局脚本援用曾经搞掂了。

上面就是每个文章页面须要新增 remark42 评论框了

显著，应该是 post.swig

察看一下 themes/next/layout 目录不难发现，

每个文章的的款式模板都在 post.swig，

显著评论框也应该间接在 post.swig。

关上一看，感觉应该加在 <div class=”post-spread”> 上面

于是：

<div id="posts" class="posts-expand">
  {{post_template.render(page) }}

  <div class="post-spread">
    {% if theme.jiathis %} {% include '_partials/share/jiathis.swig' %} {%
    elseif theme.baidushare %} {% include '_partials/share/baidushare.swig' %}
    {% elseif theme.add_this_id %} {% include '_partials/share/add-this.swig' %}
    {% elseif theme.duoshuo_shortname and theme.duoshuo_share %} {% include
    '_partials/share/duoshuo_share.swig' %} {% endif %}
  </div>
  <div id="remark42"></div>
</div>

完事 …

最初成果

欢送评论来玩！！

退出移动版