多说简介

多说是一款追求极致体验的社会化评论框，可以用微博、QQ、人人、豆瓣等帐号登录并评论。功能强大且永久免费。Hexo 默认使用的评论插件是国外的 Disqus，。对于国内来说，使用多说无非是最好的。这篇文章就介绍下如何在 Hexo 中添加多说评论插件和多说 CSS 的美化，顺便说一下多说分享插件。至于如何搭建 Hexo 博客请参考：

Hexo + Git 搭建免费的个人博客

集成多说

注意: 我使用的是 NexT 主题，集成多说插件非常简单，这也是我喜欢这个主题的原因，简单、高效。其他主题的配置需要你们自己研究了，不过都差不多的。NexT 主题更多第三方服务请参考：

第三方服务集成 - NexT 使用文档

NexT 主题

下面说一下 NexT 主题如何集成多说。首先要在 多说 创建一个站点，具体步骤如下：

  1. 登录后在首页选择 “我要安装”。
  2. 创建站点，填写表单。如图：
  3. 在博客站点配置文件 _config.yml 中添加如下代码：
    1
    2
    3
    4
    5
    # 多说评论功能
    duoshuo_shortname: xxx # 你填写在多说域名中的值

    # 多说分享服务，必须与多说评论同时使用
    duoshuo_share: true
  4. 启用后默认在所有页面都会显示多说评论框，比如分类页面、标签页面、自定义的关于页面，如果不想在这些页面显示评论框，找到对应的index.md文档，在Front-matter(文件最上方以 --- 分隔的区域)中加入 comments: false 这一行代码就行了

Landscape 主题

顺便说一下 Hexo 默认的 Landscape 主题如何集成多说，具体步骤如下：

  1. 与上面相同
  2. 修改 themes\landscape\layout\_partial\article.ejs 模板，把：
1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
</section>
<% } %>

改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread"
        data-thread-key="<%= post.layout %>-<%= post.slug %>"
        data-title="<%= post.title %>"
        data-url="<%= page.permalink %>">
    </div>
    <!-- 多说评论框 end -->

    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
        var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
        (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 -->
</section>
<% } %>

美化多说

多说设置

登陆 多说，点击后台管理，在设置中修改，包括基本设置、自定义文本、默认头像、外观主题。如图：

自定义多说分享图标

多说提供很多平台的分享服务，有时候我们肯能并不需要这么多，要如何修改呢？
首先，进入到 themes\next\layout\_partials\share\duoshuo_share.swig ，在这里就可以修改图标，至于都有什么图标，请参考：

多说分享组件自定义图标 - 多说开发者中心

多说评论显示 UA

在每一条多说评论后显示评论者所使用的代理信息（如 操作系统、浏览器），效果如下：

启用此功能，需要编辑主题配置文件 _congig.yml 如下：

1
2
3
4
5
6
7
8
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: xxxxxx
  admin_nickname: 权限汪

只要设置 ua_enable 为 true 即可显示 UA 信息。 admin_enable 是用于显示 博主 文字，表明评论者是博主【默认显示的是博主，我给改成权限汪了】，此字段需要同时配置 user_id。 请访问 多说开发者中心，登录并访问 我的主页 获取 user_id ， 此 ID 是网址最后那串数字。

自定义 CSS

登陆 多说，点击后台管理，在 设置/基本设置/自定义CSS 中可以修改多说的 CSS 样式，如图：

我的修改如下（可以使用键盘上的上下左右查看看不到的代码）：

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/* 设置圆形头像 */
#ds-reset .ds-avatar img {
    width: 54px; height:54px;   /*设置图像的长和宽*/
    border-radius: 27px;        /*设置图像圆角效果,在这里我直接设置了超过 width/2 的像素，即为圆形了*/
    -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/
    -moz-border-radius: 27px;
}

/* 所有样式 */
* {
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    box-shadow: inset 0 0 0px #fff !important;
}

/* 喜欢按钮 */
#ds-thread #ds-reset a.ds-like-thread-button {
    border: 1px solid #f3726d;
    background: #fff !important;
    text-shadow: 0 0px 0 #fff !important;
}

/* 点击喜欢后弹出的分享图标 */
.ds-service-link {
    background: url("//static.duoshuo.com/images/service-icons-color-flat.png?v=2") no-repeat;
    _background-image: url("//static.duoshuo.com/images/service-icons-color-flat.gif?v=2");
}

/* 上面那个分享图标我是想改成扁平化的，但是修改了后 */
/* 下面这几个图标的坐标位置属性（多说原生的代码）就无效了，不知道为什么，于是自己手动写上去了 */
#ds-reset .ds-qzone {
    background-position: 0 -128px;
}

#ds-reset .ds-qqt {
    background-position: 0 -64px;
}

#ds-reset .ds-renren {
    background-position: 0 -32px;
}

#ds-reset .ds-kaixin {
    background-position: 0 -80px;
}

#ds-reset .ds-douban {
    background-position: 0 -96px;
}

#ds-reset .ds-baidu {
    background-position: 0 -208px;
}

/* 被顶起来的评论 */
#ds-reset .ds-gradient-bg {
    background: #E9E9E9 !important;
}

/* 评论框默认显示文字样式 */
#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
    font-family: "Microsoft YaHei", Verdana, sans-serif !important;
}

/* 发布评论按钮 */
#ds-thread #ds-reset .ds-post-button {
    font-family: "Microsoft YaHei", Verdana, sans-serif !important;
    border: 0 none !important;
    color: #FFFFFF !important;
    background: none repeat scroll 0 0 #F3726D !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-transform: none !important;
    transition: all 0.3s ease 0s !important;
    -moz-transition: all 0.3s ease 0s !important;
    -webkit-transition: all 0.3s ease 0s !important;
    text-align: center !important;
    text-shadow: 0 0px 0 #fff !important;
}

/* 发布评论按钮  hover */
#ds-thread #ds-reset .ds-post-button:hover {
    background: none repeat scroll 0 0 #303030 !important;
    color: white !important;
}

/* 评论框边框 */
.theme-next #ds-thread #ds-reset .ds-textarea-wrapper {
    border-color: #DEDEDE !important;
}

/* 评论框下面框的边框(好绕啊！) */
#ds-thread #ds-reset .ds-post-toolbar {
    border: 1px solid #DEDEDE !important;
    background: #E9E9E9 !important;
}

/* 昵称 */
#ds-reset .ds-highlight {
    color: #F3726D !important;
}

/* 顶 */
#ds-thread #ds-reset .ds-post-liked a.ds-post-likes {
    color: #F3726D !important;
}

/* 发布旁边的“分享到”图标 */
#ds-reset .ds-service-icon {
    background-image: url("//static.duoshuo.com/images/service-icons-color-flat.png") !important;
    _background-image: url("//static.duoshuo.com/images/service-icons-color-flat.gif") !important;
}

/* 隐藏多说底部的版权 */
#ds-thread #ds-reset .ds-powered-by {
    display: none;
}

/* 最近访客的头像 */
#ds-recent-visitors .ds-avatar img {
    border-radius: 27px !important;
    -webkit-border-radius: 27px !important;
    -moz-border-radius: 27px !important;
}

/* 最近访客的头像 */
#ds-recent-visitors .ds-avatar {
    float: left
}

我比较喜欢简洁扁平化的风格，所以做了上述的更改。小伙伴们具体看那些组件不顺眼，要修改掉，在网页上右键，选择 检查元素 就可以看到相对应的类名和 ID 等等。如果不会 CSS，建议你去 CSS 教程 - W3School 简单的学习一下 CSS 的基本知识。

另外我发现 NexT 主题也对多说的 CSS 样式做了些更改，CSS路径 themes\next\source\css\_common\components\third-party\duoshuo.styl，所以如果小伙伴用了其他主题，显示样式可能有点区别。 目前就先改这么多，更多的样式还在开发中，会不定期的更新。如果小伙伴有什么更好的样式，欢迎留言~

更新

2016-05-28 更新

添加站点最近访客功能

你只需要在想要显示的地方添加如下代码即可：

1
2
3
4
5
<div class="ds-recent-visitors"
    data-num-items="36"
    data-avatar-size="42"
    id="ds-recent-visitors">
</div>

data-num-items：显示的最近访客数量
data-avatar-size： 访客头像大小
CSS 设置：请参考上面的自定义CSS

当然，前提是你使用了多说评论功能，因为最近访客功能就是由多说提供的。我是直接写在了 about/index.md 文件中。点此 看看我的访客功能(●’◡’●)

参考资料

多说使用帮助 - 多说开发者中心
讨论区 - 多说开发者中心
主题配置 - NexT 使用文档
第三方服务集成 - NexT 使用文档

文章标题：Hexo 集成多说评论 + 多说分享 + 美化多说
文章作者：cylong
文章链接：https://0skyu.cn/p/1af5.html
有问题或者建议欢迎在下方评论。欢迎转载、引用，但希望标明出处，感激不尽(●’◡’●)