Προσθέστε σχόλια στον ιστότοπό σας 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.

Επιλογή 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
+++

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

Σε ένα πρότυπο λίστας (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 renders <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, using the same identifier the comments widget uses for that page (its urlId, or its permalink when no urlId is set), so the counts line up with the real threads. bulk-count.html αποστέλλει το μοναδικό αίτημα που τις συμπληρώνει.

If you write the markers yourself (for example in a page's Markdown), use the shortcode to emit the init call instead:

<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]. Προτεραιότητα, από τη χαμηλότερη στη υψηλότερη: παράμετροι ιστότοπου, 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"

Σημείωση σχετικά με τη χρήση πεζών/κεφαλαίων στα κλειδιά

Το Hugo μετατρέπει κάθε κλειδί σε πεζά στο hugo.toml και στο front matter, αλλά τα widgets FastComments απαιτούν κλειδιά σε camelCase (tenantId, hasDarkBackground). Αυτό το component αποκαθιστά αυτόματα τη σωστή χρήση πεζών/κεφαλαίων για κάθε γνωστή κορυφαίου επιπέδου επιλογή, οπότε γράψτε τις επιλογές στη συνήθη μορφή camelCase. Τα κλειδιά που είναι φωλιασμένα μέσα σε μια τιμή αντικειμένου (για παράδειγμα τα κλειδιά ενός χάρτη translations, ή πεδία του pageReactConfig) δεν αποκαθίστανται. Διαμορφώστε αυτά μέσω του UI προσαρμογής του πίνακα ελέγχου 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 κυκλοφορούν εδώ μαζί με αύξηση της έκδοσης.