Προσθήκη σχολίων στον ιστότοπο Hugo

Δώστε στον κώδικα πράκτορά σας το πλαίσιο FastComments που χρειάζεται - widgets, ρυθμίσεις, Secure SSO, το REST API και τα SDKs:

npx skills add fastcomments/skills

Λειτουργεί με το Claude Code, Codex, Cursor, Copilot, Gemini και κάθε άλλο πράκτορα που υποστηρίζει το skills CLI.

Για να δείτε κάθε shortcode και το theme partial να τρέχουν τοπικά απέναντι στο δημόσιο tenant demo, κλωνοποιήστε το αποθετήριο και εκτελέστε τον συμπεριλαμβανόμενο exampleSite:

git clone https://github.com/FastComments/fastcomments-hugo.git
cd fastcomments-hugo/exampleSite
hugo server

Κάθε widget έχει τη δική του σελίδα κάτω από exampleSite/content/ την οποία μπορείτε να αντιγράψετε απευθείας στον δικό σας ιστότοπο.

Επιλέξτε έναν από τους δύο τυπικούς τρόπους για να προσθέσετε ένα συστατικό θέματος Hugo.

Επιλογή A: Hugo Module (προτεινόμενο)

Από τη ρίζα του ιστότοπού σας:

hugo mod init github.com/you/your-site   # μόνο εάν ο ιστότοπός σας δεν είναι ήδη module
hugo mod get github.com/FastComments/fastcomments-hugo

Στη συνέχεια προσθέστε την εισαγωγή στο hugo.toml σας:

[module]
  [[module.imports]]
    path = "github.com/FastComments/fastcomments-hugo"

Επιλογή B: Συστατικό θέματος (Git submodule)

git submodule add https://github.com/FastComments/fastcomments-hugo.git themes/fastcomments-hugo

Στη συνέχεια αναφερθείτε σ' αυτό από το hugo.toml σας. Καταχωρήστε το μαζί με το δικό σας θέμα — οι μεταγενέστερες εγγραφές υπερισχύουν, οπότε κρατήστε πρώτο το θέμα σας:

theme = ["your-theme", "fastcomments-hugo"]

Ορίστε το tenant ID σας μία φορά στο hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # αντικαταστήστε το "demo" με το tenant ID του FastComments σας

Στη συνέχεια, είτε ενσωματώστε το widget σχολίων στο θέμα σας (δείτε Ενσωμάτωση Θέματος), είτε εισάγετε ένα shortcode στο Markdown οποιασδήποτε σελίδας:

\{{< fastcomments >}}

Παραδείγματα

Αριθμός σχολίων εντός κειμένου:

This page has \{{< fastcomments-comment-count >}} comments.

Ζωντανή συνομιλία:

\{{< fastcomments-live-chat >}}

Συνεργατική συνομιλία, στοχεύοντας ένα στοιχείο περιεχομένου με επιλογέα CSS:

<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>

\{{< fastcomments-collab-chat target="#post-body" >}}

Συνομιλία εικόνας, στοχεύοντας στοιχείο εικόνας με επιλογέα CSS:

<img id="hero" src="/hero.jpg" alt="Hero image" />

\{{< fastcomments-image-chat target="#hero" >}}

Σύνοψη αξιολογήσεων:

\{{< fastcomments-reviews-summary >}}

Ροή δραστηριότητας χρήστη:

\{{< fastcomments-user-activity-feed userId="demo:demo-user" >}}

Για να επισυνάψετε σχόλια σε κάθε δημοσίευση με τον τρόπο που κάνει η ενσωματωμένη υποστήριξη Disqus του Hugo, προσθέστε μια γραμμή στο template single του θέματος σας (layouts/_default/single.html):

\{{ partial "fastcomments/comments.html" . }}

Το partial αποδίδεται μόνο όταν έχει ρυθμιστεί ένα tenantId. Απενεργοποιήστε τα σχόλια σε μια μεμονωμένη σελίδα με front matter:

+++
title = "A page with no comments"
comments = false
+++

Για να εμφανίσετε έναν μετρητή σχολίων δίπλα σε πολλές σελίδες ταυτόχρονα (ευρετήριο blog, λίστα ενότητας), χρησιμοποιήστε το widget μαζικής μέτρησης. Ανακτά όλες τις μετρήσεις της σελίδας σε ένα μόνο αίτημα. Αποτελείται από δύο μέρη: έναν δείκτη δίπλα σε κάθε στοιχείο και μία κλήση αρχικοποίησης μετά τη λίστα.

Σε ένα πρότυπο λίστας (layouts/_default/list.html):

<ul>
  \{{ range .Pages }}
    <li>
      <a href="\{{ .RelPermalink }}">\{{ .Title }}</a>
      \{{ partial "fastcomments/count-marker.html" . }}
    </li>
  \{{ end }}
</ul>
\{{ partial "fastcomments/bulk-count.html" (dict "page" .) }}

Το count-marker.html αποδίδει <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, χρησιμοποιώντας το ίδιο αναγνωριστικό που χρησιμοποιεί το widget σχολίων για τη συγκεκριμένη σελίδα (το urlId της, ή το permalink της όταν δεν έχει οριστεί urlId), ώστε οι μετρήσεις να αντιστοιχούν στα πραγματικά νήματα συζητήσεων. Το bulk-count.html εκπέμπει το μοναδικό αίτημα που τις συμπληρώνει.

Αν γράφετε τους δείκτες μόνοι σας (για παράδειγμα στο Markdown μιας σελίδας), χρησιμοποιήστε το shortcode για να εκπέμψετε την κλήση αρχικοποίησης:

<span class="fast-comments-count" data-fast-comments-url-id="article-1"></span>
<span class="fast-comments-count" data-fast-comments-url-id="article-2"></span>

\{{< fastcomments-comment-count-bulk >}}

Όλες οι επιλογές του widget FastComments ορίζονται κάτω από [params.fastcomments] στο hugo.toml και μπορούν να παρακαμφθούν ανά σελίδα στο front matter κάτω από [fastcomments]. Σειρά προτεραιότητας, από τη χαμηλότερη στην υψηλότερη: παράμετροι site, front matter σελίδας, παράμετροι shortcode.

# hugo.toml
[params.fastcomments]
  tenantId = "your-tenant-id"
  hasDarkBackground = true
  voteStyle = 1
  enableSearch = true

# a page's front matter
+++
title = "Article"
[fastcomments]
  urlId = "article-42"
  collapseReplies = true
+++

Όταν δεν παρέχεται ούτε url ούτε urlId, το url ορίζεται από προεπιλογή στο permalink της σελίδας, ώστε τα νήματα σχολίων να παραμένουν συνδεδεμένα με ένα σταθερό URL.

Διαμονή δεδομένων στην ΕΕ

Οι πελάτες ΕΕ ορίζουν region = "eu" για να δρομολογείται το widget στο cdn-eu.fastcomments.com:

[params.fastcomments]
  tenantId = "your-tenant-id"
  region = "eu"

Σημείωση για την πεζογραφία των κλειδιών

Το Hugo μετατρέπει όλα τα κλειδιά στο hugo.toml και στο front matter σε πεζά, αλλά τα widgets του FastComments απαιτούν κλειδιά σε camelCase (tenantId, hasDarkBackground). Αυτό το component επαναφέρει αυτόματα τη σωστή πεζογραφία για κάθε γνωστή επιλογή κορυφαίου επιπέδου, οπότε γράφετε τις επιλογές στην κανονική τους μορφή camelCase. Τα κλειδιά που είναι εμφωλευμένα μέσα σε τιμή αντικειμένου (για παράδειγμα τα κλειδιά ενός map translations ή τα πεδία του pageReactConfig) δεν επαναφέρονται. Ρυθμίστε αυτά μέσω του UI προσαρμογής του dashboard του FastComments.

Για την πλήρη λίστα των επιλογών widget, δείτε την τεκμηρίωση προσαρμογής του FastComments. Δύο widget απαιτούν μια υποχρεωτική επιλογή που δεν έχει προεπιλογή:

• fastcomments-collab-chat και fastcomments-image-chat απαιτούν target, έναν επιλεκτή CSS για το στοιχείο στο οποίο θα προσαρτηθούν.
• fastcomments-user-activity-feed απαιτεί userId.

• Τεκμηρίωση FastComments
• Προσαρμογή & Διαμόρφωση
• Τεκμηρίωση Hugo

Αυτά τα components είναι λεπτά περιτυλίγματα γύρω από τα βασικά μας widgets VanillaJS. Μπορούμε να ενημερώνουμε αυτά τα widgets (να διορθώνουμε σφάλματα, να προσθέτουμε λειτουργίες) χωρίς να δημοσιεύουμε αυτό το αποθετήριο, οπότε ένα ήσυχο ιστορικό εκδόσεων δεν σημαίνει ότι το FastComments είναι ανενεργό. Δείτε το blog μας για ενημερώσεις. Οι αλλαγές που σπάνε τη συμβατότητα στα υποκείμενα widgets κυκλοφορούν εδώ μαζί με αύξηση της έκδοσης.