标签：集成 bg false post Ocotpress page 评论 div ds
Octopress默认自带了DISQUS，但是对于国内不是很好用。于是一开始替换了国内的友言。但是后来发现用友言的人不多，而且感觉友言加载速度比较慢。然后就是到了今天的多说了。官方并没有给出具体针对Octopress的解决指导。我这里记录一下如何集成，并且解决一些常见的问题。
集成
来说评论框
这就是多说提供的通用代码中,其实理论上以下三个值通过javascript都可以得到的。
linenos:false
1
2
3 | <!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end --> |
如果换成Octopress（准确的来说是jekyll ）的变量，应该是这样子。
linenos:false
1
2
3 | <!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="{{ page.id }}" data-title="{{ page.title }}" data-url="{{site.url}}{{ page.url }}"></div>
<!-- 多说评论框 end --> |
整合公共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 | <!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="{{ page.id }}" data-title="{{ page.title }}" data-url="{{site.url}}{{ page.url }}"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"your_short_name"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end --> |
注意，请修改上面代码中的short_name
linenos:false
1 | var duoshuoQuery = {short_name:"your_short_name"}; |
关于short_name的这个值，需要从多说后台查找，如下图
将文件嵌入到<body></body>
将上面的文件嵌入到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 | </footer>
</article>
{% if page.comments == true %}
<section>
{% include post/duoshuo.html %}
</section>
{% endif %}
</div>
{% unless page.sidebar == false %}
<aside class="sidebar">
{% if site.post_asides.size %}
{% include_array post_asides %}
{% else %}
{% include_array default_asides %}
{% endif %}
</aside>
{% endunless %} |
同样，将文件嵌入到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 %}
<section>
{% include post/duoshuo.html %}
</section>
{% endif %}
</div>
{% unless page.sidebar == false %}
<aside class="sidebar">
{% if site.page_asides.size %}
{% include_array page_asides %}
{% else %}
{% include_array default_asides %}
{% endif %}
</aside>
{% endunless %} |
到这里，基本可以跑成功了。
问题解决
表象
不要高兴的太早，集成后的多说还是有点小问题，就是当需要登陆或者输入邮箱地址的时候，会出现如下图的问题，登陆框的背后有一层带颜色的层。
原因
具体原因是我所使用的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
标签：集成,
bg,
false,
post,
Ocotpress,
page,
评论,
div,
ds
From： https://blog.51cto.com/u_3987305/5853958