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

Author： Raiot
发布时间：February 11, 2019
9363views
6 comments
5783 words
Categories：技术宅

## 搭建ISSO评论系统

### 1.安装ISSO服务端

* 这里我用的是docker的方式

参考了[【多说下线怎么办】一步搭建自己的第三方评论系统](https://www.jianshu.com/p/0bca03b43157)

#### 安装Docker和docker-compose

* 安装Docker

```css
sudo apt-get install docker
```

* 安装docker-compose

我的环境是

linux-ubuntu:python2:pip

所以我的安装

```css
pip install docker-compose
```

如此简单

#### 开始吧

首先新建一个文件夹 ISSO

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

```css
[general]
dbpath = /db/comments.db
host = https://zuolan.me
[server]
listen = http://0.0.0.0:8080/
```

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

```css
version: '2'
services:
  isso:
    image: wonderfall/isso
    environment:
      - GID=1000
      - UID=1000
    volumes:
      - ./config:/config
      - ./db:/db
    ports:
      - "8080:8080"
```

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

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

```css
.
├── config
│   └── isso.conf
├── db
│   └── comments.db
└── docker-compose.yml

2 directories, 3 files
```

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

```css
docker-compose start/stop isso
```

那么。。。。。。

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

```css
curl www.wallfacer.tk:8080
```

如果出现：

```css
<title>400 Bad Request</title>
<h1>Bad Request</h1>
<p>missing uri query</p>
```

那就成功啦 ^_^

但如果出现502错误

那就没有成功

### 2.设置

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

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

```css
<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">

<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 的评论框默认样式是配合亮色背景工作的，[谷月轩](https://tech.silverrainz.me/)用 CSS 稍稍做了一下调整，保存在 assets/comments.css 中：~~

```css
#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;
}
```
```css
.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}
```

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

本文参考的教程：

[【多说下线怎么办】一步搭建自己的第三方评论系统](https://www.jianshu.com/p/0bca03b43157)

[ISSO 评论系统部署攻略](http://yangyingming.com/article/426/)

[开源评论系统 Isso 全攻略](https://zhangnew.com/isso-open-source-comment-system.html)

[使用docker-compose 大杀器来部署服务 上](https://www.cnblogs.com/neptunemoon/p/6512121.html)

[从多说迁移到 Isso](https://tech.silverrainz.me/2017/06/10/switch-from-duoshuo-to-isso.html)

Last modification：November 7th, 2021 at 07:20 pm

原创不易，请我杯奶茶吧~

6 comments

→_→
September 24th, 2019 at 10:12 pm

Reply
zhangnew
September 24th, 2019 at 08:06 pm

该评论仅登录用户及评论双方可见

Reply
1. kirain
  September 24th, 2019 at 10:03 pm
  
  @zhangnew
  
  该评论仅登录用户及评论双方可见
  
  Reply
2. kirain
  September 24th, 2019 at 09:09 pm
  
  @zhangnew
  
  引用的外链不是加密啦，只要点进去能看到原始网址的。
  只是用了短网址来提高SEO
  
  Reply
  1. →_→
    September 24th, 2019 at 09:51 pm
    
    @kirain
    
    该评论仅登录用户及评论双方可见
    
    Reply
3. kirain
  September 24th, 2019 at 09:07 pm
  
  @zhangnew
  
  这个是以前搭jekyll博客的时候写的，顺便迁移过来了。?
  
  Reply