在嵌套评论回复添加@功能
斌果在我的一篇评论比较多,而且嵌套特别多的文章下,指出了,这个页面在手机上简直不堪入目、惨不忍睹啊!
于是,碎碎念赶紧打开手机一看,诶,还不错啊,界面清爽,行距够大,视野很清新。再拉下去看看吧,卧槽!这评论!都特么靠边了!无法直视啊!为了避免评论多的文章瞎了大家伙的眼,俺立马就把样式表子评论右移的样式秒杀了,结果,界面是清爽了,可哪条回复的哪条,天知道啊?!
想要修改嵌套评论为并行评论已经是来不及了,因为嵌套评论的结构就放在那里,一下子修改为并行评论,不仅会导致评论结构混乱,而且内容上也失去了联系,那么我们只好在嵌套的评论上加上@功能了。。。对于以前的链接,以后再弄段比较稳定的代码自动补上@链接好了。
好吧,只好完成由来已久的心愿了,给嵌套评论添加@回复功能!
首先度娘了一番,NEOEASE的站有写过一篇添加@的文章教程,结果咱技术技术太菜,只好,放弃了。后面发现了这段代码,直接通过JQuery实现,我修改了下,使其支持@链接,这样通过点击@链接,就可以从子评论跳到主评论了。
一、添加评论@回复js代码
一下代码来源于网络,原作者链接暂无,如果你是原作,麻烦留言留下代码来源链接。
天空团gsky提示:代码来源自——伟大的zww.me大神!
js代码如下:可自行新建js文件调用,也可添加到已有的js文件,代码所在js文件必须在文章页面有调用,好啦,废话不多说,贴代码:
/* |
注意对照我所调用的相应div 的ID,对应你所要修改的主题,对照性修改!
二、修改CSS代码
接下来,把子评论的右移去掉(这玩意儿太占手机屏幕了!)
.commentlist li.comment ul.children {margin-left:20px;border-top: 0px;} |
把其中的margin-left:20px;
删去,或修改为margin-left:0;
三、清除function函数模板中的冲突函数
如果你的主题添加了评论跳转代码,则要修改其中的代码,避免造成@链接跳转错误。
可对照如下代码:
/*评论链接跳转*/ |
可以看到其中的第3行已经被我注释掉了,主要原因就是该行代码会在评论内容(text)存在的链接自动加上go跳转,我们原来的评论链接为:
<a href="#comment-976">@XXX</a>
其相当于完整链接:
<a href="http://zhuweisheng.com.cn/error-sto.html#comment-976">@XXX</a>
当被加上go跳转后则变成:
<a href="http://zhuweisheng.com.cn/?go=#comment-976">@XXX</a>
打开这个链接试试,是不是跳转到首页去了?
这样的话,@链接就失去意义了,为了防止这样的“悲剧”,我们一定要清除冲突的代码,给你的@巩固地位。
好啦,@评论已经完成了,用嵌套评论的孩子可以轻松撸起了!
感谢大神们的原创代码!