呓语 | 杨英明的个人博客

专注于c++、Python,欢迎交流

By

ISSO 评论系统部署攻略

前言

自从多说关闭服务,这一年多来一直没找到合适的评论系统,之前多说关闭前保存的历史评论数据都快凉透了,于是干脆自己搭建评论系统,好在找到一个还不错的开源评论系统——ISSO。

下面是部署 ISSO 的过程。

安装 isso

安装 isso 具体步骤没什么好说的,找一个教程安装就行,大体都差不多,推荐官方的安装教程:

或者看中文教程也行:

但是根据这些教程都很容易出问题,我把我遇到的坑都收集起来,放在下一节,供大家参考。

安装过程中遇到的各种问题(坑)

下面列出我在安装isso过程中走过的各种坑……

依赖问题

  • Python 2.6, 2.7 or 3.3+ (+ devel headers)
  • Virtualenv
  • SQLite 3.3.8 or later
  • a working C compiler
  • Node.js, NPM and Bower

注意

要提前安装好npm和nodejs的最新版本,不然后面 make init 会报错

nodejs 快捷安装教程:在Linux系统安装Nodejs 最简单步骤

安装 Isso 和它的依赖时遇到的问题

安装 Isso

python setup.py develop  # or `install`
isso run

这一步我报了两个错误:
第一个错误

Setup script exited with error: command 'x86_64-linux-gnu-gcc' failed with exit status 1

解决方法(我的环境是python2.7):

sudo apt-get install build-essential autoconf libtool pkg-config python-opengl python-imaging python-pyrex python-pyside.qtopengl idle-python2.7 qt4-dev-tools qt4-designer libqtgui4 libqtcore4 libqt4-xml libqt4-test libqt4-script libqt4-network libqt4-dbus python-qt4 python-qt4-gl libgle3 python-dev libssl-dev
sudo apt-get install libffi-dev

如果上述代码不能解决你的问题,那么可以参考这个问题下的所有回答,挨个试一遍相信可以解决:setup script exited with error: command 'x86_64-linux-gnu-gcc' failed with exit status 1 - stackoverflow

第二个错误

distutils.errors.DistutilsError: https://files.pythonhosted.org/packages/e7/a7/4cd50e57cc6f436f1cc3a7e8fa700ff9b8b4d471620629074913e3735fb2/cffi-1.11.5.tar.gz#sha256=e90f17980e6ab0f3c2f3730e56d1fe9bcba1891eeea58966e89d352492cc74f4 returned a bad status line. The server might be down, ''

出现这个错误的原因可能是自动安装 cffi 库的时候需要翻墙下载,网络连接超时导致的。

解决方法是手动安装 cffi 库:

sudo pip install cffi

not found embed.min.js 报错的问题 || 评论不显示的问题

我根据文档中的做法用make js生成js会报错(提示r.js not found,至今没有解决),于是找了个替换文件后发现评论框会正常显示,但是文章下面的评论刷不出来,点击提交评论也没有反应,F12观察后发现替换的js文件运行时会报错,所以我找的替换js文件是有问题的。

解决办法就是直接去 isso0.10.5 的安装目录里找到 embed.min.js 文件,放到网站的静态文件中,评论就正常显示了。我把我的 embed.min.js 文件下载链接放在下面,有需要的可以自行下载:

Download embed.min.js

当然你也可以去 isso 库中自己找,isso安装目录(仅供参考):

/usr/local/lib/python2.7/dist-packages/isso-0.10.5-py2.7.egg/isso/js/embed.min.js

你也可以参考 github 中该项目的 issues 中的讨论: Not finding the embed.js file #352

TypeError: http status must be a string 报错的问题

现象是当你添加一个新评论时,后台调用 /new?uri=xxxx 接口会报错,具体信息如下:

Traceback (most recent call last):
  File "/usr/local/www/isso/lib/python2.7/site-packages/werkzeug/contrib/fixers.py", line 152, in __call__
    return self.app(environ, start_response)
  File "/usr/local/www/isso/lib/python2.7/site-packages/isso/wsgi.py", line 119, in __call__
    return self.app(environ, start_response)
  File "/usr/local/www/isso/lib/python2.7/site-packages/isso/wsgi.py", line 147, in __call__
    add_cors_headers("200 Ok", [("Content-Type", "text/plain")])
  File "/usr/local/www/isso/lib/python2.7/site-packages/isso/wsgi.py", line 144, in add_cors_headers
    return start_response(status, headers.to_list(), exc_info)
TypeError: http status must be a string

猜测这是python2的编码问题导致的。

解决方法是修改你的isso库源文件,比如上述例子,需要将 /usr/local/www/isso/lib/python2.7/site-packages/isso/wsgi.py 147行

add_cors_headers("200 Ok", [("Content-Type", "text/plain")])

修改为

add_cors_headers(b"200 Ok", [("Content-Type", "text/plain")])

然后就不会报错了…… 也是醉了……

显而易见,这不是一个好的解决方案,关于这个问题的讨论你也可以参考这个 issues: Unicode issue in addcorsheaders with uWSGI and Python 2 #297

ISSO 手动管理评论的方法

评论不好管理,常规方法可以通过邮件提醒里面的链接来删除评论。非常规方法就要修改数据库了,sqlite3 进入命令行:

ATTACH 'comments.db' as isso;
.tables
SELECT * from isso.comments;
DELETE FROM isso.comments WHERE id=87;

获取指定表字段的所有信息

PRAGMA table_info('tablename')

参考自:开源评论系统 Isso 全攻略

导入多说历史评论数据

一年前多说关闭的时候导出的数据还留着,正好在这里利用一下。

ISSO是支持评论导入的,不过只支持disqus的格式;所幸,多说格式可以导出为disqus,使用如下方式即可:

wget https://raw.githubusercontent.com/JamesPan/duoshuo-migrator/master/duoshuo-migrator.py
python2 duoshuo-migrator.py -i duoshuo.json -o wp.xml

然后导入 Isso 数据库(配置文件需要修改为自己的):

isso -c /etc/isso.conf import wp.xml

导入之后发现评论并没有显示出来。

查看数据库,发现文章数据其实已经导入进来了:

sqlite> ATTACH 'comments.db' as c;
sqlite> .tables
c.comments     c.preferences  c.threads
sqlite> select * from c.threads;
1|/article/4|KindEditor 4.15无法修改默认显示字体大小
2|/article/8|关于python中的字符串编码理解
3|/article/3|Python 学习拾遗
4|/about/|关于我
5|/article/370|爬取知乎百万用户数据!
6|/article/372|“一波三折”的考研调剂之路
7|/article/373|三四月份书单
8|/article/5|黑板客爬虫闯关 代码

但是由于ISSO识别文章的默认uri是/article/1/,而数据库中存储的uri是/article/1,这个细微的差别导致评论无法正确显示到对应的文章下面。

我的有评论的文章数不多,所以手动修改它们的uri,将斜杠/拼接到当前uri值后面即可。

sqlite> update c.threads set uri=uri||"/" where id=1 or id=2 or id=3 or id=5 or id=6 or id=7 or id=8;
sqlite> select * from c.threads;
1|/article/4/|KindEditor 4.15无法修改默认显示字体大小
2|/article/8/|关于python中的字符串编码理解
3|/article/3/|Python 学习拾遗
4|/about/|关于我
5|/article/370/|爬取知乎百万用户数据!
6|/article/372/|“一波三折”的考研调剂之路
7|/article/373/|三四月份书单
8|/article/5/|黑板客爬虫闯关 代码

更新数据库后消失了一年多的评论终于重见天日啦!

评论数据迁移参考自:

自定义isso评论框样式

默认的isso放在我的网站上显示有些问题,于是我把默认的css样式单独拿出来修改了一下,做了一些微调。

首先需要关闭“使用默认样式”的开关,修改html中isso的引用代码,将data-isso-css字段值设置为false,即:

<script data-isso="//yangyingming.com/isso/"
        data-isso-css="false"
        data-isso-lang="zh"
        data-isso-reply-to-self="true"
        ……

然后把修改过的css样式文件在页面html中引用,添加一行(根据自己的情况修改):

<link rel='stylesheet' id='isso.css' href="{% static '/static/css/isso.css' %}" type='text/css' media='all'/>

最后,重新加载页面便看到自定义样式的评论框了。

我把我的样式文件放在下面,基于isso默认样式修改,有需要的自取: Download isso.css

安装 isso 参考的教程

目前安装ISSO的中文教程还不是很多,以下是我安装ISSO过程中参考的一些教程:

配置邮件提醒功能

场景:当有新评论时,希望及时发送邮件提醒我。

解决方法:

isso自带有解决方案,修改你的 isso 配置文件,比如 isso.conf,首先修改通知方式为 smtp:

notify = smtp

然后添加smtp配置(以qq邮箱为例):

[smtp]
username = 951376975@qq.com
password = xxxxxxx  # 在邮箱设置里可以获得
host = smtp.qq.com
port = 465
security = ssl
to = 951376975@qq.com
from = "Isso Comment"<951376975@qq.com>
timeout = 10

配置无误后,添加新评论便会收到邮件通知啦。

如果你想再优化一下提醒效果的话可以继续往下看:

可以看到这样收到的邮件的主题就是文章的标题,如果我想在主题最前面加个【新评论提醒】的标识怎么办呢?

ISSO 默认没有提供自定义邮件主题(Subject)的功能,所以我只好修改一下源码(尽管这是个笨办法)。

具体做法是在/usr/local/lib/python2.7/dist-packages/isso-0.10.5-py2.7.egg/isso/ext/notifications.py 133行添加一行:

subject = '【新评论提醒】' + subject

重启 uWSGI 后,添加新评论便会收到我们自定义主题的邮件提醒啦~

添加评论头像翻转特效

场景:实现鼠标移动到评论头像上的时候,头像会展示旋转360度的动画特效。

实现:

利用CSS3可以实现动画特效,很简单,在我们自定义的css文件中添加:

.isso-comment > div.avatar {
    /* 头像旋转效果 */
    -webkit-transition:0.4s;
    -webkit-transition:-webkit-transform 0.4s ease-out;
    transition:transform 0.4s ease-out;
    -moz-transition:-moz-transform 0.4s ease-out;
}
.isso-comment > div.avatar:hover {
    /* 头像旋转效果 - 鼠标经过时 */
    transform:rotateZ(360deg);
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
}

具体效果可以见我的评论框。

启用 gravatar(启用失败)

场景:

gravatar 是一个公共头像的项目,他可以自动识别在 gravatar 中注册了的邮箱,然后显示你在 gravatar 中设置的头像。

实现:

很遗憾,虽然 isso 官方仓库的 issues 已经有人实现了这个功能,但是我用的 isso 版本不是最新的…… 没有这个功能。github 上 clone 下来的编译还总出错(卡在 make js),自己改源码又太麻烦,想想还是暂时放弃。

如果你用的最新的 isso,那么你可以参考 Feature/gravatar support 进行配置。

集成 OwO 颜文字表情框

OwO 颜文字表情框 项目地址:DIYgod/OwO

场景:在评论框旁边集成一个可以插入颜文字以及 emoji 表情的表情选择框。

实现:

这个表情框是 DIYgod 大佬实现的,只不过默认只能插入到 textarea 区域,和 isso 是 div 作为输入框,不兼容。

好在 issue 中有网友实现了兼容功能,他 fork 的项目地址在这:ccloli/OwO

但是这个网友实现了之后没有文档说明…… 我花了一些时间大概摸索出用法,见下:

1.首先将项目 clone 下来,然后将 js 文件压缩成 OwO.min.js

$ npm install
$ npm run build

2.将生成的新的 OwO.min.js 覆盖原来的 js 文件。

3.修改文件的配置选项,重点关注 target 选项:

<script>
var OwO_demo = new OwO({
    logo: 'OωO表情',
    container: document.getElementsByClassName('OwO')[0],
    target: document.getElementById('isso-thread'),
    api: '/static/OwO.json',
    position: 'up',
    width: '100%',
    maxHeight: '250px'
     });
</script>

配置好之后基本就能用了,可以添加表情到输入框了。

但是还是有些问题,比如:

  1. 移动端无法插入表情;
  2. 如果没选择输入框,表情会插入到奇怪的地方;
  3. 无法先输入表情再输入文字,重新点击输入框表情会被清空。

这些问题有待解决…… 先用用实在不行就自己实现这个功能……

其它参考资料

原创声明

转载请注明:呓语 » 部署 isso 评论系统攻略