Hexo下Next主题使用多说评论插件样式优化

因为Next主题最新版也结合了多说了一些插件，只需要在主题配置文件里设置参数就可以看到效果，但我发现样式还不够好看，就从几个方面来进行了优化。也会讲解如何使用多说的评论、分享、热评文章功能。

使用多说前需要先在 多说 创建一个站点。具体步骤如下：

准备

1·登录后在首页选择 “我要安装”。

2·创建站点，填写表单。多说域名 这一栏填写的即是你的 duoshuo_shortname，如图：

3·创建站点完成后在 主题配置文件 中新增 duoshuo_shortname 字段，值设置成上一步中的值。

修改或添加代码

修改主题配置文件代码

# Duoshuo ShortName
duoshuo_shortname: cduyzh //改为你自己的

　启用ua

这个是为了显示评论者使用的系统和浏览器属性，以及是否显示博主的昵称信息。
修改代码如下

duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: 6224774254659896065
  admin_nickname: 水美眉（博主）

获取user_id

登录你的多说账户信息主页

点击你的名字进入的页面后，地址最后有个ID就是它了！！！

修改或添加代码

修改主题配置文件代码

# Share
duoshuo_share: true

修改或添加代码

# 多说热评文章 true 或者 false
duoshuo_hotartical: true

评论模块样式

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

#ds-reset .ds-avatar img:hover,
#ds-recent-visitors .ds-avatar img:hover {

/*设置鼠标悬浮在头像时的CSS样式*/ box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg); /*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px; /*设置图像的长和宽，这里要根据自己的评论框情况更改*/
border-radius: 27px; /*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 27px; /*圆角效果：兼容webkit浏览器*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf; /*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
-moz-transition: -moz-transform 0.4s ease-out;
}

我把这段代码放在了多说的后台设置中的自定义CSS里的。

动机

主要看别人博客里，别人的样式有这个，然后用了他们的方法比如引入CSS什么的，发现没用，后来发现必须要用到JS获取你的浏览器版本信息和操作系统信息，给他加上对应的标签的样式，然后通过你自己定义的CSS样式来实现对ua信息样式的美化
因为默认的ua样式太丑了不美观，在此我也不贴图了。大家自己第一次启用这个功能的时候能感受得到。

修改代码

博主的next为最新的5.1.0版本不知道以前版本的情况，在我的next主题里，分析源码的时候找到了一个关于多说的文件，

我的路径为 D:\hexo\blog\themes\next\layout\_scripts\third-party\comments\duoshuo.swig

{% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}

  {% if theme.duoshuo %}
    {% set duoshuo_shortname = theme.duoshuo.shortname %}
  {% else %}
    {% set duoshuo_shortname = theme.duoshuo_shortname %}
  {% endif %}

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"{{duoshuo_shortname}}"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      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>
   <script type="text/javascript">
    if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp();
    else $('[class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp;
    var hookDUOSHUO_bl=false;
    function hookDUOSHUO_tp(){
        if(hookDUOSHUO_bl)return;
        else hookDUOSHUO_bl=true;
        var _D_post=DUOSHUO.templates.post;
        DUOSHUO.templates.post=function (e,t){
            var rs=_D_post(e,t);
            if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
            return rs;
        }
    }
    function show_ua(string){
        $.ua.set(string);
        var sua=$.ua;
        if(sua.os.version=='x86_64')sua.os.version='x64';
        return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
    }
    </script>

  {% if theme.duoshuo_info.ua_enable %}
    {% if theme.duoshuo_info.admin_enable %}
      {% set ua_parser_internal = url_for(theme.vendors._internal) + '/ua-parser-js/dist/ua-parser.min.js?v=0.7.9' %}
      <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
      <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{ url_for(theme.js) }}/src/hook-duoshuo.js?v={{ theme.version }}"></script>
    {% else %}
    {% set ua_parser_internal = url_for(theme.vendors._internal) + '/ua-parser-js/dist/ua-parser.min.js?v=0.7.9' %}
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{ url_for(theme.js) }}/src/hook-duoshuo.js"></script>
  {% endif %}

{% endif %}

解读代码

这段代码是我自己的修改后的，大家对照着自己看，主要是添加了一段代码而已。
里面有2个script标签里闭合的是JS函数，其他的script标签都是引用JS文件，大家自己去看。
第一个就是多说评论系统默认的JS添加代码，多说官网有，这段代码必须要用。我这是集成了的所以没有改动。
第二个是我添加的，主要实现用JS获取用户的浏览器类型和操作系统，并把这些信息添加到标签内和加入对应的CSS样式名，后面就通过对CSS样式进行优化就能达到如下效果

顺便贴出我自己对UA写的的CSS样式

//多说评论样式
.theme-next #ds-reset .duoshuo-ua-platform, .theme-next #ds-reset .duoshuo-ua-browser {
    color: #fff;
}
.duoshuo-ua-browser{background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;
border: 1px solid #BBB!important;color: #fff;
}
.duoshuo-ua-platform{background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;
border: 1px solid #BBB!important;color: #fff;}
.duoshuo-ua-platform-windows{background-color: #39b3d7!important;border-color: #46b8da!important;}
.duoshuo-ua-platform-linux {background-color: #3A3A3A!important;border-color: #1F1F1F!important;}
.duoshuo-ua-platform-android {background-color: #00C47D!important;border-color: #01B171!important;}
.duoshuo-ua-platform-ios{background-color: #ccc!important;border-color: #ccc!important;}
.duoshuo-ua-browser-chrome{background-color: #5cb85c!important;border-color: #4cae4c!important;}
.duoshuo-ua-browser-firefox{background-color: #f0ad4e!important;border-color: #eea236!important;}
.duoshuo-ua-browser-ie{background-color: #428bca!important;border-color: #357ebd!important;}
.duoshuo-ua-browser-opera{background-color: #d9534f!important;border-color: #d43f3a!important;}
.duoshuo-ua-browser-mobile safari{background-color: #ccc!important;border-color: #ccc!important;}

这段代码其实一看是没有对IOS系统和对应的safri浏览器进行CSS样式的编写，大家自己可以去定义，如果不定义有一个默认样式，会对这些无法识别的系统和浏览器有样式效果，就是灰色的背景而已。

最后有什么不懂的，或者一些没讲到的，欢迎在下面评论，因为目前2017年相关的hexo下next主题教程几乎没有，所以为了大家少走弯路，希望多提出意见。

关于这个next主题的优化，基本上算是讲完了，如果有网友有其他需求讲解可以私下找我。
我后面会出的有关文章类型，大概方向为：
网站seo优化——网站收录心得、站点地图使用、爬虫协议等简单介绍和使用
网站性能优化——用OSS对象存储来放图片等