הוספת תגובות לאתר Hugo שלך

כדי לראות כל shortcode ואת חלקי התבנית פועלים מקומית מול ה-tenant הציבורי demo, שיבטו את המאגר והפעילו את ה-exampleSite המצורף:

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

לכל ווידג'ט יש עמוד משלו בתיקייה exampleSite/content/ שניתן להעתיק ישירות לאתר שלך.

בחר אחת משתי הדרכים הסטנדרטיות להוספת רכיב נושא של Hugo.

אפשרות A: מודול של 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"

אפשרות B: רכיב תבנית (תת-מודול Git)

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

לאחר מכן התייחס אליו מתוך hugo.toml שלך. רשום אותו לצד התבנית שלך; הערכים המופיעים מאוחר יותר מנצחים, אז שמור את התבנית שלך ראשונה:

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

הגדר את מזהה ה-tenant שלך פעם אחת בקובץ hugo.toml:

[params.fastcomments]
  tenantId = "demo"   # החלף את "demo" במזהה ה-tenant של FastComments שלך

Then either wire the comments widget into your theme (see אינטגרציה של התמה), or drop a shortcode into any page's 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" >}}

כדי לצרף תגובות לכל פוסט כפי שהתמיכה המובנית של Hugo ב-Disqus עושה, הוסיפו שורה אחת לתבנית single של ערכת הנושא שלכם (layouts/_default/single.html):

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

ה-partial יוצג רק כאשר tenantId מוגדר. השביתו תגובות בעמוד בודד באמצעות front matter:

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

כדי להציג ספירת תגובות לצד מספר דפים בבת אחת (למשל אינדקס בלוג או רשימת מדור), השתמשו בווידג'ט ספירת-במקבץ. הוא מאחזר את כל הספירות שבדף בבקשה אחת. יש שני חלקים: סמן לצד כל פריט, וקריאת אתחול אחת אחרי הרשימה.

בתבנית רשימה (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>, תוך שימוש באותו מזהה שהווידג'ט תגובות משתמש עבור אותו דף (ה-urlId שלו, או הקישור הקבוע שלו כשה-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 >}}

כל אפשרויות הווידג'ט של 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
+++

אם לא סופקו אף אחד מ-url או urlId, הערך של url יוגדר כברירת מחדל לקישור הקבוע (permalink) של העמוד כדי ששרשורי התגובות יישארו קשורים ל-URL יציב.

מיקום אחסון נתונים (EU)

לקוחות ב-EU מגדירים region = "eu" כדי לנתב את הווידג'ט אל cdn-eu.fastcomments.com:

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

הערה לגבי אותיות המפתח (key casing)

Hugo ממיר את כל המפתחות ל-אותיות קטנות בקובץ hugo.toml וב-front matter, אבל הווידג'טים של FastComments דורשים מפתחות ב-camelCase (tenantId, hasDarkBackground). רכיב זה משחזר אוטומטית את הרישיות הנכונה עבור כל אפשרות ידועה ברמת השורש, לכן כתבו את האפשרויות בצורת ה-camelCase הרגילה. מפתחות שממוקמים בתוך ערך אובייקט (למשל המפתחות של מפת translations, או שדות של pageReactConfig) אינם משוחזרים. הגדר אותן דרך ממשק ההתאמה האישית בלוח הבקרה של FastComments במקום זאת.

לרשימה המלאה של אפשרויות הווידג'ט, ראה את תיעוד ההתאמות וההגדרות של FastComments. שני ווידג'טים דורשים אופציה חובה שאין לה ברירת מחדל:

• fastcomments-collab-chat ו-fastcomments-image-chat דורשים target, סלקטור CSS של האלמנט שאליו יש לצרף אותם.
• fastcomments-user-activity-feed דורש userId.

• תיעוד FastComments
• התאמה וקונפיגורציה
• תיעוד Hugo

רכיבים אלה הם מעטפות דקות סביב הווידג'טים הליבתיים שלנו ב-VanillaJS. אנו יכולים לעדכן את הווידג'טים האלה (לתקן באגים, להוסיף תכונות) מבלי לפרסם מאגר זה, לכן היסטוריית שחרורים שקטה לא בהכרח מעידה ש-FastComments אינה פעילה. בדקו את הבלוג שלנו לעדכונים. שינויים שוברי-תאימות בווידג'טים הבסיסיים ישוחררו יחד עם העלאת גרסה כאן.