Ocotpress集成多说评论

Octopress默认自带了DISQUS，但是对于国内不是很好用。于是一开始替换了国内的友言。但是后来发现用友言的人不多，而且感觉友言加载速度比较慢。然后就是到了今天的多说了。官方并没有给出具体针对Octopress的解决指导。我这里记录一下如何集成，并且解决一些常见的问题。

集成

来说评论框

这就是多说提供的通用代码中,其实理论上以下三个值通过javascript都可以得到的。

linenos:false

1
2
3

如果换成Octopress（准确的来说是jekyll ）的变量，应该是这样子。

linenos:false

1
2
3

整合公共JS代码

在Octopress的source/_includes/post目录下，新建一个文件，比如duoshuo.html 其代码如下,

source/_includes/post/duoshuo.html linenos:false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意，请修改上面代码中的short_name

linenos:false

1

var duoshuoQuery = {short_name:"your_short_name"};

关于short_name的这个值，需要从多说后台查找，如下图

将文件嵌入到​​​​

将上面的文件嵌入到source/_layouts/post.html下，可参考下列代码。

source/_layouts/post.html linenos:false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  
{% if page.comments == true %}
  

   {% include post/duoshuo.html %}
  

 {% endif %}

同样，将文件嵌入到source/_layouts/page.html里面

source/_layouts/page.html lineos:false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{% if  page.comments == true %}

 {% include post/duoshuo.html %}
  

{% endif %}

到这里，基本可以跑成功了。

问题解决

表象

不要高兴的太早，集成后的多说还是有点小问题，就是当需要登陆或者输入邮箱地址的时候，会出现如下图的问题，登陆框的背后有一层带颜色的层。

原因

具体原因是我所使用的css为所有的body div增加了一个背景。下图为id为ds-wrapper的div的背景属性

解决

昨天晚上自己找到了一个可行的办法，思路就是对所有body div的设置不应用到id为ds-wrapper的div 默认的设置如下。文件为sass/base/_theme.scss

sass/base/_theme.scss linenos:false

1
2
3
4
5
6
7
8
9
10

body {
  > div {
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}

使用not把ds-wrapper加入例外，修改为这样的设置

sass/base/_theme.scss linenos:false

1
2
3
4
5
6
7
8
9
10

body {
  > div:not(#ds-wrapper){
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}

到这里，就比较完美的解决了问题，边Google变StackOverflow解决了问题了，哈哈。

延伸

​​CSS not API​​