Setting up Disqus comments on a Jigsaw blog
atymic • September 6, 2019jigsaw
Jigsaw comes with an awesome blog starter template that i'm using on my blog. It comes with a bunch of nifty features including searchable posts, code highlighting and a bunch of other stuff, but one thing it's missing is comments.
Disqus to the rescue! You've probably seen a disqus comments section before, as they are pretty popular. Their turn-key solution doesn't require any server, meaning we can drop it into a static jigsaw site pretty quickly.
Installing Disqus on Jigsaw
First off, you need to sign up and create a site. Note down your site's
as you'll need it later.
Head over to your site's
config.php. You'll need to add an option here with your
shortname. In my case, i've added it
// ... 'services' => [ 'disqus' => 'atymic', ], // ...
Next, we'll need to add a comments partial to include in your
post template. In the blog template, the partials folder
_components, but this is probably different if you started from scratch. In this folder, create a
file with the code below.
On my blog, I'm going to add the comments section below the content on the
post layout. If you want to add it to
other pages, just include the partial in the respective layout.
<div class="border-b border-blue-200 mb-10 pb-4" v-pre> @yield('content') </div> @if($page->services->disqus && $page->comments !== false) <div class="mb-4 pb-4"> @include('_components.comments') </div> @endif
Unfortunately, disqus makes it a bit hard to test your comments section locally, as you need to be on a whitelisted domain and pass that same domain in the page URL.
The easiest way that I found to test was to add
localtest.me as a trusted domain (it points to localhost) and update your
dev config to set the
http://localtest.me. This will allow disqus to load (make sure to revert the
change once you are finished).
If you want to disable comments on one of your posts, you can add
comments: false to the meta yaml at the top of your
--- extends: _layouts.post section: content title: No Comments comments: false ---
Hopefully, you've now got a working comments section on your blog. If not, feel free to use my comments section below and I'll try my best to answer any questions you have.