这个功能还真不好描述,说全应该是:给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}}
60; {%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 />’,' ’).replace(‘<img src=http://img.houkai.com/static/i/i_’,'(‘).replace(‘<a href="#comment-’,”).replace(‘">’,”).replace(‘</a>’,”).replace(‘_h.gif />’,')’).replace(‘<’,'<’).replace(‘>’,'>’)[:len]
return scontent
7.刷新一下localhost:8080试试。等待js加载完毕再试效果!
至于为什么不用嵌套回复,1.实现起来确实不容易。2.见此博文,iNove主题作者的说法。
(9.21日更新)