多說評論系統(tǒng)

前言

因為Next主題最新版也結合了多說了一些插件，只需要在主題配置文件里設置參數就可以看到效果，但我發(fā)現(xiàn)樣式還不夠好看，就從幾個方面來進行了優(yōu)化。也會講解如何使用多說的評論、分享、熱評文章功能。

啟用多說評論功能

使用多說前需要先在 多說 創(chuàng)建一個站點。具體步驟如下：

準備

1·登錄后在首頁選擇 “我要安裝”。

2·創(chuàng)建站點，填寫表單。多說域名 這一欄填寫的即是你的 duoshuo_shortname，如圖：

多說評論系統(tǒng)

3·創(chuàng)建站點完成后在 主題配置文件 中新增 duoshuo_shortname 字段，值設置成上一步中的值。

修改或添加代碼

修改主題配置文件代碼

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

啟用ua

這個是為了顯示評論者使用的系統(tǒng)和瀏覽器屬性，以及是否顯示博主的昵稱信息。
修改代碼如下

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

獲取user_id

登錄你的多說賬戶信息主頁

多說評論系統(tǒng)

點擊你的名字進入的頁面后，地址最后有個ID就是它了?。?！

多說評論系統(tǒng)

啟用多說分享功能

修改或添加代碼

修改主題配置文件代碼

# 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里的。

多說評論系統(tǒng)

修改ua信息樣式

動機

主要看別人博客里，別人的樣式有這個，然后用了他們的方法比如引入CSS什么的，發(fā)現(xiàn)沒用，后來發(fā)現(xiàn)必須要用到JS獲取你的瀏覽器版本信息和操作系統(tǒng)信息，給他加上對應的標簽的樣式，然后通過你自己定義的CSS樣式來實現(xiàn)對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 $('[src="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 src="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
      <script src="{{ 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 src="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
    <script src="{{ url_for(theme.js) }}/src/hook-duoshuo.js"></script>
  {% endif %}

{% endif %}

解讀代碼

這段代碼是我自己的修改后的，大家對照著自己看，主要是添加了一段代碼而已。
里面有2個script標簽里閉合的是JS函數，其他的script標簽都是引用JS文件，大家自己去看。
第一個就是多說評論系統(tǒng)默認的JS添加代碼，多說官網有，這段代碼必須要用。我這是集成了的所以沒有改動。
第二個是我添加的，主要實現(xiàn)用JS獲取用戶的瀏覽器類型和操作系統(tǒng)，并把這些信息添加到標簽內和加入對應的CSS樣式名，后面就通過對CSS樣式進行優(yōu)化就能達到如下效果

多說評論系統(tǒng)

//多說評論樣式
.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系統(tǒng)和對應的safri瀏覽器進行CSS樣式的編寫，大家自己可以去定義，如果不定義有一個默認樣式，會對這些無法識別的系統(tǒng)和瀏覽器有樣式效果，就是灰色的背景而已。

End

最后有什么不懂的，或者一些沒講到的，歡迎在下面評論，因為目前2017年相關的hexo下next主題教程幾乎沒有，所以為了大家少走彎路，希望多提出意見。

關于這個next主題的優(yōu)化，基本上算是講完了，如果有網友有其他需求講解可以私下找我。
我后面會出的有關文章類型，大概方向為：
網站seo優(yōu)化——網站收錄心得、站點地圖使用、爬蟲協(xié)議等簡單介紹和使用
網站性能優(yōu)化——用OSS對象存儲來放圖片等