多說(shuō)評(píng)論系統(tǒng)

前言

因?yàn)镹ext主題最新版也結(jié)合了多說(shuō)了一些插件把篓，只需要在主題配置文件里設(shè)置參數(shù)就可以看到效果金抡，但我發(fā)現(xiàn)樣式還不夠好看，就從幾個(gè)方面來(lái)進(jìn)行了優(yōu)化翎碑。也會(huì)講解如何使用多說(shuō)的評(píng)論、分享丧枪、熱評(píng)文章功能光涂。

啟用多說(shuō)評(píng)論功能

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

準(zhǔn)備

1·登錄后在首頁(yè)選擇 “我要安裝”拧烦。

2·創(chuàng)建站點(diǎn)忘闻，填寫表單。多說(shuō)域名 這一欄填寫的即是你的 duoshuo_shortname恋博，如圖：

多說(shuō)評(píng)論系統(tǒng)

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

修改或添加代碼

修改主題配置文件代碼

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

啟用ua

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

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

獲取user_id

登錄你的多說(shuō)賬戶信息主頁(yè)

多說(shuō)評(píng)論系統(tǒng)

點(diǎn)擊你的名字進(jìn)入的頁(yè)面后，地址最后有個(gè)ID就是它了Ｇ厥俊Ｈ崩鳌！

多說(shuō)評(píng)論系統(tǒng)

啟用多說(shuō)分享功能

修改或添加代碼

修改主題配置文件代碼

# Share
duoshuo_share: true

啟用多說(shuō)熱評(píng)文章功能

修改或添加代碼

# 多說(shuō)熱評(píng)文章 true 或者 false
duoshuo_hotartical: true

修改評(píng)論頭像樣式

評(píng)論模塊樣式

/*隱藏多說(shuō)底部版權(quán)*/
#ds-thread #ds-reset .ds-powered-by {
display: none;
}

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

/*設(shè)置鼠標(biāo)懸浮在頭像時(shí)的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); /*圖像旋轉(zhuǎn)360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px; /*設(shè)置圖像的長(zhǎng)和寬隧土，這里要根據(jù)自己的評(píng)論框情況更改*/
border-radius: 27px; /*設(shè)置圖像圓角效果,在這里我直接設(shè)置了超過(guò)width/2的像素提针，即為圓形了*/
-webkit-border-radius: 27px; /*圓角效果：兼容webkit瀏覽器*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf; /*設(shè)置圖像陰影效果*/
-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; /*變化時(shí)間設(shè)置為0.4秒(變化動(dòng)作即為下面的圖像旋轉(zhuǎn)360讀）*/
-moz-transition: -moz-transform 0.4s ease-out;
}

我把這段代碼放在了多說(shuō)的后臺(tái)設(shè)置中的自定義CSS里的。

多說(shuō)評(píng)論系統(tǒng)

修改ua信息樣式

動(dòng)機(jī)

主要看別人博客里曹傀，別人的樣式有這個(gè)辐脖，然后用了他們的方法比如引入CSS什么的，發(fā)現(xiàn)沒(méi)用皆愉，后來(lái)發(fā)現(xiàn)必須要用到JS獲取你的瀏覽器版本信息和操作系統(tǒng)信息嗜价，給他加上對(duì)應(yīng)的標(biāo)簽的樣式，然后通過(guò)你自己定義的CSS樣式來(lái)實(shí)現(xiàn)對(duì)ua信息樣式的美化
因?yàn)槟J(rèn)的ua樣式太丑了不美觀幕庐，在此我也不貼圖了久锥。大家自己第一次啟用這個(gè)功能的時(shí)候能感受得到。

修改代碼

博主的next為最新的5.1.0版本不知道以前版本的情況异剥，在我的next主題里瑟由，分析源碼的時(shí)候找到了一個(gè)關(guān)于多說(shuō)的文件，

我的路徑為 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 %}

解讀代碼

這段代碼是我自己的修改后的冤寿，大家對(duì)照著自己看歹苦，主要是添加了一段代碼而已。
里面有2個(gè)script標(biāo)簽里閉合的是JS函數(shù)督怜，其他的script標(biāo)簽都是引用JS文件殴瘦，大家自己去看。
第一個(gè)就是多說(shuō)評(píng)論系統(tǒng)默認(rèn)的JS添加代碼亮蛔，多說(shuō)官網(wǎng)有痴施，這段代碼必須要用擎厢。我這是集成了的所以沒(méi)有改動(dòng)究流。
第二個(gè)是我添加的辣吃，主要實(shí)現(xiàn)用JS獲取用戶的瀏覽器類型和操作系統(tǒng)，并把這些信息添加到標(biāo)簽內(nèi)和加入對(duì)應(yīng)的CSS樣式名芬探，后面就通過(guò)對(duì)CSS樣式進(jìn)行優(yōu)化就能達(dá)到如下效果

多說(shuō)評(píng)論系統(tǒng)

//多說(shuō)評(pí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;}

這段代碼其實(shí)一看是沒(méi)有對(duì)IOS系統(tǒng)和對(duì)應(yīng)的safri瀏覽器進(jìn)行CSS樣式的編寫神得，大家自己可以去定義，如果不定義有一個(gè)默認(rèn)樣式偷仿，會(huì)對(duì)這些無(wú)法識(shí)別的系統(tǒng)和瀏覽器有樣式效果哩簿，就是灰色的背景而已。

End

最后有什么不懂的酝静，或者一些沒(méi)講到的节榜，歡迎在下面評(píng)論，因?yàn)槟壳?017年相關(guān)的hexo下next主題教程幾乎沒(méi)有别智，所以為了大家少走彎路宗苍，希望多提出意見(jiàn)。

關(guān)于這個(gè)next主題的優(yōu)化薄榛，基本上算是講完了讳窟，如果有網(wǎng)友有其他需求講解可以私下找我。
我后面會(huì)出的有關(guān)文章類型敞恋，大概方向?yàn)椋?br> 網(wǎng)站seo優(yōu)化——網(wǎng)站收錄心得丽啡、站點(diǎn)地圖使用、爬蟲協(xié)議等簡(jiǎn)單介紹和使用
網(wǎng)站性能優(yōu)化——用OSS對(duì)象存儲(chǔ)來(lái)放圖片等