Overview

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 using the Redwood theme that ships with Statamic as the basis for this guide, and will be building on the modifications made in the last step.

Additionally, we will be using Bootstrap's media component to implement the comment feed. For reference, this is the markup for Bootstrap's media element:

<div class="media">
    <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla...
    </div>
</div>

For more information on Bootstrap's media component, view their documentation here.

Meerkat Responses Overview

The {{ meerkat:responses }} tag is used to gain access to the comments for any given page on your Statamic site. This tag has been designed to behave like Statamic's {{ collection }} tag; you can learn more about this tag here. When we implement our comment thread on our page, it will look similar to this:

{{ meerkat:responses }}
    <div class="media">
        <div class="media-body">
            <h4 class="media-heading">{{ name }}</h4>
            {{ comment }}
        </div>
    </div>
{{ /meerkat:responses }}

Just like Statamic collections, you can paginate, scope data, filter and perform complex operations on Meerkat response collections.

Implementing the Thread

To implement the simplest comment thread within the Redwood theme, we will add the following code to the themes/redwood/templates/blog/post.html file below the comment form added in the previous step:

{{ meerkat:responses }}
    <div class="media">
        <div class="media-body">
            <h4 class="media-heading">{{ name }}</h4>
            {{ comment }}
        </div>
    </div>
{{ /meerkat:responses }}

Once added, the contents of the post.html file should look like this:

<section class="regular">

    <header>
        <div class="meta clearfix">
            <div class="author">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/48.jpg"
                     class="img-circle" width="48" height="48">
                <div class="pull-left">
                    <a href="" class="name">{{ author_name }}</a>
                    <span class="length">{{ content | read_time }} minute read</span>
                </div>
            </div>
            <div class="date">
                {{ date format="F j, Y" }}
            </div>
        </div>
        <h1>{{ title }}</h1>
        {{ sub_title wrap="h2" }}
    </header>

    <article class="content">

        {{ if intro_image }}
            <p><img src="{{ intro_image }}" class="intro-image"></p>
        {{ /if }}

        {{ content }}

        <ul class="tags">
        {{ tags }}
            <li><a href="{{ url }}">{{ title }}</a></li>
        {{ /tags }}
        </ul>
    </article>


    {{ meerkat:create }}

    {{ fields }}
    <div class="form-group">
        <label>{{ display }}</label>
        <input type="text" name="{{ field }}" value="{{ old }}" class="form-control" />
    </div>
     {{ /fields }}

    <input type="submit" value="Submit your comment!">
    {{ /meerkat:create }}

    {{ meerkat:responses }}
    <div class="media">
        <div class="media-body">
            <h4 class="media-heading">{{ name }}</h4>
            {{ comment }}
        </div>
    </div>
    {{ /meerkat:responses }}

</section>

{{ partial:article-footer }}

When we reload the page, we should see something similar to the following:

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 definately get the ball rolling!