为了账号安全,请及时绑定邮箱和手机立即绑定

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里的。
多说评论系统

修改ua信息样式

动机

主要看别人博客里,别人的样式有这个,然后用了他们的方法比如引入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样式的编写,大家自己可以去定义,如果不定义有一个默认样式,会对这些无法识别的系统和浏览器有样式效果,就是灰色的背景而已。

End

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


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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
30
获赞与收藏
350

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消