Saturday, December 23, 2006

내 댓글에 색깔 입히기 Author Comment Highlighting

내가 달은 답글에 색깔을 입히는 방법을 소개한다.
Original Source: Hackosphere: Author comment highlighting and notification
먼저 템플릿을 수정하기 전에, 블로그 로그인 -> 레이아웃 수정 -> HTML 편집 -> 전체 템플릿 다운로드하여 본인 템플릿을 백업용으로 저장을 한다. 혹시라도 템플릿을 잘못 수정했더라도 백업한 템플릿을 다시 올리면 되겠다.


템플릿에서 코멘트와 관련된 스타일시트를 붉은색으로 표시한 것과 같이 추가한다.
/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
.comment-body {
margin:0;
padding:0 0 0 20px;
}

.comment-body p {

font-size:100%;
margin:0 0 .2em 0;
}

.comment-body-author {

margin:0;
padding:0 0 0 20px;
}

.comment-body-author p {

font-size:100%;
margin:0 0 .2em 0;
color:#E1771E;
text-decoration:bold;
}

#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

템플릿에서 'comment-block'을 찾아서 붉은 색으로 표시한 코드를 삽입한다.
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'><dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

결과는 아래 그림과 같이 내가 쓴 답글의 색이 댓글과 달리 표시된다.

No comments:

Post a Comment