折腾Blogger评论

折腾
(pic via)

我绝对是一个不折腾会死星人,最近也没干啥事儿,也就整天没完没了地折腾Blogger的评论而已。折腾多了,也积累了一些心得相与大家分享,于是便有了此文。


评论者头像样式


Blogger官方会自动给你的评论者头像设置好CSS,这样一来对于评论样式比较复杂的模板来说肯定不好看,不过要修改也很简单,只要添加的CSS选择器与官方添加的一样即可覆盖

举个例子,官方的定义头像的位置的CSS是这样的:

#comments-block .avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}


你只要把上面的代码粘贴进你的模板XML的CSS部分,然后根据你的需要对其样式进行修改或添加即可,但是选择器千万不要动

还有一点需要注意:不要把原有的代码去掉,比如你对position:absolute;不满意时应该把它改为position:static;而不是直接删去,虽然正常情况下效果是一样的,无奈这不是一般情况。

至于查找那些官方的CSS,个人强烈建议使用万能的Firebug

描点平滑滚动


本来这个的使用范围不局限于评论评论,但的确是在@评论下使用得最多,因此这里也说一下。

我使用的是Yinheli页面内锚点平滑移动,其对于在评论中调用虽然不错,但无法应用到全局,有点不爽。直接用("a[href=*]")的话又会在某些链接下出问题导致无法点击,后来经过研究,使用以下的代码进行调用:

$(document).ready(function() {
  $('a').click(function(){
    $($(this).attr("href")).addClass("smooth");
    if ( $($(this).attr("href")).hasClass("smooth") ){$($(this).attr("href")).ScrollTo(1000);return false;}
  });
});


注意这只是调用部分而已,在这个之前你必须先引入jQuery原文里那长长的JS代码

@Someone评论预览


@评论预览

这是今天的最新战果,效果华丽,最重要的是很实用,实现起来也不算太难。但是要求你对模板CSSjQuery必须有相当程度的熟悉,尤其是CSS,否则很容易出现这样那样的问题。

还是Yinheli,他的鼠标悬浮实现显示留言内容(上)(下)有非常详细的解释。值得一提的是这个技巧对于不同的模板会有一些差异,因此建议大家最好还是先学习学习jQuery,不然真的很烦。

另外在Blogger下有一点非常关键,搜索<b:loop values='data:post.comments' var='comment'>,可以找到类似下面的代码:

<b:loop values='data:post.comments' var='comment'>
<div expr:id='data:comment.anchorName' class='thecomment' >
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

…………
此处代码根据模板不同而不同,故省略
…………

</dd>
</div>
</b:loop>


注意上面红色的部分,大多数模板都没有这些代码,一定要加上才可以实现评论预览,同时在作者的文章末贴出的完整JS代码中的parents("li")必须改为parents(".thecomment")

另外如果你的博客的@评论链接点击后没有反应的话,加上以上红色的代码也可以解决问题。

如果你成功实现了的话,多半会发现预览的样式有问题,没办法,因为官方强制给你的CSS代码会捣乱……比如上面提到的定义头像位置的CSS,因为它包含了路径,在评论预览中没有效果,因此必须再添加一些CSS代码来纠正,像我的模板是这样:

.avatar-image-container {
height:37px;
position:absolute;
width:37px;
left:12px;
}


其他还有一些细节的调整,也不说了。另外我的其实还有点问题,当悬浮预览时页面下方会多出一大片空白,然而我在本地和另一个模板测试时就没问题,具体原因仍在调查中。虽然这对用户体验基本没影响,但对于被完美主义迫害的我来说实在很不爽……

更新:问题已解决,具体如何请看下一篇文章

当然到了你的模板估计还要添加一些杂七杂八的东西,总之,折腾吧。说实话,要不是我对CSS还算熟悉,我肯定倒下了……



我承认我写得很笼统,没怎么考虑到新手,最关键部分又都是请别人来说话,不知道对大家能有多大帮助……于是又写了一篇详细一点的教程如果你有哪里看不懂或感到不解的话,不妨在那边留言。不过我觉得最好还是去学习HTML/CSSjQuery

这几天折腾的成果大体就是这些,很麻烦,很折腾人,但是这折腾肯定还会继续下去,就像Sofish所说的一样:“UI设计是一个不断改进的过程”。

P.S.其实最近我折腾最多的不是这几个,而是在内页进行@评论的方法,可惜Blogger的内页评论是内嵌在iframe中的,用JS很难动到那里,无奈了……

8 comments now

  1. 真的很实用啊,太华丽了!
    ...我那不盒鞋的留言...

    回复删除
  2. 你写的连我都看得晕……

    回复删除
  3. @小天:是的,本来就没打算让大家看懂,对原文进行补充而已

    回复删除
  4. 折腾的真够味,不过墙的缘故,折腾的很累人,估计有生之年也难看到blogger解封了。

    回复删除
  5. @小毅:不必如此悲观啦,明年我们还有半年的世博会呢

    回复删除
  6. well.. it's like I thought!

    回复删除
  7. 怎么还是搞定不定呢

    回复删除