Προσθέστε σχόλια στον ιστότοπό σας Hugo

Για να δείτε κάθε 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.

Επιλογή Α: Μονάδα Hugo (συνιστάται)

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

hugo mod init github.com/you/your-site   # only if your site is not already a module
hugo mod get github.com/FastComments/fastcomments-hugo

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

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

Επιλογή Β: Στοιχείο θέματος (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 του 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 >}}

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

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

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

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

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

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

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

Σε ένα template λίστας (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 για να εκτελέσετε την κλήση init αντί αυτού:

<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
+++

When neither url nor urlId is provided, url defaults to the page's permalink so comment threads stay tied to a stable URL.

Τοποθεσία δεδομένων στην ΕΕ

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

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

Σημείωση σχετικά με τη μορφοποίηση (case) των κλειδιών

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

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

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

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

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