迁移评论系统disqus到colina

自从迁移至Hexo后,就开始折腾评论系统,现目前有比较多的评论系统,如disqus来必力gitment等等, 经过一番比较,选择了老牌的评论系统disqus,用起来还是非常不错的。但是用了一段时间,由于disqus需要科学上网才能使用,对于国内的用户不太友好,于是乎开始寻找其他的解决方案,找到了一些可以自己搭建的博客系统,发现多多少少不能满足需求,最终还是决定自己来造个轮子,方便自己管理评论系统,又可以保证数据不丢失。于是利用空闲时间,花了些时间折腾出了colina,一款轻量、简单易用、支持Markdown的评论系统。

部署Colina

现目前colina的主要功能已开发完成,但还有不少细节未完善,暂时只提供了docker的部署方式,后续将逐步完善。

1
$ docker pull coolerfall/colina:latest

使用docker compose来编排,方便启动/关闭:

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
version: 3

services:
colina:
restart: always
image: coolerfall/colina:latest
depends_on:
- db
environment:
- COLINA_URL=http://localhost:3000
- COLINA_DSN=postgres://colina:colinapass@db/colina?sslmode=disable
- COLINA_DATA_DIR=/data
ports:
- 3000:3000
volumes:
- /home/colina:/data
db:
restart: always
image: postgres:11-alpine
environment:
- POSTGRES_USER=colina
- POSTGRES_PASSWORD=colinapass
- POSTGRES_INITDB_ARGS="--encoding=UTF8"
volumes:
- /home/colina/db:/var/lib/postgresql/data

然后使用docker-compose命令启动起来即可:

1
$ docker-compose -f docker-compose.yml up -d

在浏览器中打开http://localhost:3000,显示管理登录页面即表示运行正常,根据提示配置后台相应参数。

在hexo中接入Colina(以next主题为例)

  • 在管理页面新增一个站点,获取到 site id。 –>

  • themes/next/layout/_third-party中新增colina.swig文件,并添加以下内容:

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
      {% if theme.colina.enable %}
    <link rel="stylesheet" href="{{ theme.colina.url }}/embed/colina.min.css">

    {% if theme.disqus.count %}
    <script type="text/javascript">
    var colinaConfig = {
    siteId: "{{ theme.colina.site_id }}",
    apiUrl: "{{ theme.colina.url }}",
    lang: "{{ theme.colina.language }}" || navigator.language ||
    navigator.systemLanguage || navigator.userLanguage
    };
    (function() {
    var d = document, s = d.createElement("script");
    s.src = "{{ theme.colina.url }}/embed/counter.min.js";
    (d.head || d.body).appendChild(s);
    })();
    </script>
    {% endif %}

    {% if page.comments %}
    <script type="text/javascript">
    var colinaConfig = {
    identifier: "{{ page.path }}",
    siteId: "{{ theme.colina.site_id }}",
    apiUrl: "{{ theme.colina.url }}",
    title: "{{ page.title| addslashes }}",
    lang: "{{ theme.colina.language }}" || navigator.language ||
    navigator.systemLanguage || navigator.userLanguage
    };
    function loadComments() {
    (function() {
    var d = document, s = d.createElement("script");
    s.src = "{{ theme.colina.url }}/embed/colina.min.js";
    (d.head || d.body).appendChild(s);
    })();
    }

    {% if theme.colina.lazyload %}
    $(function () {
    var offsetTop = $('#comments').offset().top - $(window).height();
    if (offsetTop <= 0) {
    // load directly when there's no a scrollbar
    loadComments();
    } else {
    $(window).on('scroll.colina_scroll', function () {
    // offsetTop may changes because of manually resizing browser window or lazy loading images.
    var offsetTop = $('#comments').offset().top - $(window).height();
    var scrollTop = $(window).scrollTop();

    // pre-load comments a bit? (margin or anything else)
    if (offsetTop - scrollTop < 60) {
    $(window).off('.colina_scroll');
    loadComments();
    }
    });
    }
    });
    {% else %}
    loadComments();
    {% endif %}
    </script>
    {% endif %}

    {% endif %}
  • 在同目录下的index.swig中追加:

    1
    {% include 'colina.swig' %}
  • themes/next/layout/_partials/comments.swig中追加以下内容,用于渲染评论内容:

    1
    2
    3
    4
    5
    6
    7
    8
    {% elseif theme.colina.enable %}
    <div class="comments" id="comments">
    <div id="colina-comments">
    <noscript>
    Please enable JavaScript to view comments powered by Colina.
    </noscript>
    </div>
    </div>
  • themes/next/layout/_macro/post.swig中添加以下内容,用于展示评论条数:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {% if post.comments %}
    ...
    ...

    {% elseif theme.colina.enable and theme.colina.count %}
    <span class="post-comments-count">
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
    <i class="fa fa-comment-o"></i>
    </span>
    <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
    <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
    <span class="post-comments-count colina-comment-count"
    data-colina-identifier="{{ post.path }}" itemprop="commentCount"></span>
    </a>
    </span>
  • themes/next/_config.yml中添加配置项:

    1
    2
    3
    4
    5
    6
    7
    colina:
    enable: true
    site_id: your site id
    url: http://localhost:3000
    count: true
    lazyload: false
    language:
  • 最后运行hexo即可看到显示效果

0%