pelican-plugins/pelican_comment_system

Pelican comment system

The pelican comment system allows you to add static comments to your articles. It also supports replies to comments.

The comments are stored in Markdown files. Each comment in it own file.

See it in action here: blog.scheirle.de

Thanks to jesrui the author of Static comments. I reused some code from it.

Author	Website	Github
Bernhard Scheirle	http://blog.scheirle.de	https://github.com/Scheirle

Installation

Activate the plugin by adding it to your pelicanconf.py

PLUGIN_PATH = '/path/to/pelican-plugins'
PLUGINS = ['pelican_comment_system']
PELICAN_COMMENT_SYSTEM = True

And modify your article.html theme (see below).

Settings

Name	Type	Default	Description
PELICAN_COMMENT_SYSTEM	boolean	False	Activates or deactivates the comment system
PELICAN_COMMENT_SYSTEM_DIR	string	comments	Folder where the comments are stored

Folder structure

Every comment file has to be stored in a sub folder of PELICAN_COMMENT_SYSTEM_DIR. Sub folders are named after the slug of the articles.

So the comments to your foo-bar article are stored in comments/foo-bar/

The filenames of the comment files are up to you. But the filename is the Identifier of the comment (without extension).

Example folder structure

.
└── comments
    └── foo-bar
    │   ├── 1.md
    │   └── 0.md
    └── some-other-slug
        ├── random-Name.md
        ├── 1.md
        └── 0.md

Comment file

Meta information

Tag	Required	Description
date	yes	Date when the comment was posted
replyto	no	Identifier of the parent comment. Identifier = Filename (without extension)
locale_date	forbidden	Will be overwritten with a locale representation of the date

Every other (custom) tag gets parsed as well and will be available through the theme.

Example of a comment file

date: 2014-3-21 15:02
author: Author of the comment
website: http://authors.website.com
replyto: 7
anothermetatag: some random tag

Content of the comment.

Theme

In the article.html theme file are now two more variables available.

Variables	Description
article.metadata.comments_count	Amount of total comments for this article (including replies to comments)
article.metadata.comments	Array containing the top level comments for this article (no replies to comments)

Comment object

Variables	Description
id	Identifier of this comment
content	Content of this comment
metadata	All metadata as in the comment file (or described above)
replies	Array containing the top level replies for this comment

Example article.html theme

(only the comment section)

{% if article.metadata.comments %}
	{% for comment in article.metadata.comments recursive %}
		{% set metadata = comment.metadata %}
		{% if loop.depth0 == 0 %}
			{% set marginLeft = 0 %}
		{% else %}
			{% set marginLeft = 50 %}
		{% endif %}
			<article id="comment-{{comment.id}}" style="border: 1px solid #DDDDDD; padding: 5px 0px 0px 5px; margin: 0px -1px 5px {{marginLeft}}px;">
				<a href="{{ SITEURL }}/{{ article.url }}#comment-{{comment.id}}" rel="bookmark" title="Permalink to this comment">Permalink</a>
				<h4>{{ metadata['author'] }}</h4>
				<p>Posted on <abbr class="published" title="{{ metadata['date'].isoformat() }}">{{ metadata['locale_date'] }}</abbr></p>

				{{ comment.content }}
				{% if comment.replies %}
					{{ loop(comment.replies) }}
				{% endif %}
			</article>
	{% endfor %}
{% else %}
	<p>There are no comments yet.<p>
{% endif %}

Recommendation

Add a form, which allows your visitors to easily write comments.

But more importantly, on submit the form generates a mailto-link. The resulting email contains a valid markdown block. Now you only have to copy this block in a new file. And therefore there is no need to gather the metadata (like date, author, replyto) yourself.

Reply button

Add this in the above for loop, so your visitors can reply to a comment.

<button onclick="reply('{{comment.id | urlencode}}');">Reply</button>

form + javascript

<form role="form" id="commentForm" action="#">
	<input name="Name" type="text" id="commentForm_inputName" placeholder="Enter your name or synonym">
	<textarea name="Text" id="commentForm_inputText" rows="10" style="resize:vertical;" placeholder="Your comment"></textarea>
	<button type="submit" id="commentForm_button">Post via email</button>
	<input name="replyto" type="hidden" id="commentForm_replyto">
</form>

<script type="text/javascript">
	function reply(id)
	{
		id = decodeURIComponent(id);
		$('#commentForm_replyto').val(id);
	}

	$(document).ready(function() {
		function generateMailToLink()
		{
			var user = 'your_user_name'; //user@domain = your email address
			var domain = 'your_email_provider';
			var subject = 'Comment for \'{{ article.slug }}\'' ;

			var d = new Date();
			var body = ''
				+ 'Hey,\nI posted a new comment on ' + document.URL + '\n\nGreetings ' + $("#commentForm_inputName").val() + '\n\n\n'
				+ 'Raw comment data:\n'
				+ '----------------------------------------\n'
				+ 'date: ' + d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + '\n'
				+ 'author: ' + $("#commentForm_inputName").val() + '\n';

			var replyto = $('#commentForm_replyto').val();
			if (replyto.length != 0)
			{
				body += 'replyto: ' + replyto + '\n'
			}

			body += '\n'
				+ $("#commentForm_inputText").val() + '\n'
				+ '----------------------------------------\n';

			var link = 'mailto:' + user + '@' + domain + '?subject='
				+ encodeURIComponent(subject)
				+ "&body="
				+ encodeURIComponent(body);
			return link;
		}


		$('#commentForm').on("submit",
			function( event )
			{
				event.preventDefault();
				$(location).attr('href', generateMailToLink());
			}
		);
	});
</script>

(jQuery is required for this script)

Don't forget to set the Variables user and domain.