给评论增加鼠标停留在回复链接上悬浮显示相关评论的功能

这个功能还真不好描述，说全应该是：给Micolog评论中，增加鼠标停留在回复链接上，悬浮显示相关评论以及博主头像错位显示的功能。效果如本博客评论，引用功能觉得已经没什么用就去掉了。以下以iNove和Deniart主题为例进行说明。此功能是从wordpress的iNove主题html源码里里扒过来的，所以用iNove主题实现容易一些。Wordpress用户若要实现此功能可以移步至此

1.此功能需要jQuery min库的支持，主题里一般都有，一般在base.html里，如果没有就加上（最新1.3.2）

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2.下载commenttips.js 并将文件保存在主题文件夹下。以Devart为例（themes/Devart/commenttips.js），在comments.html中增加

<SCRIPT src="themes/Devart/commenttips.js" type=text/javascript></SCRIPT>

3.style.css 中追加样式代码如下

以iNove为例

#thecomments .tip {
    background:#FFF;
    border:1px solid #CCC;
    width:605px;
    padding:10px !important;
    padding:10px 10px 0;
    margin-top:0;
    position:absolute;
    z-index:3;
}
#thecomments .tip .act {
    display:none;
}
*+html #thecomments .tip {
    padding:10px 10px 0 !important;
}

以Deniart为例

#thecomments .tip {
    BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px! important; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 0px; PADDING-LEFT: 10px! important; Z-INDEX: 3; BACKGROUND:#A3B4A4; PADDING-BOTTOM: 10px! important; BORDER-LEFT: #ccc 1px solid; WIDTH: 635px; PADDING-TOP:10px! important; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute
}

#comments  LI{
    LIST-STYLE-TYPE: none;
}
#comments A {
    TEXT-DECORATION: none
}
#comments A:hover {
    TEXT-DECORATION: underline
}
#thecomments .tip .act {
    DISPLAY: none;
    FONT-SIZE: 10px; FLOAT: right
}
* + HTML #thecomments .tip {
    PADDING-RIGHT: 10px! important; PADDING-LEFT: 5px! important; PADDING-BOTTOM: 0px! important; PADDING-TOP: 5px! important
}

#comments .admincomment .comment-avatar {
    FLOAT: right
}
#comments .admincomment .comment-content {
    FLOAT: left;
    margin: 5px 0 0 5px
}
#comments .one_replyTo{
    float: right;
    padding: 0px 0px;
    margin: 0px 0px 0 0;
}

其中红色部分做了特别的修改来适应Deniart主题的需要（链接色彩部分省略），请参考改写。其中class one_replyTo是我用图片@做回复使用的，可以不添加。.admincomment 类是来实现博主错位功能的。为了兼容IE 需在ie.css中加入

#comments  LI{ float: left; }

4.下面以Deniart为例进行说明 改写comments.html文件。因需要加<OL>和<LI>标签，iNove不用了，其他照猫画虎就行。蓝色部分代码是实现博主头像为右对齐，其中邮箱改成您的邮箱。这里没有使用管理员帐户登陆的邮箱是为了方便更换，和主题关联、和后台源码分离更容易复制升级。这里邮箱以虽然明文出现，你不必担心，因为这是在执行时的判断 html源码中没有邮箱信息。在此感谢闫鹏提供ifequal判断判断语句，当时用if怎么试都不能成功！

    <div id="comments">
    <OL id=thecomments>

        {% for comment in entry.comments %}
          <LI id="comment-{{comment.key.id}}">
            {% ifequal comment.email 'hikefreeman@gmail.com' %}
                <div class="comment admincomment" id="comment-{{comment.key.id}}">
            {% else %}
                <div class="comment regularcomment" id="comment-{{comment.key.id}}">
            {% endifequal %}

                <div class="comment-avatar">
                    <img height="50" width="50" class="avatar avatar-50" src="{{comment.gravatar_url}}" alt=""/>
                </div>

                <div class="comment-content">
                    <div class="comment-info">
                        <span>
                            {%if comment.weburl %}
                                <a id="commentauthor-{{comment.key.id}}" href="{{comment.weburl}}" target="_blank" >{{comment.author}}</a>
                            {% else %}
                                {{comment.author}}
                            {%endif%}
                        </span>

                        <a href="#comment-{{comment.key.id}}" title="">{{comment.date|datetz:"Y-m-d"}} at {{comment.date|datetz:"H:i"}}</a>

                <span class="one_replyTo">
                        <span title="回复{{comment.author}}" onclick="return backcomment('{{comment.author}}',{{comment.key.id}});" style="cursor: pointer;" class="add">
                            <img alt="回复" src="/Devart/images/notify.png"/>
                        </span>
                </span>

                        </div>

                    <p id="quote-{{comment.key.id}}">{{comment.content}}</p>
                </div> 
            </div>
            </LI>
        {% endfor %}

</OL>

    </div>

5.回复引用的js代码 学习见给Micolog评论增加简单的回复引用功能。也可以用下面的代码，在之前的基础上做了一点改动（增加回复链接，改回复为追加回复），优点是比其它代码都短。有时间开一篇博文总结几个回复的js代码。

function backcomment(author,id){
    backdb=document.getElementById('comment');
    backdb.focus();
    backdb.value=backdb.value+'<a href=\"#comment-'+id+'\">@'+author+'<\/a>'+'\n';
    return false;
}

建议和其他js代码保存在一起调用js文件。如果您用ajax提交最好修改如下红色部分：

function add_comment(msg)
{
  comment=$(msg)
  if (!loadjs)
  {
    $("#thecomments").append(comment).show();
    $.getScript("http://hou-kai.appspot.com/themes/Devart/jquery.color.js", function(){
         comment.animate( { backgroundColor: '#fbc7c7' }, "slow")
            .animate( { backgroundColor: '#BFCEC3' }, "slow")
                    loadjs=true;
                });
  }else
  {
    $("#thecomments").append(comment);
      comment.animate( { backgroundColor: '#fbc7c7' }, "slow")
                    .animate( { backgroundColor: '#BFCEC3' }, "slow")

  }
        $("#comment-num").html(parseInt($("#comment-num").html()) +1);
        $("#commentcount").html(parseInt($("#commentcount").html()) +1)
}

6.为了使首页的最新评论不显示超链接代码，做过滤。打开model.py，大概在464行。代码修改如下，复制红色部分即可（下面代码是在加标签的基础上）。注意[：len]的位置有所改变！

@property
def shortcontent(self,len=24):  #self.content[:len].replace
    scontent=self.content.replace('<br />','&nbsp;').replace('<img src=http://img.houkai.com/static/i/i_','(').replace('<a href="#comment-','').replace('">','').replace('</a>','').replace('_h.gif />',')').replace('<','&lt;').replace('>','&gt;')[:len]
    return scontent

7.刷新一下localhost:8080试试。等待js加载完毕再试效果！

至于为什么不用嵌套回复，1.实现起来确实不容易。2.见此博文，iNove主题作者的说法。

（9.21日更新）

本文永久链接  http://www.houkai.com/2009/09/16/micolog-comment.html
转载注明来自  HOUKAI.COM