[BlogEngine]Enable Nested Comments

5.3 - Nested Comments

BlogEngine.NET version 1.5 introduced nested comments! This allows a visitor on the blog to leave a comment addressing another person's comment. There's only three requirements to have this functionality.
1. The "Enable nested comments" checkbox on the Settings tab in the control panel must be checked.
2. The theme must have two pieces of markup in its CommentView.ascx file.

<%= ReplyToLink %>

A good place to insert this ReplyToLink markup is under the comment where the other footer links are located (Flag, AdminLinks, etc). When nested comments are supported and enabled, the ReplyToLink markup above will render a "Reply" link for each comment. When the "Reply" link for a comment is clicked, this tells BlogEngine the visitor wants to reply to this comment. Additionally, when the "Reply" link is clicked, the comment form and input fields (name, email, website, message, etc) will be re-positioned below the comment the visitor wants to reply to.

The other required markup in CommentView.ascx follows:
<div class="comment-replies" 
       id="replies_<%=Comment.Id %>" <%= (Comment.Comments.Count == 0) ? " style=\"display:none;\"" : "" %>>
       <asp:PlaceHolder ID="phSubComments" runat="server" />
</div>
You would want to place the above markup towards the bottom of CommentView.ascx -- so the nested comments are displayed after the comment being replied to.
Additionally, for the markup above, it's important the placeholder has an ID of phSubComments, the DIV has a class of comment-replies and the DIV is given the exact ID shown above.
3. CSS styles in the style.css file.
CSS styles for nested comments should be added in the theme's style.css file. In the Standard theme, the CSS defined for the comment-replies class on the DIV shown above (and related nested comments CSS) is defined as:
.comment-replies {
    backgroundtransparent url(../../pics/reply-arrow.gif) no-repeat 2px 2px;
    padding0 0 0 15px;
    margin5px 0 0 0;
}
#commentlist #comment-form {
    bordersolid 1px #ccc;
    background#fff;
    padding10px;
    margin10px 0;
}
You may of course define your own custom comment-replies CSS class in your theme's style.css file. The one shown above is designed to visually indicate the nested comment(s) are in reply to a parent comment.

From: http://blogengine.codeplex.com/wikipage?title=ThemeCreation&referringTitle=Documentation

blog comments powered by Disqus