Displaying Threads

#Newest comments first

Top-level comments return oldest first by default. Set order_by for newest-first:

1{{ meerkat:comments order_by="created_at:desc" }}
2 <article id="comment-{{ id }}">
3 <strong>{{ author_name }}</strong>
4 <time>{{ created_at format="M j, Y g:ia" }}</time>
5 <div>{{ comment_html }}</div>
6 </article>
7{{ /meerkat:comments }}
1<s-meerkat:comments order_by="created_at:desc">
2 <article id="comment-{{ $id }}">
3 <strong>{{ $author_name }}</strong>
4 <time>{{ $created_at->value()->format('M j, Y g:ia') }}</time>
5 <div>{!! $comment_html !!}</div>
6 </article>
7</s-meerkat:comments>

Use a pipe to sort by more than one field: created_at:desc|name:asc. Sorting applies only to top-level comments; replies remain chronological.

#Show reply counts and a "Reply" link

1{{ meerkat:comments }}
2 <article id="comment-{{ id }}">
3 <strong>{{ author_name }}</strong>
4 <div>{{ comment_html }}</div>
5
6 <footer>
7 {{ if replies_count > 0 }}
8 <span>{{ replies_count }} {{ replies_count == 1 ? "reply" : "replies" }}</span>
9 {{ /if }}
10
11 {{ if current_user:can_reply }}
12 <a href="?reply_to={{ id }}#comment-form">Reply</a>
13 {{ /if }}
14 </footer>
15
16 {{ if has_replies }}
17 <div class="replies">
18 {{ children }}
19 <article id="comment-{{ id }}">
20 <strong>{{ author_name }}</strong>
21 <div>{{ comment_html }}</div>
22 </article>
23 {{ /children }}
24 </div>
25 {{ /if }}
26 </article>
27{{ /meerkat:comments }}
1<s-meerkat:comments>
2 <article id="comment-{{ $id }}">
3 <strong>{{ $author_name }}</strong>
4 <div>{!! $comment_html !!}</div>
5
6 <footer>
7 @if ($replies_count > 0)
8 <span>{{ $replies_count }} {{ $replies_count == 1 ? 'reply' : 'replies' }}</span>
9 @endif
10
11 @if ($current_user['can_reply'])
12 <a href="?reply_to={{ $id }}#comment-form">Reply</a>
13 @endif
14 </footer>
15
16 @if ($has_replies)
17 <div class="replies">
18 @foreach ($children as $child)
19 <article id="comment-{{ $child['id'] }}">
20 <strong>{{ $child['author_name'] }}</strong>
21 <div>{!! $child['comment_html'] !!}</div>
22 </article>
23 @endforeach
24 </div>
25 @endif
26 </article>
27</s-meerkat:comments>

#"Your comment" indicator

1{{ meerkat:comments }}
2 <article id="comment-{{ id }}">
3 <strong>{{ author_name }}</strong>
4 {{ if current_user:is_author }}
5 <span class="badge-you">You</span>
6 {{ /if }}
7 <div>{{ comment_html }}</div>
8 </article>
9{{ /meerkat:comments }}
1<s-meerkat:comments>
2 <article id="comment-{{ $id }}">
3 <strong>{{ $author_name }}</strong>
4 @if ($current_user['is_author'])
5 <span class="badge-you">You</span>
6 @endif
7 <div>{!! $comment_html !!}</div>
8 </article>
9</s-meerkat:comments>

#Permalink to a single comment

1{{ meerkat:comments }}
2 <article id="comment-{{ id }}">
3 <header>
4 <a href="#comment-{{ id }}" class="permalink" aria-label="Permalink">#</a>
5 <strong>{{ author_name }}</strong>
6 </header>
7 <div>{{ comment_html }}</div>
8 </article>
9{{ /meerkat:comments }}
1<s-meerkat:comments>
2 <article id="comment-{{ $id }}">
3 <header>
4 <a href="#comment-{{ $id }}" class="permalink" aria-label="Permalink">#</a>
5 <strong>{{ $author_name }}</strong>
6 </header>
7 <div>{!! $comment_html !!}</div>
8 </article>
9</s-meerkat:comments>

Pass meerkat_jump="comment:id" to {{ meerkat:form }} to redirect to the new comment instead of #comments.

#When there are no comments

Use no_results for empty threads:

1{{ meerkat:comments }}
2 {{ if no_results }}
3 <p>Be the first to comment.</p>
4 {{ /if }}
5
6 <article id="comment-{{ id }}">
7 <div>{{ comment_html }}</div>
8 </article>
9{{ /meerkat:comments }}
1<s-meerkat:comments>
2 <s-no_results>
3 <p>Be the first to comment.</p>
4 </s-no_results>
5
6 <article id="comment-{{ $id }}">
7 <div>{!! $comment_html !!}</div>
8 </article>
9</s-meerkat:comments>

Was this page helpful?