pelican-plugins/pelican_comment_system/theme/templates/pcs/comments.html

{% macro comments_styles() %}
{% if PELICAN_COMMENT_SYSTEM %}
{# NOTE:
 # Instead of using this macro copy these styles in your main css file
 # This marco is only here to allow a quickstart with nice styles
 #}
<style>
#pcs-comment-form input,
#pcs-comment-form textarea {
	width: 100%;
}
#pcs-comment-form-display-replyto {
	border: solid 1px black;
	padding: 2px;
}
#pcs-comment-form-display-replyto p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
#pcs-comments ul {
	list-style: none;
}
#pcs-comments .comment-left {
	display: table-cell;
	padding-right: 10px;
}
#pcs-comments .comment-body {
	display: table-cell;
	vertical-align: top;
	width: 100%;
}
</style>
{% endif %}
{% endmacro %}

{% macro comments_form() %}
{% if PELICAN_COMMENT_SYSTEM %}
<section>
	<form id="pcs-comment-form" action="#">
		<legend>Add a Comment</legend>
		<input type="hidden" id="pcs-comment-form-input-replyto">
		<fieldset>
			<label for="pcs-comment-form-input-name">Name</label>
			<input  id="pcs-comment-form-input-name" type="text" placeholder="Enter your name or nickname" />
		</fieldset>
		<fieldset>
			<label for="pcs-comment-form-input-website">Website</label>
			<input  id="pcs-comment-form-input-website" type="text" placeholder="Enter your website (optional)" />
		</fieldset>
		<fieldset>
			<label   for="pcs-comment-form-input-textarea">Your Comment</label>
			<textarea id="pcs-comment-form-input-textarea" rows="5" style="resize:vertical;" placeholder="Your comment"></textarea>
			<p>You can use the <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a> syntax to format your comment.</p>
			<div style="display: none; " id="pcs-comment-form-display-replyto"></div>
		</fieldset>

		<button type="submit"
				id="pcs-comment-form-button-submit"
				{# Piwik Track click on comment button
				onclick="javascript:_paq.push(['trackEvent', 'comment', '{{ article.title }}', document.getElementById('pcs-comment-form-input-textarea').value]);" #}
				>Post via email</button>

		{% if PELICAN_COMMENT_SYSTEM_FEED and article %}
			<a href="{{ SITEURL }}/{{ PELICAN_COMMENT_SYSTEM_FEED|format(article.slug) }}">
				Comment Atom Feed
			</a>
		{% endif %}
	</form>
</section>
{% endif %}
{% endmacro %}

{% macro comments_with_form() %}
{% if PELICAN_COMMENT_SYSTEM %}
<section id="pcs-comments">
	<header>
		<h2>Comments</h2>
		<hr/>
	</header>
	{% if article.comments %}
		<ul>
		{% for comment in article.comments recursive %}
			<li id="comment-{{comment.slug}}">
				<div class="comment-left">
					<img    src="{{ SITEURL }}/{{ comment.avatar }}"
							alt="Avatar"
							height="{{ PELICAN_COMMENT_SYSTEM_IDENTICON_SIZE }}"
							width="{{ PELICAN_COMMENT_SYSTEM_IDENTICON_SIZE }}">
				</div>
				<div class="comment-body">
					<div style="float:right;">
						<a role="button" href="{{ SITEURL }}/{{ article.url }}#comment-{{comment.slug}}" rel="bookmark" title="Permalink to this comment">Permalink</a>
						<button onclick="CommentSystem.setReply('{{comment.slug | urlencode}}', '{{comment.author | urlencode}}');">Reply</button>
					</div>
					<h4>
						{% if comment.metadata['website'] %}
							<a href="{{comment.metadata['website']}}">{{ comment.author }}</a>
						{% else %}
							{{ comment.author }}
						{% endif %}
					</h4>
					<p>
						Posted on
						<time datetime="{{ comment.date.isoformat() }}" title="{{ comment.date.isoformat() }}">{{ comment.locale_date }}</time>
					</p>
					<div class="pcs-comment-content" {# class used as id in comments.js#}>
						{{ comment.content }}
					</div>
					{% if comment.replies %}
						<hr>
						<ul>
							{{ loop(comment.replies) }}
						</ul>
					{% endif %}
				</div>
			</li>
		{% endfor %}
		</ul>
	{% else %}
		<p>There are no comments yet.</p>
	{% endif %}
	{{ comments_form() }}
</section>
{% endif %}
{% endmacro %}


{% macro comments_js(user, domain, includeJquery=True) %}
{% if PELICAN_COMMENT_SYSTEM %}
	{% if includeJquery %}
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	{% endif %}
	<script type="text/javascript" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/comments.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			CommentSystem.email_user   = "{{ user }}";
			CommentSystem.email_domain = "{{ domain }}";
			CommentSystem.display_replyto_html = function(comment_content, article_slug, author) { 
				return ''
					+ '<button style="float:right;" onclick="CommentSystem.cancelReply(); return false;" title="Cancel the reply">'
					+ 	'×'
					+ '</button>'
					+ '<p>This comment will be posted as a reply to \'<a title="'+comment_content+'" href="#comment-'+article_slug+'">'+author+'</a>\'</p>';
			};

			$('#pcs-comment-form').on("submit",
				function( event )
				{
					event.preventDefault();
					$(location).attr('href', CommentSystem.getMailtoLink("{{ article.slug }}"));
				}
			);
		});
	</script>
{% endif %}
{% endmacro %}

{% macro comments_quickstart(user, domain) %}
	{{ comments_styles() }}
	{{ comments_with_form() }}
	{{ comments_js(user, domain) }}
{% endmacro %}