The Comment Thread

In the last section of this guide, Integrating Meerkat we learned about integrating the Meerkat comment form. In this section, we will look at building the comment thread on your actual website so other users can view submitted comments. We will continue utilizing the Cool Writings Statamic starter kit.

While Meerkat's collection syntax is very close to Statamic's, you should not use Statamic's filter syntax when working with Meerkat threads. Please check out the Basic Filtering guide for more information.

We will be using the following HTML snippet to create our simple comment thread:

1<ul class="list-none mx-auto mt-5 p-5">
2 <li class="relative flex w-full flow-root">
3 <div class="relative">
4 <p class="block font-bold p-3 lg:text-lg">Author Name:</p>
5 <p class="block static text-justify text-xs sm:text-sm lg:text-lg p-3">The comment content</p>
6 </div>
7 </li>

Our snippet looks like this in the starter kit:

Snippet Preview

#Meerkat Responses Overview

The {{ meerkat:responses }} tag is used to gain access to the comments for any given page on your Statamic site. This is an incredibly powerful tag, and documenting all of its features is outside the scope of this simple guide. For an example of how simply powerful this tag is, we can implement our first comment thread with this:

1{{ meerkat:responses }}
3 {{ comments }}
4 <ul class="list-none mx-auto mt-5 p-5">
5 <li class="relative flex w-full flow-root">
6 <div class="relative">
7 <p class="block font-bold p-3 lg:text-lg">{{ }}:</p>
8 <p class="block static text-justify text-xs sm:text-sm lg:text-lg p-3">{{ content }}</p>
9 </div>
10 </li>
11 </ul>
12 {{ /comments }}
14{{ /meerkat:responses }}

Building Advanced Threads

This article just contains the most basic way to integrate a comment thread. Consider checking out the Responses and Replies article for more information how to build highly customized comment threads.

If we refresh our page, we should now see the comment we submitted in the previous guide appear on our page:

Our First Comment Rendered

By default Meerkat will not display spam or pending comments; if your comment does not appear you should try approving it first from the Statamic Control Panel.

Congratulations! You've successfully implemented the Meerkat comment system on your Statamic site with daylight to spare! Of course, this guide has only scratched the surface of the powerful things you can accomplish with Meerkat, but should definitely get the ball rolling!

#Displaying Responses from Other Entries

To display comment responses from other entries using the meerkat:responses tag, you may use the from_thread parameter:

1{{ meerkat:responses from_thread="8e4b4e60-5dfb-47b0-a2d7-a904d64aeb80" }}
2 {{ comments }}
3 {{ content }}
4 {{ /comments }}
5{{ /meerkat:responses }}

Some absolutely amazing

The following amazing people help support this site and my open source projects ♥️
If you're interesting in supporting my work and want to show up on this list, check out my GitHub Sponsors Profile.