今天逛本博客主題的編寫者的博客的時(shí)候湘今，看到了他的評(píng)論系統(tǒng)效果十分的好看，于是好奇心起剪菱，也打算自己弄一個(gè)一樣的摩瞎。
1. 已經(jīng)做好的文件
在多說設(shè)置里用的css文件
樣式的ejs文件
本地修改的ejs文件
2. 把embed.js傳到云端
把剛才下載的樣式的ejs文件上傳到一個(gè)任意的地方
比如我是復(fù)制到本地blog/themes/yelee/source/js/下邊，上傳到git后訪問的地址就是https://xianwx.github.io/js/embed.js)
3. 瀏覽器孝常、系統(tǒng)標(biāo)識(shí)
- 使用上邊的
本地修改的ejs文件旗们，把內(nèi)容整個(gè)拷貝粘貼到yelee/layout/_partial/comments/duoshuo.ejs（注：使用跟我一樣主題的人用） - 其它主題的人：找到多說的ejs，給其控件的src賦值為你的embed.ejs的地址
var duoshuoQuery = {short_name:"<%=theme.duoshuo.domain%>"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
`ds.src = 'http://moxfive.xyz/resources/embed.js'`;
/*上面是我自己的 embed.js 鏈接构灸，請(qǐng)改為你自己的地址*/
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
4. 引入 Font Awesome
打開theme/你的主題/layout/_partial/head.ejs
輸入
<link rel="stylesheet" >
如果已經(jīng)有了就不需要加了
5. 添加css
打開http://你的多說域名.duoshuo.com/admin/settings/
拷貝樣式的ejs文件的內(nèi)容
按照后臺(tái)添加css里的步驟上渴，添加自定義css
① 博主標(biāo)志
在評(píng)論里，點(diǎn)自己的頭像喜颁，進(jìn)入http://duoshuo.com/settings/avatar/頁面稠氮，點(diǎn)自己名字，進(jìn)入http://duoshuo.com/profile/你的uid/界面洛巢，復(fù)制你的uid
打開剛才的embed.js文件括袒，把你的uid復(fù)制到里邊“你的uid”位置
function sskadmin(e) {
var ssk = '';
if (e.user_id == 你的uid) {
if (checkMobile()) {
ssk = '<span class="ua"><span class="sskadmin">博主</span></span><br><br>';
} else {
ssk = '<span class="ua"><span class="sskadmin">博主</span></span>';
}
} else {
if (checkMobile()) {
ssk = '<br><br>';
}
}
return ssk;
}
并確保剛才添加到后臺(tái)的css里有以下代碼（剛才下的已經(jīng)自帶了）：
/*博主標(biāo)記 CSS*/
.sskadmin {
background-color: #00a67c!important;
border-color: #01B171!important;
border-radius: 4px;
padding: 0 5px!important;
opacity: .4;
}
.sskadmin:hover {
opacity: 1;
}
以下內(nèi)容上文提供的下載的css都已經(jīng)有了，只是講解其功能稿茉，不喜歡可以刪掉
② 鼠標(biāo)懸停旋轉(zhuǎn)頭像
/*頭像樣式*/
#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}
#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .9s;-moz-transition: .9s;-o-transition: .9s;-ms-transition: .9s;padding: 2px;border: 1px solid #ddd;background: #fff;}
/*鼠標(biāo)懸停旋轉(zhuǎn)頭像*/
.ds-post:hover .ds-avatar img{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}
#ds-reset .ds-avatar img:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}
③ 通用樣式
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
.ds-post:hover{background:#eee !important;}
#ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;}
#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;}
#ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;}
#ds-thread{
border-radius: 3px;
}
/** 多說最近留言樣式 **/
#ds-recent-comments .ds-avatar img{
width:54px;height:54px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius:50%;
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;
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-recent-comments .ds-avatar img:hover{
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);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
④ 按鈕樣式
修改了透明度锹锰、背景、邊框樣式
.ds-meta {
opacity: .5;
}
.ds-meta:hover {
opacity: 1;
}
#ds-thread #ds-reset a.ds-like-thread-button {
background-image: none;
background-color: #fee2d3;
border: none;
text-shadow: none;
font-family: inherit;
}
⑤ 剩余自定義樣式查看參考資料
參考資料
多說樣式折騰記錄 — 添加 UA 瀏覽器標(biāo)識(shí)恃慧、旋轉(zhuǎn)頭像等
多說后臺(tái)自定義css
