wagtail-tutorials-10-header.png

Wagtail Tutorials #10: Add Comment Support In Wagtail Blog

Last updated on by michaelyin

Update in 2018-03-26: The code in article is working in Wagtail 1.10-1.13, if you want to get the code working in Wagtail 2.0, just check master branch of wagtail-bootstrap-blog

Comment is very important for a blog, because it provides a way for site owner to communicate with the readers. They can ask question, feedback in the comments. So in this chapter, I will talk about how to add comment support to our Wagtail Blog.

Should I build new comment system or integrate 3 party comment service

Many people might have a question at this point, should I build a new comment system, add it in my blog application or just integrate a 3-party comment service into my blog?

My answer is if the 3-party service can get the job done without any problem, just use it.

Considering Disqus is one of the best comment service in the world and it can help us manage the comments easily, I would talk about how to integrate Disqus comment into our Wagtail blog in this chapter.

Create new Disqus account and config

First, go to signup page of Disqus to register if you have no Disqus account, then enter the create page of Disqus to create a new site.

As you can, I have input some basic value to config our site. What you should notice is that unique Disqus URL here is the link for you to admin your site. Here, my value is wagtail-tutorial.disqus.com, we can use this link to admin in a bit, you should know if you follow this tutorial to create a new site in Disqus, the admin link will be different. After all things done, click Create Site.

Now go to admin page the Disqus site we just created wagtail-tutorial.disqus.com, click the Installing Disqus button enter the install page, scroll to the bottom, click install manually with Universal Code button.

Then you will see a page which contains HTML for you to copy and edit. Below is the code

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://wagtail-tutorial.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

You should copy this code block to your html template of post page, and edit it to make it work. There are some points you should notice here, first, s.src = 'https://wagtail-tutorial.disqus.com/embed.js'; is the value of the site we just created, this value is different if you create a site on your own, so please do not copy Disqus install code from this tutorial, get it from your site of Disqus. Second, the javascript in the code above need to uncomment and edit, I will talk about it in a bit.

Integrate Disqus to Wagtail blog

Let's get started to integrate Disqus comment system to your Wagtail blog. Edit blog/templates/blog/comments/disqus.html

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = '{{ disqus_url }}';  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '{{ disqus_identifier }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://wagtail-tutorial.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

We copy the install code from Disqus install page and did some modification. First, uncomment the javascript code block, second, the value from context can be rendered to set the this.page.url and this.page.identifier. so we change the PAGE_URL and PAGE_IDENTIFIER to {{ disqus_url }} and {{ disqus_identifier }}

Now we can create a Django template tag as we did before, the tag can save the value of page.url and page.identifier in context object, and load the template to render the HTML. Creating custom Django tag can keep our template clean and easy to manage.

Append the code below to blog/templatetags/blogapp_tags.py

import six

@register.simple_tag()
def post_date_url(post, blog_page):
    post_date = post.date
    url = blog_page.url + blog_page.reverse_subpage(
        'post_by_date_slug',
        args=(
            post_date.year,
            '{0:02}'.format(post_date.month),
            '{0:02}'.format(post_date.day),
            post.slug,
        )
    )
    return url

@register.inclusion_tag('blog/comments/disqus.html', takes_context=True)
def show_comments(context):
    blog_page = context['blog_page']
    post = context['post']
    path = post_date_url(post, blog_page)

    raw_url = context['request'].get_raw_uri()
    parse_result = six.moves.urllib.parse.urlparse(raw_url)
    abs_path = six.moves.urllib.parse.urlunparse([
        parse_result.scheme,
        parse_result.netloc,
        path,
        "",
        "",
        ""
    ])

    return {'disqus_url': abs_path,
            'disqus_identifier': post.pk,
            'request': context['request']}

post_date_url is used to generate the post url which contains the date info of blog post, if you have this method in your code, just ignore it. Let's take a look at show_comments method, we use six package to make our code can work on both Python2 and Python3. abs_path is the full path of our blog post, which is the value of page.url, and primary key of post can be the value of page.identifier, which is unique.

Now, we can easily import it into our post page, we can just add {% show_comments %} to the bottom of post template file, which is awesome!

Conclusion

In this chapter, I talked about how to integrate Disqus comment system into our Wagtail blog, and showed you again how to use custom Django template tag to keep our template clean.

The source code of this Wagtail tutorial is available on Github, you can get it here wagtail-bootstrap-blog, you can also directly check the live demo here Wagtail Blog Demo.

git clone https://github.com/michael-yin/wagtail-bootstrap-blog.git
cd wagtail-bootstrap-blog
git checkout comment-support

# setup virtualenv
pip install -r requirements.txt

./manage.py runserver
#http://127.0.0.1:8000/blog

Remember to use the username admin and the password admin to log into the Wagtail admin page.

Wagtail Ebook

For people who like to read ebook instead of blog posts, I have published a book on leanpub´╝îwhere you can get pdf, epub, mobi version of this Wagtail book Build Blog With Wagtail CMS.

Send Me Message

Tell me more about your project and see if I can help you.

Contact Me