Hexo 集成多说评论 + 多说分享 + 美化多说
Pin Young Lv9
  2016-04-25 19:27:11 2016-04-25 19:27   2023-02-05 21:25:09    2.2k 字  9 分钟  

多说简介

多说是一款追求极致体验的社会化评论框，可以用微博、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/posts/1af5.html
有问题或者建议欢迎在下方评论。欢迎转载、引用，但希望标明出处，感激不尽(●’◡’●)

  • 本文标题：Hexo 集成多说评论 + 多说分享 + 美化多说
  • 本文作者：Pin Young
  • 创建时间：2016-04-25 19:27:11
  • 本文链接：posts/1af5.html
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
  1. 1. 多说简介
  2. 2. 集成多说
    1. 2.1. NexT 主题
    2. 2.2. Landscape 主题
  3. 3. 美化多说
    1. 3.1. 多说设置
    2. 3.2. 自定义多说分享图标
    3. 3.3. 多说评论显示 UA
    4. 3.4. 自定义 CSS
  4. 4. 更新
    1. 4.1. 添加站点最近访客功能
  5. 5. 参考资料