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.

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>
8</ul>

Our snippet looks like this in the starter kit:

#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 }}
 2 
 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">{{ author.name }}:</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 }}
13 
14{{ /meerkat:responses }}

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

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 }}