Loading... ## 搭建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"> <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 的评论框默认样式是配合亮色背景工作的,[谷月轩](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 © 允许规范转载 Support 原创不易,请我杯奶茶吧~ Appreciate the author 支付宝微信
6 comments
引用的外链不是加密啦,只要点进去能看到原始网址的。
只是用了短网址来提高SEO
这个是以前搭jekyll博客的时候写的,顺便迁移过来了。?