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

开源评论零碎 remark42 上手指南

写博客嘛，

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

从自建零碎到 Github Page，

从 Jekyll 到 Hexo，

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

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

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

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

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

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

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

调研前提：

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

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

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.

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.

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!

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.

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

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

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

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

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

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

remark42

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

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

这一段是须要写写的。

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

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

<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 主题外面怎么做呢？

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

首先晓得（鬼晓得啊），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，而后在下面引入一下。


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

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

  {% include 'remark42.swig' %}

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

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

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

察看一下 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>

完事 …

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

能动收不多说

前言

开源评论零碎调研

vkuznecovas/mouthful

schn4ck/schnack

adtac/commento

posativ/isso

umputun/remark42

jacobwb/hashover

开始实际

开始“搞事”

Hexo next 集成 remark42

页面插入 script

页面插入评论框

hexo next 主题

新建 remark42.swig，贴入 script 代码

layout.swig 增加 remark42.swig 援用

显著，应该是 post.swig

最初成果

欢送评论来玩！！

Just My Socks（注册教程内含优惠码）

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

能动收不多说

前言

开源评论零碎调研

vkuznecovas/mouthful

schn4ck/schnack

adtac/commento

posativ/isso

umputun/remark42

jacobwb/hashover

开始实际

开始“搞事”

Hexo next 集成 remark42

页面插入 script

页面插入评论框

hexo next 主题

新建 remark42.swig，贴入 script 代码

layout.swig 增加 remark42.swig 援用

显著，应该是 post.swig

最初成果

欢送评论来玩！！

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）