摘要：通過將Hexo同時部署到Github和GitCafe铐懊，使用Dnspod對來自國內(nèi)外的流量分別DNS解析至GitCafe及Github從而優(yōu)化博客的訪問速度，本篇文章包括（1）修改hexo deployer配置瞎疼，Dnspod做定向解析（2）Hexo 2.x升至3.x(3)備份關(guān)鍵配置到Github/GitCafe Backup分支（4）關(guān)于主題及多說評論框樣式及USER ANGENT（6）添加文章目錄及版權(quán)信息

寫這篇文章時已經(jīng)距離上篇文章已經(jīng)過去快半年了科乎，健壯的拖延君死而復(fù)生把剛剛在襁褓中的勤奮君給趕跑了（其實(shí)就是懶，寫寫廢話我還是很樂意的嘛）贼急，主要是因?yàn)槊科恼碌膶W(xué)習(xí)量太大喜喂，每做完一個項(xiàng)目做一個總結(jié)難免會照成數(shù)據(jù)的丟失，所以我放棄以前每篇文章一個項(xiàng)目竿裂，轉(zhuǎn)向由一個時間窗口一個主題玉吁，把每天所學(xué)習(xí)到的一切知識隨時記錄隨時使用，以前覺得建一個知識倉庫把每天看的信息堆積到腦海里總會越積越多的腻异，但是事實(shí)卻正好相反进副，雖然往一個水潭中加水可以增加它的體諒，但是所吸收的信息就好像水面上的漣漪悔常，如果一股腦的掀翻它或與能夠卷起一陣海嘯影斑，但是隨著水面的漣漪越來越多，最后其產(chǎn)生波相互疊加最終由趨于水平机打，不懂得思考和事件的知識就好像累加的音樂最終卻成了噪音矫户，在腦子里沒有發(fā)酵成為可口的泡菜卻成了坨屎。
所以既然發(fā)糞涂墻残邀，就必須利其器皆辽，把博客改造一番還是必要的，至少被Jonathan的Flattened Design強(qiáng)奸了一番眼球后就再也看不慣以前Landscape主題的擬物的光線和陰影了芥挣，另外之前的博客托管在Github驱闷，利用全球的CDN自然能夠加速不少，當(dāng)然這是在沒有墻的前提下空免，在加上Github上敏感的信息越來越多空另，受到特別關(guān)照也不可避免（中國GFW可能是使GitHub癱瘓的DDoS攻擊源），所以為了加快在國內(nèi)的訪問速度以及避免某些原因Github無法訪問蹋砚，所以決定將博客托管一份至GitCafe上扼菠。
同時在Github和GitCafe部署Hexo的主要優(yōu)勢如下：

1.利用Dnspod A記錄將國內(nèi)流量導(dǎo)向Gitcafe地址摄杂，而國外流量默認(rèn)走Github地址從而加快國內(nèi)訪問的速度。
2.起到對稱備份的作用循榆，以免一方托管方發(fā)生奔潰時匙姜，另一方可以接替訪問。
3.Github和GitCafe均支持自定義域名冯痢，A記錄支持兩條記錄氮昧，因此兩邊的托管使用同一個域名地址，不過CName只能支持一條記錄浦楣。
4.國內(nèi)訪問路線短速度快袖肥，可以不需要CDN。

使用Github和GitCafe同時托管博客

修改部署配置文件

假設(shè)你已經(jīng)在Github和GitCafe創(chuàng)建了博客的repo振劳，Github項(xiàng)目名為User.github.io使用master分子,GitCafe就直接使用你的用戶名作為你的項(xiàng)目名使用gitcafe-pages分支椎组。

要使Hexo支持同時發(fā)布到多個git倉庫中。需要修hexo根目錄下的改_config.yml历恐。
原來的配置:

deploy:
type: github
repo: github: https://github.com/<username>/<username>.github.io.git
branch: master

改成

deploy:
   type: git
   repo: 
      github: https://github.com/<username>/<username>.github.io.git,master
      gitcafe: https://gitcafe.com/<username>/<username>.git,gitcafe-pages

或者按照Hexo Document的參考可以支持不同type類型的deploy Available Types: git, github, heroku, openshift, rsync

You can use multiple deployers. Hexo will execute each deployer in sequence.

deployer:
- type: git
  repo:
- type: heroku
  repo:

關(guān)于部署的相關(guān)說明可以參考Hexo的官方文檔 Deployment | Hexo

之后運(yùn)行hexo d -g分別輸入GitHub和GitCafe的用戶名和密碼即可完成部署工作寸癌，GitCafe上更新內(nèi)容需要一段時間。

Dnspod做定向DNS解析

在Dnspod國際版中選擇自己的域名弱贼，添加兩條A記錄蒸苇，國內(nèi)路線使用GitCafe（A地址：207.226.141.135 CName:gitcafe.io）國外走Github線路（A地址192.30.252.153及192.30.252.154）

Dnspod配置

Github綁定域名需要Hexo init根目錄下source目錄下的CNAME文件中我寫入了lotors.me，也就是說CNAME應(yīng)該在子目錄source下吮旅，而不是在Hexo init根目錄下溪烤。Github不支持多域名綁定，只能寫入一個庇勃，如需多個其實(shí)是可以在域名解析處自己設(shè)定的(顯式URL等)檬嘀。Gitcafe則可以綁定多個域名(參考Gitcafe的Pages幫助)，在博客項(xiàng)目頁面下項(xiàng)目管理->Pages服務(wù)->添加自定義域名添加自己的域名责嚷。

Hexo 2.x升至3.x

半年多沒關(guān)注hexo鸳兽，今天逛Github發(fā)現(xiàn)已近更新到3.1Released了，身為一個升級狂魔怎么能忍受low version呢罕拂，于是果斷開始折騰更新至3.x版本揍异，由于該版本將不同的內(nèi)核組件拆分出來(Breaking Changes in Hexo 3.0)，于是無法直接npm update hexo只好進(jìn)行重新安裝聂受，根據(jù)Github上的Wiki(Migrating from 2.x to 3.0)成功更新蒿秦。
首先修改hexo根目錄下的package.json烤镐，添加以下字段

{
+  "hexo": {
+    "version": ""
+  }
}

執(zhí)行以下升級命令

#Clean cache
hexo clean
#Install hexo-cli安裝命令行界面
npm install hexo-cli -g
#Install Hexo安裝hexo
npm install hexo --save
#Install generators安裝服務(wù)器
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
#Install server安裝服務(wù)器
npm install hexo-server --save
#Install deployers安裝部署器
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
#Update plugins更新插件
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

Hexo 3.x將至2.x

備份關(guān)鍵配置

由于hexo是在本地生成靜態(tài)文件后上傳到repo中蛋济，所以定期的備份本地hexo的關(guān)鍵配置，主題以及博文Markdown文件就十分必要炮叶，可以將文件備份到Github的一個branch,這里我備份資源路徑source/碗旅，模板文件scaffolds/,主題路徑themes/,hexo 配置文件_config.yml

#啟動git
git init
#創(chuàng)建并切換一個備份分支
git checkout -b backup
#添加跟蹤文件
git add source/ scaffolds/ themes/ _config.yml
#第一次提交
git commit -m "first backup"
#添加遠(yuǎn)程版本庫
git add origin https://github.com/fjkfwz/fjkfwz.github.io.git
#push到Github的backup分支
git push origin backup

主題及多說評論框樣式及USER ANGENT

yilia主題

現(xiàn)在這款主題模板叫做yilia渡处，Github上的開源項(xiàng)目yilia，或者使用我修改過的主題文件
修改_config.yml為

theme: yilia

多說評論框樣式

多說評論框UA顯示/博主標(biāo)記

embed.js多說核心庫本地化

多說社會化評論框核心腳本embed.js文件是個多說官方提供的公用文件祟辟，如果官方渠道過于擁擠医瘫，或者服務(wù)器故障，就可能導(dǎo)致頁面加載過慢或者完全無法加載旧困，如果我們將其下載下來醇份，放到我們自己的空間，就會使加載速度有一定的提升吼具，同時也可以對多說評論框做一些個性化調(diào)整僚纷，因?yàn)槲覀兪褂玫亩嗾f評論框主體代碼全部都在這里面。下載我修改過的embed.js文件放在主題目錄的source\js中拗盒。

需要修改 e.user_id == 你的多說的ID
多看ID可以在多說->個人資料->點(diǎn)擊用戶名轉(zhuǎn)到個人主頁
url http://duoshuo.com/profile/3731202/ 3731202為你的多說ID

應(yīng)用本地embed.js文件

修改主題目錄下layout_partical\post\duosuo.ejs中的ds.src為

ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '/js/embed.js';

添加文章目錄及版權(quán)信息

添加文章目錄及版權(quán)信息結(jié)構(gòu)

打開 \themes\your-theme\layout_partial\post 目錄下的 article.ejs 文件

/-----------\theme\your-theme\layout_partial\post\article.ejs---------/
<!-- 文章內(nèi)容 -->
<div class="article-entry" itemprop="articleBody">
  <% if (post.excerpt && index){ %>
    <%- post.excerpt %>
    <% if (theme.excerpt_link){ %>
      <p class="article-more-link">
        <a href="<%- config.root %><%- post.path %>#more"><%= __('excerpt_link') %></a>
      </p>
    <% } %>
  <% } else { %>
+    <!-- 文章目錄開始 -->
+    <% if (!index){ %>
+        <div id="toc" class="toc-article">
+            <strong class="toc-title"><%= __('contents') %></strong>
+        <%- toc(page.content) %>
+        </div>
+    <% } %>
+    <!-- 文章目錄結(jié)束 -->
    <%- post.content %>
+    <!--版權(quán)信息開始-->
+    <%- partial('post/copyright') %>
+    <!--版權(quán)信息結(jié)束-->
  <% } %>
</div>

添加版權(quán)信息模塊

在\themes\your-theme\layout_partial\post下建立版權(quán)模塊copyright.ejs,將lotors.me替換為你的域名

/-----------\theme\your-theme\layout_partial\post\copyright.ejs---------/
<div class="copyright">
  <span class="claim">版權(quán)聲明：自由轉(zhuǎn)載-非商用-無演繹-保持署名 @ lotors.me</span>
  <span class="from-link">
    <em>本文鏈接地址:</em>
    <a href="<%- url_for(path) %>">
      http://lotors.me<%- url_for(path) %>
    </a>
  </span>
</div>

添加文件樣式CSS

在\themes\your-theme\source\css_partial 目錄下的 article.styl 文件
在最后加入以下樣式

/--------\themes\your-theme\source\css_partial\article.styl------/

//版權(quán)信息CSS
.copyright {
  display: block;
  padding: 10px 20px;
  margin: 35px 0 25px;
  line-height: 24px;
  font-size: 14px;
  background-color: #FFFF33;
}
.copyright .claim {
  font-size: 15px;
  font-weight: 600;
  zoom: 1;
}
.copyright .claim:before,
.copyright .claim:after {
  content: "";
  display: table;
}
.copyright .claim:after {
  clear: both;
}
.copyright em,
.post-nav em {
  font-style: normal;
  color: #808080;
}
.copyright a:hover,
.post-nav a:hover {
  color: #c40000;
  text-decoration: none;
}    

//目錄CSS
.toc-article
  background color-toc-bg
  margin 2em 0 0 0.5em
  padding 1em
  strong
    padding 0.3em 0

#toc
  line-height 1em
  font-size 1.0em
  float right // 如果想在左邊怖竭，則把這里改成left即可
  .toc
    padding 0
    li
      list-style-type none

  .toc-child 
    padding-left 0.7em

添加變量

打開 \themes\your-theme\source\css 目錄下的_variables.styl``文件
任意一個位置添加以下顏色變量

color-toc-bg = #eee

附錄

多說評論框UA顯示/博主標(biāo)記javascript

//判斷是否為博主
function sskadmin(e) {
    var ssk = '';
    if(e.user_id==【你的多說id】){
        ssk = '<span class="sskadmin">博主【此處可以自定義文字】'
    }
    return ssk+"</span> ";
}
//顯UA開始
function ua(e) {
        var r = new Array;
        var outputer = '';
        if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
            outputer = '<span class="ua_ie">Internet Explorer' + '|' + r[0]/*.replace('MSIE', '').split('.')[0]*/
        } else if (r = e.match(/FireFox\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_firefox">Mozilla FireFox' + '|' + r1[1]
        } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_maxthon">Maxthon'
        } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_ucweb">UCBrowser' + '|' + r1[1]
        } else if (r = e.match(/MetaSr/ig)) {
            outputer = '<span class="ua_sogou">搜狗瀏覽器'
        } else if (r = e.match(/2345Explorer/ig)) {
            outputer = '<span class="ua_2345explorer">2345王牌瀏覽器'
        } else if (r = e.match(/2345chrome/ig)) {
            outputer = '<span class="ua_2345chrome">2345加速瀏覽器'
        } else if (r = e.match(/LBBROWSER/ig)) {
            outputer = '<span class="ua_lbbrowser">獵豹安全瀏覽器'
        } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_qq">微信' + '|' + r1[1]/*.split('/')[0]*/
        } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_qq">QQ瀏覽器' + '|' + r1[1]/*.split('/')[0]*/
        } else if (r = e.match(/QQ\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_qq">QQ瀏覽器' + '|' + r1[1]/*.split('/')[0]*/
        } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_mi">Miui瀏覽器' + '|' + r1[1]/*.split('/')[0]*/
        } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_chrome">Chrome' + '|' + r1[1]/*.split('.')[0]*/
        } else if (r = e.match(/safari\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_apple">Apple Safari' + '|' + r1[1]
        } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_opera">Opera' + '|' + r[1]
        } else if (r = e.match(/Trident\/7.0/gi)) {
            outputer = '<span class="ua_ie">Internet Explorer 11'
        } else {
            outputer = '<span class="ua_other">其它瀏覽器'
        }
        return outputer+"</span> ";
    }
    function os(e) {
        var os = '';
        if (e.match(/win/ig)) {
            if (e.match(/nt 5.1/ig)) {
                os = '<span class="os_xp">Windows XP'
            } else if (e.match(/nt 6.1/ig)) {
                os = '<span class="os_7">Windows 7'
            } else if (e.match(/nt 6.2/ig)) {
                os = '<span class="os_8">Windows 8'
            } else if (e.match(/nt 6.3/ig)) {
                os = '<span class="os_8_1">Windows 8.1'
            } else if (e.match(/nt 10.0/ig)) {
                os = '<span class="os_8_1">Windows 10'
            } else if (e.match(/nt 6.0/ig)) {
                os = '<span class="os_vista">Windows Vista'
            } else if (e.match(/nt 5/ig)) {
                os = '<span class="os_2000">Windows 2000'
            } else {
                os = '<span class="os_windows">Windows'
            }
        } else if (e.match(/android/ig)) {
            os = '<span class="os_android">Android'
        } else if (e.match(/ubuntu/ig)) {
            os = '<span class="os_ubuntu">Ubuntu'
        } else if (e.match(/linux/ig)) {
            os = '<span class="os_linux">Linux'
        } else if (e.match(/mac/ig)) {
            os = '<span class="os_mac">Mac OS X'
        } else if (e.match(/unix/ig)) {
            os = '<span class="os_unix">Unix'
        } else if (e.match(/symbian/ig)) {
            os = '<span class="os_nokia">Nokia SymbianOS'
        } else {
            os = '<span class="os_other">其它操作系統(tǒng)'
        }
        return os+"</span>" ;
    }
//顯UA結(jié)束

修改多說樣式

遠(yuǎn)程：在多說控制中心—>設(shè)置->自定義CSS修改
本地：在主題目錄source\css_partial\artical.styl中添加

/*
 * 多說評論的 CSS 樣式；
 * 作者：MinonHeart < http://me.hub.moe >陡蝇；
 * 完成時間：2014-09-26痊臭；
 * 最近更新：2015-03-30锌畸；
 * 其他說明：基于 Pagecho < http://www.v2ex.com/t/118650 > 的 CSS 樣式修改而來岛抄；
**/

#ds-thread #ds-reset .ds-powered-by, .ds-post-repost { display: none !important; }
#ds-reset .ds-gradient-bg, #ds-thread #ds-reset .ds-textarea-wrapper { background: none !important; }
#ds-reset .ds-like-thread-button, .ds-rounded{
    background: rgba(255,255,255,1) !important;
    box-shadow: 0 0 1px rgba(0,0,0,0.1) !important;
    border: 1px solid #ddd !important;
}
#ds-reset .ds-sync { display: none !important; } /* 隱藏評論框底部分享 */
#ds-thread #ds-reset .ds-post-button {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    left: auto !important; /* 不必要的語句 */
    color: #888 !important;
    font-weight: normal !important;
    outline: none;
}
#ds-thread #ds-reset .ds-post-button:hover { color: #333 !important; }
#ds-thread #ds-reset .ds-textarea-wrapper textarea { height: 54px !important; }
#ds-thread #ds-reset li.ds-tab a, #ds-thread #ds-reset #ds-bubble, #ds-reset .ds-avatar img { border-radius: 1px !important; }
#ds-thread #ds-reset li.ds-tab a:hover { background: #fff !important; }
#ds-thread #ds-reset li.ds-tab a.ds-current {
    background: #fff !important;
    border: none !important;
}
#ds-thread #ds-reset .ds-post-self {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
#ds-reset .ds-avatar img {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    padding: 1px !important;
    border-radius: 2px !important;
}
#ds-reset .ds-replybox .ds-avatar img {
    width: 50px !important;
    height: 50px !important;
}
#ds-thread #ds-reset #ds-bubble {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
}
#ds-thread #ds-reset .ds-replybox { padding-left: 70px !important; }
#ds-thread #ds-reset .ds-post-self { padding-left: 0 !important; }
#ds-thread #ds-reset .ds-inline-replybox {
    margin-top: 27px !important;
    margin-left: 0 !important;
}
#ds-thread #ds-reset a.ds-comment-context {
    border: 1px solid #E3EDF3 !important;
    background: #F7FAFB !important;
    padding: 2px 0 1px 3px !important;
    color: #555 !important;
    margin-right: 5px !important;
    border-radius: 1px !important;
}
#ds-thread #ds-reset li.ds-post-placeholder { padding: 20px 0 !important; }

body #ds-smilies-tooltip ul.ds-smilies-tabs li a {
    background-image: -webkit-gradient(linear,left 0,left 100%,from(#fff),to(#fff));
    background-image: -webkit-linear-gradient(top,#fff 0,#fff 100%);
    background-image: -moz-linear-gradient(top,#fff 0,#fff 100%);
    background-image: linear-gradient(to bottom,#fff 0,#fff 100%);
    border-bottom: 1px solid #e9e9e9;
}
body #ds-smilies-tooltip {
    border: 0 !important;
    margin-bottom: 1em !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.15) !important;
}
#ds-smilies-tooltip .ds-smilies-container { height: 180px !important; }
#ds-smilies-tooltip ul.ds-smilies-tabs { height: 180px !important; }
#ds-reset ul.ds-children .ds-avatar img {
    width: 35px !important;
    height: 35px !important;
}
#ds-thread #ds-reset .ds-comment-body p { margin: 10px !important; }
#ds-reset button {
    background: #fff !important;
    box-shadow: 0 0 1px rgba(0,0,0,0.2) !important;
    border: 1px solid #ddd !important;
}
#ds-reset button:hover {
    background: #ddd !important;
    box-shadow: 0 0 1px rgba(0,0,0,0.2) !important;
    border: 1px solid #ddd !important;
}
#ds-thread #ds-reset .ds-user-name { color: #0c94de !important; }
#ds-thread #ds-reset .ds-comment-header { margin-left: 10px !important; }
#ds-thread #ds-reset .ds-login-buttons .ds-more-services { color: #777 !important; }
#ds-thread #ds-reset .ds-login-buttons .ds-more-services:hover { color: #333 !important; }
#ds-thread #ds-reset ul.ds-comments-tabs .ds-highlight { margin: 0 3px 0 0 !important; }
#ds-thread #ds-reset .ds-time { margin-left: 10px !important; }
#ds-thread.ds-narrow #ds-reset .ds-comments .ds-avatar img {
    width: 35px !important;
    height: 35px !important;
}

#ds-thread #ds-reset .ds-comment-body img { max-width: 50px !important; } /* 復(fù)寫語句，max-width 的值要與下一句的 width 和 height 的值相同 */
#ds-thread #ds-reset .ds-inline-replybox .ds-avatar img {
    width: 50px !important;
    height: 50px !important;
}

#ds-thread.ds-narrow #ds-reset .ds-comments .ds-inline-replybox .ds-avatar img {
    width: 50px !important;
    height: 50px !important;
}
#ds-thread #ds-reset .ds-textarea-wrapper {
    border: 1px solid #ddd !important;
    border-bottom: none !important;
}
#ds-thread #ds-reset .ds-post-options {
    border: 1px solid #ddd !important;
    border-right: none !important;
}
#ds-reset .ds-rounded-top { border-radius: 1px 1px 0 0 !important; }
#ds-notify { border-radius: 2px !important; }
#ds-thread #ds-reset #ds-hot-posts { padding: 0 12px; }
#ds-thread #ds-reset .ds-header { padding: 0; } /* 復(fù)寫語句董栽，放在后面 */
/*多說UA開始*/
span.ua{
    margin: 0 1px!important;
    color:#FFFFFF!important;
    /*text-transform: Capitalize!important;
    float: right!important;
    line-height: 18px!important;*/
}
.ua_other.os_other{
    background-color: #ccc!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
}
.ua_ie{
    background-color: #428bca!important;
    border-color: #357ebd!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_firefox{
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_maxthon{
    background-color: #7373B9!important;
    border-color: #7373B9!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_ucweb{
    background-color: #FF740F!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_sogou{
    background-color: #78ACE9!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_2345explorer{
    background-color: #2478B8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_2345chrome{
    background-color: #F9D024!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_mi{
    background-color: #FF4A00!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_lbbrowser{
    background-color: #FC9D2E!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_chrome{
    background-color: #EE6252!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_qq{
    background-color: #3D88A8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_apple{
    background-color: #E95620!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.ua_opera{
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
 
 
.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
    background-color: #39b3d7!important;
    border-color: #46b8da!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
 
.os_android {
    background-color: #98C13D!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_ubuntu{
    background-color: #DD4814!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_linux {
    background-color: #3A3A3A!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_mac{
    background-color: #666666!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_unix{
    background-color: #006600!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.os_nokia{
    background-color: #014485!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
}
.sskadmin{
background-color: #00a67c!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
 
}
/*多說UA結(jié)束*/