Ich bin ein großer Freund vom Datenschutz, leider unterstützt Hugo nur disqus, was alles andere als freundlich zum Datenschutz ist. Also gab es die letzten Monate nie eine Kommentar Funktion, das hat sich jetzt geändert.
Ich bin durch Zufall auf den Artikel von Don Williamson gestoßen, der es mir erlaubt eine Kommentar Funktion für meine Artikel durch Github anzubieten.
Konfiguration
Als erstes legen wir eine Datei comments.html im Ordner themes/THEME_NAME/layouts/partials/ mit folgenden Inhalt an:
<div id="gh-comments">
<h2>Kommentare</h2>
<div id="gh-comments-list"></div>
<a href="javascript:void(0)" id="gh-load-comments" class="btn" style="display:none">Load more comments</a>
</div>
<script type="text/javascript" data-ghid="{{ $.Params.ghcommentid }}" src="{{ .Site.BaseURL }}js/github-comments.js"></script>Als nächstes brauchen wir jetzt noch die JS Datei, die für uns die ganze Arbeit macht themes/THEME_NAME/static/js/github-comments.js mit folgenden Inhalt:
// use of ajax vs getJSON for headers use to get markdown (body vs body_htmml)
// todo: pages, configure issue url, open in new window?
//
var this_js_script = $('script[src*=github-comments]');
var ghid = this_js_script.attr('data-ghid');
if (typeof ghid === "undefined" ) {
var ghid = '0';
}
DoGithubComments(ghid);
var CurrentPage = 0;
function ParseLinkHeader(link)
{
var entries = link.split(",");
var links = { };
for (var i in entries)
{
var entry = entries[i];
var link = { };
link.name = entry.match(/rel=\"([^\"]*)/)[1];
link.url = entry.match(/<([^>]*)/)[1];
link.page = entry.match(/page=(\d+).*$/)[1];
links[link.name] = link;
}
return links;
}
function DoGithubComments(comment_id, page_id)
{
var repo_name = "beli3ver/malte-kiefer.de";
if (page_id === undefined)
page_id = 1;
var api_url = "https://api.github.com/repos/" + repo_name;
var api_issue_url = api_url + "/issues/" + comment_id;
var api_comments_url = api_url + "/issues/" + comment_id + "/comments" + "?page=" + page_id;
var url = "https://github.com/beli3ver/malte-kiefer.de/issues/" + comment_id;
$(document).ready(function ()
{
$.getJSON(api_issue_url, function(data) {
NbComments = data.comments;
});
$.ajax(api_comments_url, {
headers: {Accept: "application/vnd.github.v3.html+json"},
dataType: "json",
success: function(comments, textStatus, jqXHR) {
// Add post button to first page
if (page_id == 1)
$("#gh-comments-list").append("<a href='" + url + "#new_comment_field' rel='nofollow' class='btn'>Füge eine Kommentar hinzu</a>");
// Individual comments
$.each(comments, function(i, comment) {
var date = new Date(comment.created_at);
var t = "<div id='gh-comment'>";
t += "<img src='" + comment.user.avatar_url + "' width='24px'>";
t += "<b><a href='" + comment.user.html_url + "'>" + comment.user.login + "</a></b>";
t += " posted at ";
t += "<em>" + date.toUTCString() + "</em>";
t += "<div id='gh-comment-hr'></div>";
t += comment.body_html;
t += "</div>";
$("#gh-comments-list").append(t);
});
// Setup comments button if there are more pages to display
var links = ParseLinkHeader(jqXHR.getResponseHeader("Link"));
if ("next" in links)
{
$("#gh-load-comments").attr("onclick", "DoGithubComments(" + comment_id + "," + (page_id + 1) + ");");
$("#gh-load-comments").show();
}
else
{
$("#gh-load-comments").hide();
}
},
error: function() {
$("#gh-comments-list").append("Kommentarfunktion für diesen Beitrag nicht aktiviert!");
}
});
});
}
Jetzt müssen die Links in der Datei angepasst werden. Ihr müsst eine eigne Repo anlegen bei Github und hier in der Datei anpassen.
Achtung: Wir brauchen auch jQuery!.
jQuery sollte umbedingt im <head></head> geladen werden.
Zum Schluss noch das Template für die Beitragsdatei anpassen (themes/THEME_NAME/layouts/_default/single.html) und den folgenden Teil for dem Aufruf des <footer></footer> Tags einfügen:
{{ partial "comments.html" . }}Um jetzt die Kommentarfunktion zu nutzen, ein entsprechendes issue bei Github eröffnen, die ID merken. Wenn ihr dann einen neuen Beitrag erstellt, müsst ihr vor den “—” folgendes einfügen:
ghcommentid: IDUnd das wars, nun habt ihr und ich eine Kommentarfunktion.
CSP
Damit ihr diese Funktion mit CSP nutzen könnt, müssen folgende Einstellungen gesetzt sein:
img-src 'self' https://*.githubusercontent.com;
connect-src 'self' https://*.github.com
