Reactiewidget

Disqus, Utterances en Giscus reactiewidgets worden direct ondersteund. Dit artikel laat zien hoe je ze configureert en zelfs je eigen reactiewidgets aanmaakt.

Disqus

De Disqus-reactiewidget wordt ondersteund door Hugo.

1disqusShortname = "yourdiscussshortname"

Houd er rekening mee dat disqusShortname een siteconfiguratie is, niet een parameter. Het plaatsen in params werkt niet.

Utterances

Utterances is een lichtgewicht reactiewidget gebouwd op GitHub Issues.

1[utterances]
2  repo = "user/repo"
3  #issueTerm = "pathname" # pathname, url, title, og:title.
4  #label = "comment" # Optional.
5  #theme = ""

In tegenstelling tot Disqus is Utterances een parameter. Plaats het in params.

Parameters

Naam	Type	Standaard	Beschrijving
`utterances.repo`	String	-	GitHub-repository.
`utterances.issueTerm`	String	`pathname`	De koppeling tussen blogberichten en GitHub Issues: `pathname`, `url`, `title` en `og:title`.
`utterances.label`	String	-	Het label dat wordt toegewezen aan Issues die door Utterances zijn aangemaakt.
`utterances.theme`	String	-	`github-light` en `github-dark` worden respectievelijk in lichte en donkere modus gebruikt als dit niet is ingesteld. Optionele waarden: `github-light`, `github-dark`, `preferred-color-scheme`, `github-dark-orange`, `icy-dark`, `dark-blue` en `photon-dark`.

Probleemoplossing

Zorg ervoor dat de repo openbaar is, anders kunnen lezers de Issues/reacties niet bekijken.
Zorg ervoor dat de Utterances-app is geïnstalleerd op de repo, anders kunnen gebruikers geen reacties plaatsen.
Als je repo een fork is, navigeer dan naar het tabblad Instellingen en bevestig dat de Issues-functie is ingeschakeld.

Giscus

Giscus is een lichtgewicht reactiewidget gebouwd op GitHub Discussions.

1[giscus]
2  repo = "user/repo"
3  repoId = ""
4  category = ""
5  categoryId = ""

Parameters

Naam	Type	Standaard	Beschrijving
`giscus.repo`	String	-	GitHub-repository. Verplicht.
`giscus.repoId`	String	-	GitHub-repository-ID. Verplicht.
`giscus.category`	String	-	Discussiecategorie. Verplicht.
`giscus.categoryId`	String	-	Discussiecategorie-ID. Verplicht.
`giscus.theme`	String	-	Laat leeg als je de themasmodus wilt volgen.
`giscus.mapping`	String	`pathname`	De koppeling tussen blogberichten en GitHub Discussions: `pathname`, `url`, `title` en `og:title`.
`giscus.inputPosition`	String	`top`	De invoerpositie: `top` of `bottom`.
`giscus.reactions`	Boolean	`true`	Reacties in-/uitschakelen.
`giscus.metadata`	Boolean	`false`	Discussiemetadata uitzenden.
`giscus.lang`	String	-	Taal opgeven; standaard is de sitetaal.
`giscus.lazyLoading`	Boolean	`true`	Lazy loading inschakelen.

Staticman

Staticman wordt ook direct ondersteund, maar het instellen kan complex zijn.

Voordelen

De reactiebestanden worden opgeslagen in je repository; reacties worden dus weergegeven tijdens het bouwen van de site. Dit kan nuttig zijn voor SEO, omdat het niet afhankelijk is van JS voor het dynamisch laden van gegevens.
Spamverwerking: reacties goedkeuren of afwijzen via Pull Requests van de Git-provider, Google reCaptcha.
Native themaopmaak.

Nadelen

Gebruikersinformatie is niet vertrouwd, zoals e-mailadressen.
Gebruikers kunnen hun reacties niet rechtstreeks verwijderen; dit kan via een Pull Request.

Voorbereiding

Staticman-instantie

Stel eerst een Staticman-instantie in voor het verwerken van reactieverzoeken.

Zelf-gehoste Staticman-instantie

Zie https://staticman.net/docs/getting-started.html#step-2-deploy-staticman voor details.

Openbare Staticman-instantie

Er is een openbare Staticman-instantie ingesteld voor testdoeleinden; deze werkt alleen met GitHub-repositories.

Je moet de GitHub App installeren voor je repo, zodat de instantie reactiebestanden naar je repo kan schrijven.

Eindpunt: https://hbs-staticman.herokuapp.com

Staticman-configuratie

Maak vervolgens staticman.yml aan in de hoofdmap van je site/repository, zodat de Staticman-instantie de configuratie kan lezen en reactieverzoeken kan verwerken.

De filename en path zijn vast; wijzig deze parameters NIET.

allowedFields MOET de velden name, email, message, reply_to en root_id bevatten.

 1comments:
 2  allowedFields: ["name", "email", "url", "message", "reply_to", "root_id"]
 3  branch: "main"
 4  commitMessage: "Add Staticman comment"
 5  filename: "{@id}" # DO NOT MODIFY
 6  format: "yaml"
 7  generatedFields:
 8    date:
 9      type: date
10      options:
11        format: "timestamp-seconds"
12  moderation: false
13  name: "vandenboom.online"
14  path: "data/{options.slug}" # DO NOT MODIFY
15  requiredFields: ["name", "message"]
16  transforms:
17    email: md5 # DO NOT MODIFY, REQUIRED BY AVATAR.
18  reCaptcha:
19    enabled: false
20    siteKey: ""
21    secret:

Siteparameters

Pas ten slotte de volgende staticman-parameters aan in params.toml.

Naam	Type	Standaard	Beschrijving
`staticman`	Object
`staticman.endpoint`	String	-	Het eindpunt van de Staticman-instantie. Verplicht.
`staticman.repo`	String	-	Repository in de vorm `user/repo`. Verplicht.
`staticman.service`	String	`github`
`staticman.branch`	String	`master`	Repository-branch.
`staticman.property`	String	`comments`
`staticman.sorting`	String	`asc`	Reacties sorteren; beschikbare opties: `desc`.
`staticman.reCaptchaKey`	String	`-`	De reCaptcha-sitesleutel.
`staticman.reCaptchaSecret`	String	`-`	Het versleutelde reCaptcha-geheim. Je moet het onversleutelde geheim versleutelen via https://yourstaticmaninstance/v3/encrypt/plainsecret.
`staticman.extraFields`	Array	`-`	Extra velden. Beschikbare velden: `url`.
`staticman.requiredFields`	Array	`-`	Extra verplichte velden. Beschikbare velden: `email` en de extra velden. `name` en `message` zijn altijd verplicht.
`staticman.paginate`	Integer	`10`	Het aantal reacties per pagina.
`staticman.moderation`	Boolean	`true`	Hetzelfde als de moderatie van Staticman.

reCaptcha

Het reCaptcha-geheim is niet de onversleutelde versie; je moet het versleutelen via je Staticman-instantie https://yourstaticmaninstance/v3/encrypt/PLAINSECRET.

Aangepaste Reactiewidget

We ondersteunen niet alle reactiewidgets, maar maak je geen zorgen: je kunt je eigen reactiewidget aanmaken.

Je moet de andere widgets uitschakelen voordat je je eigen reactiewidget aanmaakt.

1mkdir -p layouts/partials/post/comments
2echo "MY COMMENTS WIDGET" > layouts/partials/post/comments/custom.html

Tegelijkertijd moet je mogelijk externe assets introduceren, wat eenvoudig kan worden opgelost via aangepaste assets of Hooks.