使用docker快速搭建ISSO评论系统

搭建ISSO评论系统

1.安装ISSO服务端

这里我用的是docker的方式

安装Docker和docker-compose

安装Docker

1
sudo apt-get install docker

安装docker-compose

我的环境是

linux-ubuntu:python2:pip

所以我的安装

1
pip install docker-compose

如此简单

开始吧

首先新建一个文件夹 ISSO

在文件夹内再新建文件夹 config，在里面新建一个配置文件isso.conf：

1
2
3
4
5
[general]
dbpath = /db/comments.db
host = https://zuolan.me
[server]
listen = http://0.0.0.0:8080/

在ISSO文件夹下建立一个Compose配置文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
version: '2'
services:
  isso:
    image: wonderfall/isso
    environment:
      - GID=1000
      - UID=1000
    volumes:
      - ./config:/config
      - ./db:/db
    ports:
      - "8080:8080"

保存为docker-compose.yml然后执行：

启动后目录应该是这样的：

1
2
3
4
5
6
7
8
.
├── config
│   └── isso.conf
├── db
│   └── comments.db
└── docker-compose.yml

2 directories, 3 files

启动后是直接运行，当然你可以用下面的命令管理

1
docker-compose start/stop isso

那么。。。。。。

怎么确定是否已经运行了呢？

1
curl www.wallfacer.tk:8080

如果出现：

1
2
3
<title>400 Bad Request</title>
<h1>Bad Request</h1>
<p>missing uri query</p>

那就成功啦 ^_^

但如果出现502错误

那就没有成功

2.设置

Isso服务已经运行了，当然直接访问8080端口是没有什么界面的，只有一个API接口。接下来我们要在静态博客中集成这个评论系统。

如果你使用的主题是纯HTML，那么嵌入下面两句即可：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script data-isso="//comments.example.tld/"
        src="//comments.example.tld/js/embed.min.js"></script>

<section id="isso-thread"></section>
```css

#### 如果你使用jekyll：

比较好的做法是 includes 目录下在建立 comments.html 文件用来 存放评论框代码：

```css
<link rel="stylesheet" href="{{ site.baseurl }}/assets/comments.css">

<script data-isso="http://www.wallfacer.tk:8080/"
        src="http://www.wallfacer.tk:8080/js/embed.min.js"></script>

<section id="isso-thread"
         data-title="{{ page.title }}"
         data-isso-id="{{ page.id }}"></section>

其中 data-isso-id 和 data-title 用来指定文章的唯一标识符和标题。为每个文章指定标识符便于以后的各种迁移。 {{ page.id }} 和 {{ page.title }} 是 Jekyll 提供的模板，用于获取本页面的 ID 和标题。 title 和 id 可以在文件的 yaml 头中设置，但 Jekyll 会为 _posts 中的文章自动生成 ID，对于 _post/2017-06-10-switch-from-duoshuo-to-isso.md，其 ID 是 /2017/06/10/switch-from-duoshuo-to-isso。

然后在页面模板 layouts/page.html 里面引用 comments.html 文件： include comments.html 记得两边加大括号和百分号和空格，就可以在每个使用了 page 模板的网页上显示评论框了。才发现里面的一些链接会影响到博客程序，mdzz

样式

~~Isso 的评论框默认样式是配合亮色背景工作的，谷月轩用 CSS 稍稍做了一下调整，保存在 assets/comments.css 中：~~

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#isso-thread {
    padding:8px;
    margin: 8px;
}

#isso-thread .isso-postbox {
    color: #333;
}

#isso-thread .auth-section .input-wrapper {
    margin-right: 4px;
}

#isso-thread .auth-section .post-action input {
    border-style: none;
    padding: 5px 20px;
    color: #DDD;
    background: rgba(255, 255, 255, 0.2);
}

#isso-thread .post-action input:hover {
    color: #FFF;
    background: rgba(255, 255, 255, 0.4);
}

#isso-thread .isso-comment a:hover {
    color: #FFF !important;
}

#isso-thread .isso-comment .isso-comment-header .author {
    color: #DDD;
    font-size: larger;
}

1
.isso-postbox .textarea-wrapper{margin-bottom:1rem}.isso-postbox .textarea-wrapper .textarea{min-height:8em}.isso-postbox .auth-section .input-wrapper input,.isso-postbox .textarea-wrapper .textarea{background:#fafafa;border:1px solid #eee;border-radius:.2rem;padding:.6rem .8rem}.isso-postbox .auth-section .input-wrapper input:focus,.isso-postbox .textarea-wrapper .textarea:focus{border-color:#999;outline:0}.isso-postbox .auth-section{display:flex;display:-ms-flexbox}.isso-postbox .auth-section .input-wrapper{-ms-flex:1 1 25%;flex:1 1 25%;padding-right:2rem;width:25%}.isso-postbox .auth-section .post-action{-ms-flex:1 1 25%;flex:1 1 25%;width:25%;margin-right:1.5rem;}.isso-postbox .auth-section .post-action input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#2687fb;border:.1rem solid #177ffb;border-radius:.2rem;color:#fff;padding:.6rem}.isso-postbox .auth-section .post-action input:focus{background:#177ffb;outline:0}.isso-postbox .auth-section input{width:100%}.isso-comment{display:flex;display:-ms-flexbox;margin-top:2rem}.isso-comment .avatar{margin-right:1.0rem}.isso-comment .avatar svg{border-radius:50%;height:auto;width:3.0rem}.isso-comment .isso-comment-header .author{font-weight:bolder}.isso-comment .isso-comment-header .spacer{color:#ccc;margin-left:1rem;margin-right:1rem}.isso-comment .isso-comment-header .permalink{color:#ccc}.isso-comment .isso-comment-header .note{margin-left:.5rem}.isso-thread{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.isso-thread section{display:block}.isso-thread a{background-color:transparent;-webkit-text-decoration-skip:objects}.isso-thread input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.isso-thread input{overflow:visible}[type=submit]{-webkit-appearance:button}[type=submit]::-moz-focus-inner{border-style:none;padding:0}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}*,::after,::before{box-sizing:inherit}.isso-thread{background:#fff;color:#404040;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:1.4rem;overflow-x:hidden;text-rendering:optimizeLegibility}.isso-thread p{line-height:2.4rem;margin:0 0 1rem}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .2rem rgba(232,86,0,.15)}.isso-thread .avatar{background:#2687fb;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:1.4rem;font-weight:300;height:3.2rem;line-height:1;margin:0;position:relative;vertical-align:middle;width:3.2rem}

发现了维术大大做的样式，更好看（ ‘▿ ’ ）

本文参考的教程：

【多说下线怎么办】一步搭建自己的第三方评论系统

ISSO 评论系统部署攻略

开源评论系统 Isso 全攻略

使用docker-compose 大杀器来部署服务上

从多说迁移到 Isso