雖然也在意料之中堂污,但是收到多說(shuō)郵件還是覺(jué)得有些遺憾。對(duì)于靜態(tài)博客來(lái)說(shuō)讨衣,沒(méi)有評(píng)論模塊就有些尷尬了。
那么如何用其他工具代替多說(shuō)呢固蚤?大家第一時(shí)間想到的基本都是Disqus這種網(wǎng)站歹茶,但是被墻后,訪問(wèn)起來(lái)很困難燎孟,加載速度不好尸昧。
國(guó)內(nèi)替代品
在開(kāi)始搭建自己的評(píng)論系統(tǒng)之前,先了解一下國(guó)內(nèi)其他第三方評(píng)論系統(tǒng)爆侣,比較著名的就是這些:
但是它們?nèi)坎恢С諬TTPS幢妄,所以我決定自己搞個(gè)第三方評(píng)論系統(tǒng)。
Isso
Isso是一個(gè)輕量級(jí)的類(lèi)似Disqus第三方評(píng)論系統(tǒng)乎赴,它允許匿名評(píng)論置吓、注冊(cè)評(píng)論衍锚、回復(fù)郵件通知以及自定義外觀等功能。它的接口設(shè)計(jì)和Disqus高度相似度宦,所以要集成這個(gè)評(píng)論系統(tǒng)只需要在Disqus接口上改幾個(gè)單詞告匠,非常簡(jiǎn)單。
Isso是基于Python寫(xiě)的開(kāi)源軟件划鸽,你可以隨意修改評(píng)論框外觀。
1. 安裝
安裝嫂用?不丈冬,安裝什么的才不會(huì)讓你們做呢,我本來(lái)打算把整個(gè)Isso打包起來(lái)丟進(jìn)容器的往弓,但是在Docker Hub 上看到已經(jīng)有人做了一個(gè)鏡像蓄氧,而且做得相當(dāng)不錯(cuò),我沒(méi)什么好挑剔的缴淋,鏡像大小 17 MB泄朴。
我挺滿意的露氮,所以直接拿來(lái)用了。
首先Isso是使用Sqlite驅(qū)動(dòng)的局扶,所以我們使用 Docker 直接運(yùn)行即可叁扫。
安裝 Docker 和 Compose,不用廢話畴蒲。
新建一個(gè)文件夾名為config对室,在里面新建一個(gè)配置文件isso.conf:
[general]
dbpath = /db/comments.db
host = https://zuolan.me
[server]
listen = http://0.0.0.0:8080/
下面是一個(gè)Compose配置文件:
version: '2'
services:
isso:
image: wonderfall/isso
environment:
- GID=1000
- UID=1000
volumes:
- ./config:/config
- ./db:/db
ports:
- "8080:8080"
保存為docker-compose.yml然后執(zhí)行:
dokcer-compose up -d
搞定之后就可以通過(guò)8080端口的接口使用Isso評(píng)論系統(tǒng)了掩宜。
啟動(dòng)后目錄應(yīng)該是這樣的:
.
├── config
│ └── isso.conf
├── db
│ └── comments.db
└── docker-compose.yml
2 directories, 3 files
2. 配置Nginx
直接訪問(wèn)8080好尷尬,給它綁個(gè)網(wǎng)址吧辽旋。
server {
listen [::]:80;
listen [::]:443 ssl;
server_name example.com;
root /var/www/example.com;
location /isso {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Script-Name /isso;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:8080;
}
}
配置不用我說(shuō)了吧,上面配置中码耐,我們可以通過(guò)example.com/isso使用接口了糖儡。
3. 設(shè)置
Isso服務(wù)已經(jīng)運(yùn)行了,當(dāng)然直接訪問(wèn)8080端口是沒(méi)有什么界面的桦沉,只有一個(gè)API接口金闽。接下來(lái)我們要在靜態(tài)博客中集成這個(gè)評(píng)論系統(tǒng)代芜。
如果你使用的主題是純HTML,那么嵌入下面兩句即可:
<script data-isso="http://comments.example.tld/"
src="http://comments.example.tld/js/embed.min.js"></script>
<section id="isso-thread"></section>
如果你是Jade或者Ejs等模板引擎钞速,那么復(fù)制一下Disqus的代碼嫡秕,替換為Isso即可,例如Jade格式驾凶。
下面是Disqus的Jade模板:
if theme.disqus
a#comments
#disqus_thread
script.
var disqus_shortname = '#{theme.disqus}';
var disqus_identifier = '#{page.path}';
var disqus_title = '#{page.title}';
var disqus_url = '#{config.url}/#{page.path}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
script(id='dsq-count-scr' src='//#{theme.disqus}.disqus.com/count.js' async)
現(xiàn)在改寫(xiě)為Isso評(píng)論系統(tǒng)(類(lèi)似):
if theme.isso
a#comments
.isso-thread
script.
var isso-path = {short_name:"#{theme.isso}"};
(function() {
var isso = document.createElement('script');
isso.type = 'text/javascript';ds.async = true;
isso.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//example.com/isso/js/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
4. 評(píng)論計(jì)數(shù)
如何在首頁(yè)中顯示文章計(jì)數(shù)调违?
加入下面一句到頁(yè)面中:
<a href="/my-uri.html#isso-thread">Comments</a>
最后
如果你不滿意這個(gè)Isso泻轰,還可以使用其他開(kāi)源評(píng)論系統(tǒng)。
我只負(fù)責(zé)丟鏈接: