Discussies Toevoegen Aan Hugo
Gepubliceerd op 16 januari 2024 • 7 min leestijd • 1.356 woorden
Ik schreef vorige keer dat ik ondertussen [alweer geswitched]/alweer-geswitched/ ben, nu van Wordpress naar Hugo. Eén van de dingen die ik nog miste, was een manier om voor jou, als lezer, te kunnen reageren.
Ook dat is nu opgelost
Statische pagina’s
Zoals ik in mn [vorige post]/alweer-geswitched/ al aangaf, ben ik overgestapt op een static page generator. Een van de eigenschappen van statische pagina’s is dat ze, eh, statisch zijn. Je kunt natuurlijk wel Javascript toevoegen, maar in principe zijn de pagina’s al gegenereerd. Vaak hebben hosters voor statische pagina’s dan ook geen databases of dat soort dingen om reacties in op te slaan. Nou moet je je afvragen of je dat ook wel wilt, want tja, reacties zijn nou niet echt ‘Big Data’. Je moet dus iets anders gebruiken, of geen reacties toestaan. Aangezien ik hoop op een beetje interactie, heb ik besloten om wel een reactiesysteem toe te voegen.
Eisen
Bij het kiezen van een reactiesysteem moet je een aantal keuzes maken, zoals: Wil ik het zelf hosten of ga ik het inkopen? Of: Wil ik er voor betalen, of niet? En als je dan gebruik wilt gaan maken van bijvoorbeeld een SaaS dienst, welke kies je dan? Eentje die gratis is, maar je betaalt met de gegevens van jou(w klanten)? Of een privacy-minnende variant?
Voor mij waren de eisen:
Het is in de basis privacyrespecterend. Ik wil graag dat lezers veilig en vrijwillig hun reacties kunnen achterlaten, zonder dat ze bang hoeven te zijn dat hun data op straat komt te liggen of verkocht worden.
Het is bijvoorkeur Gratis. Het lijkt alof ik voor een dubbeltje (hebben we die nog?) op de eerste rang wil zitten, maar ik ben best bereid om te betalen voor goede producten. Aangezien ik net begin met deze blog, of in ieder geval deze iteratie, wil ik dat de initiële kosten zo laag mogelijk zijn.
Het is laagdrempelig voor mij en de lezer. Het moet voor mij niet te lastig zijn om reacties te filteren, goed te keuren of te markeren als spam. Daarnaast moet het als lezer niet te moelijk zijn om een reactie achter te kunnen laten.
Het is makkelijk op te zetten Ik vind het helemaal niet erg om uren te knutselen om iets aan de praat te krijgen. Dat is juist leuk! Lang prutsen, en uiteindelijk heb je het aan de praat. Het nadeel is vaak dat je deze systemen niet dagelijks opzet. Zodra er dan een probleem optreedt, weet je niet direct waar je zoeken moet. De kennis die je had opgedaan, is allang weer weggezakt. Daarom heeft een systeem wat makkelijk op te zetten is ook de voorkeur.
Het is makkelijk te integreren. Aangezien ik niet meer een Wordpress site heb, kan ik niet eenvoudigweg een plugin downloaden en installeren. Ik zal aan de slag moeten met HTML en Javascript om ervoor te zorgen dat het uiteindelijk ook in Hugo werkt.
Data moet te exporteren zijn. Aangezien ik er niet vanuit ga dat dit het eindstation is, wil ik dat de data te exporteren is. Zeker als de keuze uiteindelijk een SaaS-oplossing is, wil ik zeker weten dat ik de data kan downloaden en, na omzetten, kan importeren in een ander systeem.
Het is bij voorkeur zelf te draaien. Op moment dat je het zelf draait, weet je ook wat er met je data gebeurt. Tenminste.. Je hebt de mogelijkheid om alles goed te monitoren en je kunt ongewenste toegang tot je data blokkeren.
Er zijn heel veel verschillende mogelijkheden en platformen voor reacties, dan wel forumfunctionaliteit.
Een van de grotere, Disqus, heb ik niet overwogen. In het verleden zijn er een aantal zaken gebeurd met de data van gebruikers die wat mij betreft niet door de beugel kunnen.
Alternatieven die ik wel bekeken heb:
Een aantal heb ik voorbij laten gaan, omdat dit wellicht voor mijn lezers niet echt laagdrempelig is. Je hebt er nl een Github account voor nodig (Utterances, Giscus). Een aantal anderen kosten na de trial geld (ReplyBox). Weer een paar had ik wat moeite om ze aan de praat te krijgen (Isso, Schnack). Dat laatste lag overigens niet aan de producten, maar meer aan mijn tijd en vereisten en configuratie.
Opties
Uiteraard zijn er veel en veel meer alternatieven, maar je moet ook een keer ophouden met zoeken en ‘gewoon’ gaan beginnen.
Uiteindelijke keuze
Uiteindelijk ben ik bij GraphComment uitgekomen. Ik denk niet dat dit het eindstation is. In het kader van ‘beter klaar, dan perfect’ heb ik in ieder geval een reactiesysteem wat aan mijn minimale eisen voldoet. Nu kan ik rustig op zoek naar een alternatief wat ik zelf kan draaien. Zoals het nu lijkt gaat het Isso of Schnack worden, maar daarvoor moet ik nog een goed hostingoplossing kiezen.
GraphComment is een SaaS-oplossing, dus ik draai het niet zelf. Ik moet afgaan op de teksten op hun website dat ze ook daadwerkelijk de data niet verkopen.
Integratie
Ondanks dat mijn thema, Hinode , al ondersteuning had voor Utterances, moest ik toch even diep in de code zoeken hoe ik GraphComment nou eigenlijk toe ging voegen. Want naast het inloggen op de website van GraphComment en daar een account aanmaken en je website toevoegen, moet je ook nog wat code toevoegen aan je pagina’s/layout.
In params.toml heb ik een item toegevoegd onder [comments], namelijk [platform = "graphcomment"]. Zo kan ik in de configuratie snel een ander platform toevoegen. In de code controleer ik of platform is geconfigureerd. Zo nee, dan gaat hij uit van Utterances, zoals in het oorspronkelijke theme.
Ook heb ik een stukje toegevoegd, zodat ik het commentID kan meegeven wat GraphComment nodig heeft.
Aanpassingen in de bestanden
config/part_default/params.toml
[comments]
enabled = true
platform = "graphcomment"
#repo = "" # Replace with your repository.
#issueTerm = "pathname" # pathname, url, title, og:title
#label = "comment"
# By default, light and dark mode correspond to github-light and github-dark, respectively.
# Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
# theme = ""
[comments.graphcomment]
commentID = "<commentID van GraphComment>"layouts/partial/assets/comments.html
Onder <h2>{{ T "comments" }}</h2> heb ik een check toegevoegd en het stukje code wat je krijgt bij GraphComment wanneer je je site registreert. In de regel van graphcommentId heb ik de hardcoded Id vervangen door de variabele die ik in config.toml heb toegevoegd. Dat is dus graphcommentId: "{{$params.graphcomment.commentID}}".
{{- if in $params.platform "graphcomment" -}}
<div id="graphcomment"></div>
<script type="text/javascript">
/* - - - CONFIGURATION VARIABLES - - - */
var __semio__params = {
graphcommentId: "{{$params.graphcomment.commentID}}", // make sure the id is yours
behaviour: {
// HIGHLY RECOMMENDED
// uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
},
// configure your variables here
}
/* - - - DON'T EDIT BELOW THIS LINE - - - */
function __semio__onload() {
__semio__gc_graphlogin(__semio__params)
}
(function() {
var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
gc.onload = __semio__onload; gc.defer = true; gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
})();
</script>
{{- else -}}en aan het einde van de file heb ik een extra {{- end -}} toegevoegd. En het resultaat zie je onder aan deze pagina.
Conclusie
Reacties zijn belangrijk op een blog, zeker als je enige interactie wilt. Je kunt daarvoor de wereld aan reactiesystemen gebruiken, je zult ze alleen wel moeten kunnen draaien en integreren. Hierboven heb ik je laten zien dat de integratie relatief eenvoudig is, zolang je een beetje HTML/Javascript code kunt lezen.
