能动手绝不多说:开源评论系统remark42上手指南
能动手绝不多说:开源评论系统 remark42 上手指南
前言
写博客嘛,
谁不喜欢自己倒腾一下呢。
从自建系统到 Github Page,
年轻的时候谁不喜欢多折腾折腾呢。
年纪稍稍长了一下之后, 最后我自己还是选了 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=hashover
- PHP
- 维护状态:九个月前
开始实践
调研搞完之后,停了一阵子,最近把项目扔给同事做进一步 demo 搭建,
同事花了点时候搭了一下 demo 和看了代码,最后在 commento 和 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 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>
完事...
最后效果
欢迎评论来玩!!
能动手绝不多说:开源评论系统remark42上手指南的更多相关文章
- Windows 8 系统完全上手指南 - 非常详尽的 Win8 系统入门学习手册与使用技巧专题教程!
每次当有新版本的操作系统发布的时候,市面上总会冒出各种从入门到精通类的学习书籍,这次最新的 Windows 8 也不例外!不过,今天给大家送上免费的大礼——<Windows 8 完全上手指南&g ...
- Hexo快速构建个人小站-Fulid主题下添加Valine评论系统(三)
Hexo目录: Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一) Hexo快速构建个人小站-自定义域名和自定义主题(二) 背景交代: 前面两章完成了Hexo的初始化和部分自定义 ...
- 开源社交系统ThinkSNS v4.6.1更新日志及功能详解!
ThinkSNS 开源社交系统 v4.6.1更新日志 [修复]聊天无法使用emoji问题 [修复]后台禁用用户后,app第三方登录可登录问题 [修复]部分接口问题 [修复]h5个人中心获取用户信息问题 ...
- 30个开源电子商务系统(PHP)
osCommerce osCommerce是一款著名的PHP开源电子商务解决方案,提出“开箱即用”的强大功能,使网上商店安装非常方便快捷,并可以作为GNU通用公共授权的开源项目免费发布.osComme ...
- 7款开源ERP系统比较
[网络转载] 现在有许多企业将ERP项目,在企 业中没有实施好,都归咎于软件产品不好.其实,这只是你们的借口.若想要将ERP软件真正与企业融合一体,首先得考虑企业的自身情况,再去选择适合的 ERP软件 ...
- 想要搭建个论坛?Guide哥调研了100来个 Java 开源论坛系统,发现这 5 个最好用!
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 最近有点小忙.但是,由于前几天答应了一位读者自己会推荐一些开源的论坛系统,所以,昨晚就简单地熬了个夜,对比了很多 ...
- hexo博客添加gitalk评论系统
经过了一天的折腾,我终于为自己的博客添加上了评论系统.坦率的讲,为什么网上那么多方案我还要自己写一篇博客,那就是因为他们说的都有bug,所以我要自己总结一下. 我选用的是gitalk评论系统, ...
- 备战春招!开源社区系统 Echo 超全文档助力面试
博主东南大学硕士在读,寒假前半个月到现在差不多一个多月,断断续续做完了这个项目,现在终于可以开源出来了,我的想法是为这个项目编写一套完整的教程,包括技术选型分析.架构分析.业务逻辑分析.核心技术点分析 ...
- 多说评论系统API调用和本地身份说明(JWT)
多说评论系统是一个非常好用的第三方评论插件,聚合了大多数的SNS平台账号登录和分享功能,UI也很不错. 作为网站快速接入评论系统,多说是一个比较好的选择,其也提供了一些实用的API去满足定制化需求. ...
随机推荐
- JVM 专题十三:运行时数据区(八)直接内存
1. 直接内存 不是虚拟机运行时数据区的一部分,也不是<Java虚拟机规范>中定义的内存区域. 直接内存是Java堆外的.直接向系统申请的内存区间. 来源于NIO,通过存在堆中的Direc ...
- linux专题(三):常用的基本命令(一)目录管理
http://dwz.date/UDf 绝对路径和相对路径 我们知道Linux的目录结构为树状结构,最顶级的目录为根目录 /. 其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们. 在开始 ...
- Spring AOP里的静态代理和动态代理,你真的了解嘛?
什么是代理? 为某一个对象创建一个代理对象,程序不直接用原本的对象,而是由创建的代理对象来控制原对象,通过代理类这中间一层,能有效控制对委托类对象的直接访问,也可以很好地隐藏和保护委托类对象,同时也为 ...
- CISSP 考试经验分享
复习资料: <Eleventh Hour CISSP> <汇哲培训讲义> <CISSP Official Security Professional>Eighth ...
- Ubuntu18.04安装Docker并部署(编译、发布、构建镜像)Asp.NetCore项目全过程笔记
环境准备:阿里云Ubuntu18.04 全新安装 一.安装Docker 1.删除旧版本并更新包索引: sudo apt-get remove docker docker-engine dock ...
- 一次HTTP请求服务的完整过程-请求处理过程
0.DNS域名解析:递归查询.迭代查询 递归查询:客户端向第一个服务器查询,给最终结果 迭代查询:第一个服务器向根查询 1 .建立连接:接收或拒绝连接请求:三次握手的过程 提高HTTP 连接性能: 并 ...
- Web Security Academy ___XXE injection___Lab
实验网站:https://portswigger.net/web-security/xxe XXE学习看一参考下面这篇文章,讲得很全: https://xz.aliyun.com/t/3357#toc ...
- CCNA - Part10 数据包的通信过程
这篇文章主要是对数据包在同网段和不同网段的转发流程梳理,使用 ping 命令进行实际抓包测试. 网关的概念: 对于像 PC 等终端设备来说,通过交换机可以实现同网段的通信.但如果想要给其他网段发生数据 ...
- 一个有趣的问题, 你知道SqlDataAdapter中的Fill是怎么实现的吗
一:背景 1. 讲故事 最近因为各方面原因换了一份工作,去了一家主营物联柜的公司,有意思的是物联柜上的终端是用 wpf 写的,代码也算是年久失修,感觉技术债还是蛮重的,前几天在调试一个bug的时候,看 ...
- js JQ动态添加div标签
function renderList(data){ var str = ''; for(var i = 0; i < data.length; i++){ // 动态添加li str += ' ...