read

Blogging is a beautiful way to communicate with your readers, but adding some interaction with your audience can be beneficial to gather feedback. Whether you have a corporate blog to make announcements or just a personal blog with your life memories, adding comments is a great way to capture your readers' feedback.

Disqus is a comments platform where you can embed a code into your theme, and a comments section will appear for your articles. The benefits of Disqus are that they have automatic spam detection and social media integration. It also supports Post Reactions, where with a single click, your audience can let you know if they liked, loved it, or else!

As it turns out, there's already a Grav plugin for Disqus Comments, which you can download from Grav Disqus Comments Plugin. It seems to have not been updated in a very long time. However, it's still working correctly as per our recent tests in a production environment.

As a first step, start your journey by creating a child theme. Then, create a new site in your Disqus account, by going to Register Site - Disqus Admin. This process will create a short name for your comments site and take note of it, as we will use it in the plugin configuration later.

Proceed to extract the .zip file downloaded from GitHub as per the Installation instructions shown there. Make sure you have already installed the Errors and Problems plugins, otherwise, the plugin will not work.

Then, define where you'd like comments. Most commonly, you'll want reader's comments over posts, but not pages and not elsewhere in your website. You'll need to identify the Page Template you'll be using for your posts, since this is directly related to the code you'll be modifying to support in your child theme. Theme creators usually convene to use the "Post" Page Template, and that translates into your user/themes/<theme-name>/templates/post.html.twig file.

In my case, I'm using the Typhoon theme, where my main content is within a <article> tag.

The code after making the child theme (with "copy" mode) looks like this between lines 25 and 27:

<article class="{{ prose_style }} max-w-none my-6">
{{ page.content|raw }}
</article>

And after adding Disqus it looks like this:

<article class="{{ prose_style }} max-w-none my-6">
{{ page.content|raw }}
{% include 'disqus_comments.html.twig' %}
</article>

The plugin configuration is just a YAML file located at user/config/plugins/disqus_comments.yaml, which will not exist so create it. The official repository indicates the directory should be user/config/disqus_comments.yaml, but that's an outdated documentation and will not work in a current Grav installation.

Edit your disqus_comments.yaml file to change the default short name to the one you previously created at the Disqus site.

root@server [~/public_html/user/config/plugins]# cat disqus_comments.yaml
enabled: true
counter: true

shortname: disqus_shortname_here
developer: false
disabled: false
root@server [~/public_html/user/config/plugins]#

Ensure your posts are marked with the correct Page Template, and this can be set on creating a new Page, or by editing it, going to the "Advanced" tab and using the dropdown of the Page Template field to pick the one you've just modified. Without the appropriate Page Template, the Disqus comments section will not appear. Also, ensure the child theme you just changed is the active one for your Grav installation.

If everything went well, you'd have implemented Disqus correctly in your child theme!

Blog Logo

Ivan Montilla Miralles


Published

Image

Frontier Themes

Back to Overview