一直觉得iMucid的评论样式还不是很“爽”,于是偶又“蛋疼”起来……
昨天在 MOPVHS 的论坛闲逛,发现一个可以隐藏评论者的Name,Email,和Websie表单的东东。
其实这个东东是我很早就想加上去的一个功能。其实好多主题就有这个功能,比如MG12的iNove。
真乃天赐我也,终于找到了一个可以用JQery实现的方法。
不仅可以隐藏输入表单,还可以实现显示“Welcome back xxx !”的效果。
其实很简单,就是用一个Div将name,email,website封装起来,然后由JQery实现控制。具体就不说了,大家可以问一问MOPVHS。
看一下啊演示效果吧:
也就是说,第一次输入留言者名称,邮箱,网站,并且成功留言后,就可以将它们都隐藏起来,就像注册用户登录了一样。如果想换留言者身份,只要点击一下那个“Change”就行了。
我想了想,叫他什么好呢?对了,就叫它“伪登陆”吧!
改着改着,觉得我的嵌套回复不好看,而且还有很大的Bug,那就是多人进行讨论的时候,就失去了层次样式。
当然这个主要怪我,因为我木有用嵌套回复插件,我的嵌套回复是调用的WP原生态的,所以可以说是自己写的!
当然比较麻烦的就是嵌套回复的CSS,我当初写CSS的时候,只考虑到了两个人不停的“打架”的情况,而木有考虑到一群人“打群架”的情况。
因此,一个层的人数越多,就越木有层次样式了。
所以,我干脆重写了嵌套回复的CSS。
其实写好嵌套回复的CSS并不难,关键是逻辑问题!
其实众所周知,所谓的嵌套回复其实就是一个不断递进的无序列表,因此,在没有插件和JS的辅助下,就只有一层一层的写了!
我把自己写的嵌套回复的CSS贴出来供大家参考。
.commentlist { //整个评论主体
width:95%;
margin-left: 25px;
list-style: none;
}
.commentlist li.comment { //评论第一层
width:95%;
margin-bottom:20px; //外边距,因为是嵌套主层次,所以应该加底边距分开嵌套“楼主”。
padding:0 0 5px 13px; //内边距,主要是分开更加深的楼层,和左边偏移量,可继承!
position: relative;
border: 1px solid #222;
line-height: 24px;
background:#222; //第一层,底色为222
}
.commentlist li li.comment{
background:#333; //第二层,底色为333,对比之下层次就出来了
margin-bottom:10px; //据我发现,外边距无法继承,所以每层都需要写。
}
.commentlist li li li.comment{
background:#222; //第三层,底色为222。
margin-bottom:10px; //同理要写上底部外边距。
}
.commentlist li li li li.comment{
background:#333; //第四层,底色为333。
margin-bottom:10px; //记得加上底外边距。
}
.commentlist li li li li li.comment{
background:#222; //第五层,底色为222。
margin-bottom:10px; //最后的底外边距。
}
其实,我只开了五层的嵌套,WP而默认最大可以开到10层。
你可能觉得奇怪,我为什么只开了5层,有两个原因:
1.楼层多了缩放太大,评论空间就很小了。
2.我只写了5层的css啥^_^
好了,层是被我搞好了,但是还是觉得不好看,那就是——间距太大了。
因为我开始是以Gavatar头像的宽度来分层的,这样很“宽”,很“豪放”,其实也很“紧张”,很“纠结”。
所以干脆将评论内容和Meta分开。
鼓捣了半天,顿时舒爽了很多,这样我就有信心写到10层的嵌套回复啦!
这样一处理,顿时感觉评论层次更加清晰了,但是问题是我只开了5层嵌套,到最后就只有点击顶层进行回复了,
怎样才能分的更加清晰呢?
Oh,我想起了@回复,对了在用户点击回复按钮的时候,自动将被回复者的名称和楼层信息添加进去!
这样就再也不会“荷花水不清”鸟。
在这里要感谢Axiu哥,和ZWW大神提供的JQery实现的添加@回复了!
鼓捣了半天,又被我和谐进去了。
想了想,我已经为评论添加了四个js了啊,一个是Willian大湿的Ajax,一个是“Ctrl+enter”键盘快捷键回复,一个是“伪登陆”,一个是“@回复”。
Ajax工程浩大,我就不动它了,于是干脆将“Ctrl+enter”,“伪登陆”和“@回复”的js “合体” 鸟,顿时感觉清爽了许多多!
这样一来,不管童鞋们怎么“打架”,都不会打的“稀里糊涂”啦^_^
主要问题是解决了,可是细节问题也不少。
我怎么就会善罢甘休滴停下呢,所以下一个目标就是Wilian大湿的Ajax回复了。
众所周知,Willian大师系台湾淫,所以造出来滴东西也系繁体字,起码首先偶得把他改成简体吧。
于是小改了一下Ajax-comment.js终于将其“汉化”鸟。
然后就是修改令我比较不爽的,评论提交成功后的,“再修改”提示。
我给他变了色,而且还加上了黄色的下划线,希望有促使淫点击修改的“欲望”。
iMucid Theme的评论,不管是评论主体,还是留言form,算是都被我折腾的差不多了吧,接下了应该可以在这个块块清闲一下了吧^_^
好了,最后啰嗦一句,其实本主题的最佳浏览器是基于Gecko核心的Firefox,和Opera,因为他们都支持闪烁文字^_^
PS:其实Chrome也不差,但是一句话,只要是非IE内核的浏览器都不差!
好像没觉得有什么大变化
我也想实现这个效果啊~~
恩,折腾的不错
我来顶顶
@云在天边 干吗冒汗啊大哥
嵌套回复的代码还真嵌套着写的啊,汗。。。
@vastar 我的最新文章有新方法,当终究还是套着写的。
终于发现变化了
比之前是好看多了。
@7cbt 大哥啊,原来你一直用的世界之窗啊
代码好深奥
生命在于折腾
@蛋卷 生命不止折腾不休
这个排列不错啊
@小羿 小羿是纯版白色,偶系黑的诱惑
我也折腾出来了“伪登陆”
@Ygs 赞一个
真能折腾啊 呵呵
评论的地方很难看啊,老是超出你的页面了
@七叶草 抓到了,你用滴IE6,神马神奇的事情都会发生。。试试Firefox,Chrome或者Opera看看。。
测试评论
@zwwooooo 感谢Zww大神啊!
不小心的过客
写了段代码,你参考下,应该可以替换掉你上面的代码
.commentlist {
width:95%;
margin-left: 25px;
list-style: none;
}
.depth-1 { /*第一层评论*/
width:95%;
margin-bottom:20px;
padding:0 0 5px 13px;
position: relative;
border: 1px solid #222;
line-height: 24px;
background:#222;
}
.depth-3,
.depth-5,
.depth-7,
.depth-9{
background:#222;
margin-bottom:10px;
}
.depth-2,
.depth-4,
.depth-6,
.depth-8,
.depth-10{
background:#222;
margin-bottom:10px;
}
最后面的 background:#222; 我写错了
@braxiu 嗯,这个应该是层次选择器了,我还木有接触到哦,分基数和偶数啊,只要把li替换就行了啊^_^还是braxiu最NB!
只是控制class的样式而已,wp的嵌套评论会加上 depth-x 这样的class
@braxiu 嗯,我测试了半天发现有的要改,第一层要保持为.commentlist li.comment然后后面的要改为
.commentlist .depth-3.comment这样,觉得depth-3应该就是li li li了,但是奇怪的是为什么不可以把第一层写为.commentlist depth-1.comment呢?
@mucid
再给个你参考下,测试过,样式跟你的一样了
.commentlist {
width:95%;
margin-left: 25px;
list-style: none;
}
.commentlist .comment{
display:block;
padding:0 0 5px 13px;
line-height: 24px;
width:95%;
border: 1px solid #222;
margin-bottom:10px!important;
}
.depth-1{margin-bottom:20px; }
.depth-1, .depth-3, .depth-5, .depth-7, .depth-9{ background:#222;}
.depth-2, .depth-4, .depth-6, .depth-8, .depth-10{ background:#333;}
@braxiu 呃,你的这个头像会乱飘,我改了下,现在是
.commentlist .comment {
width:95%;
margin-bottom:20px;
padding:0 0 5px 13px;
position: relative;
border: 1px solid #222;
line-height: 24px;
background:#222;
}
.commentlist .depth-3.comment,
.commentlist .depth-5.comment,
.commentlist .depth-7.comment,
.commentlist .depth-9.comment{
background:#222;
margin-bottom:10px;
}
.commentlist .depth-2.comment,
.commentlist .depth-4.comment,
.commentlist .depth-6.comment,
.commentlist .depth-8.comment,
.commentlist .depth-10.comment{
background:#333;
margin-bottom:10px;
}
我不喜欢用!important,觉不觉得这样更加层次清晰呢,谢谢哦!