Vri hat heute das System für Kommentare hier im Blog verbessert.

Vielen Dank dafür. ☺️

Sie hat das ganze JavaScript-Zeugs in eine eigene Datei ausgelagert und den Code angepasst. Dieser wird natürlich nur eingebunden, wenn im Front Matter die Kommentarfunktion aktiviert ist.

JavaScript

Hier die Datei mastodon-comments.js.

Hugo-Template

Das Template (layouts/partials/post/comments/custom.html) für Hugo sieht jetzt so aus:

{{ with .Params.comments }}
<div class="masto-comments datenschutz">
<p><a href="/ueber/datenschutz/#kommentare">(Datenschutzinformationen zu Kommentaren via Mastodon)</a></p>
</div>
<div id="mastodon-comments-wrapper" data-mastodon-host="{{ .host }}" data-mastodon-username="{{ .username }}" data-mastodon-id="{{ .id }}">
  <div id="mastodon-comments-buttons">
    <a class="btn btn-sm btn-outline-primary" href="https://{{ .host }}/interact/{{ .id }}?type=reply" target="_blank">Kommentar schreiben</a>
    <a class="btn btn-sm btn-outline-primary" href="https://{{ .host }}/@{{ .username }}/{{ .id }}" target="_blank">Tröt öffnen</a>
  </div>
  <div id="mastodon-comments-list">
    <button id="load-comments" class="btn btn-sm btn-primary">Kommentare anzeigen (via Mastodon)</button>
  </div>
  <noscript><p>Du benötigst JavaScript, um die Kommentare hier anzeigen zu lassen.</p></noscript>
  <script src="/my_js/purify.min.js"></script>
  <script src="/my_js/mastodon-comments.js"></script>
</div>
{{ else }}
<p class="mastodon-comments nocomment">Kommentare sind für diesen Blogbeitrag (noch) nicht aktiviert. Nach der Veröffentlichung eines Blogbeitrags dauert das in der Regel noch ein paar Minuten.</p>
{{ end }}
<p><details class="mastodon-comments email">
  <summary class="mastodon-comments email-summary">Alternative: Anmerkung per E-Mail</summary>
  <div class="mastodon-comments emailcontent">
    <p>Du kannst mir Anmerkungen zum Blogbeitrag per E-Mail schicken, <a href='mailto:user@tld.org?subject=Anmerkung zum Blog&body=Hallo Natenom. Zum Blogbeitrag "{{ $.Page.Permalink }}" habe ich eine Anmerkung:'>wenn du hier klickst</a>. Der Inhalt davon bleibt privat und wird nicht hier im Kommentarbereich veröffentlicht.</p>
  </div>
</details></p>

CSS

Beim CSS hat sich nichts geändert und das gibt es hier.