You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
5.4 KiB
163 lines
5.4 KiB
{% 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: 93%;
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro comments_form() %}
|
|
{% if PELICAN_COMMENT_SYSTEM %}
|
|
<section>
|
|
<form id="pcs-comment-form" action="#">
|
|
<legend>Ajouter un commentaire / Add a Comment</legend>
|
|
<input type="hidden" id="pcs-comment-form-input-replyto">
|
|
<fieldset>
|
|
<label for="pcs-comment-form-input-name">Nom / Name</label>
|
|
<input id="pcs-comment-form-input-name" type="text" placeholder="Entrez votre nom / Enter your name or nickname" />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="pcs-comment-form-input-website">Site web (optionel) / Website (optionnal)</label>
|
|
<input id="pcs-comment-form-input-website" type="text" placeholder="Entrez votre site web (optionnel) / Enter your website (optional)" />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="pcs-comment-form-input-textarea">Votre commentaire / Your Comment</label>
|
|
<textarea id="pcs-comment-form-input-textarea" rows="5" style="resize:vertical;" placeholder="Votre commentaire / Your comment"></textarea>
|
|
<p>Vous pouvez utiliser la syntaxe <a href="https://fr.wikipedia.org/wiki/Markdown">Markdown</a> pour formatter votre commentaire.</p>
|
|
<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) }}">
|
|
Flux Atom pour commentaire / Comment Atom Feed
|
|
</a>
|
|
{% endif %}
|
|
</form>
|
|
</section>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro comments_with_form() %}
|
|
{% if PELICAN_COMMENT_SYSTEM %}
|
|
<section id="pcs-comments">
|
|
<header>
|
|
<h2>Commentaires / 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 }}px"
|
|
width="{{ PELICAN_COMMENT_SYSTEM_IDENTICON_SIZE }}px">
|
|
</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>Il n'y a aucun commentaire pour l'instant. / 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="https://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 %}
|