Add comments to an Eleventy site

Eleventy outputs plain static HTML, so comments have to come from the outside. Connect integrates directly in your post layout, whatever templating language you use. The examples below are Nunjucks, the most common choice; the Liquid versions are nearly identical.

1. Add the snippet to your post layout

In your post layout, for example _includes/layouts/post.njk, after the content:

{% if comments != false %}
<div id="hakanai-connect"></div>
<script async src="https://connect.hakanai.io/embed.js"
  data-key="YOUR_SITE_KEY"
  data-page-id="{{ page.url }}"></script>
{% endif %}

Replace YOUR_SITE_KEY with the public key from your dashboard.

The if comments != false guard lets you turn comments off on any post from its front matter:

---
title: My post
comments: false
---

If you prefer a reusable include, move the snippet to _includes/comments.njk and include it from the layout instead.

About the page id

The snippet uses page.url as the page identity. Eleventy derives it from your directory structure and permalink settings, so it is stable as long as those do not change. If you expect to restructure URLs, prefer a value that never moves, such as the file slug:

data-page-id="{{ page.fileSlug }}"

Whatever you choose, choose once: changing the page id scheme later detaches existing comments.

Comment counts on list pages

On your index page, add a counter element inside the posts loop:

{% for post in collections.posts %}
  ...
  <span data-connect-count="{{ post.url }}"></span>
{% endfor %}

Then follow the comment counts guide. Use the same values as your page ids so counts and threads match.

Local preview

eleventy --serve runs on localhost, which is not one of your declared domains, so comment submission is rejected there. Reading works. Add your staging domain under Site settings if you want to test posting before going live.