अपनी Hugo साइट पर टिप्पणियाँ जोड़ें

अपने कोडिंग एजेंट को FastComments का वह संदर्भ दें जिसकी उसे आवश्यकता है - विजेट्स, कॉन्फ़िगरेशन, Secure SSO, REST API और SDKs:

npx skills add fastcomments/skills

यह Claude Code, Codex, Cursor, Copilot, Gemini और skills CLI द्वारा समर्थित हर अन्य एजेंट के साथ काम करता है।

सार्वजनिक demo टेनेंट के विरुद्ध लोकल रूप से हर शॉर्टकोड और थीम पार्शियल देखने के लिए, रिपॉज़िटरी को क्लोन करें और बंडल किया गया exampleSite चलाएँ:

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

प्रत्येक विजेट की exampleSite/content/ के अंतर्गत अपना पेज होता है, जिसे आप सीधे अपनी साइट में कॉपी कर सकते हैं।

Hugo थीम कंपोनेंट जोड़ने के दो मानक तरीकों में से एक चुनें।

विकल्प A: Hugo Module (अनुशंसित)

अपनी साइट के रूट से:

hugo mod init github.com/you/your-site   # केवल तब जब आपकी साइट पहले से मॉड्यूल न हो
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" को अपनी FastComments tenant ID से बदलें

फिर या तो कमेंट्स विजेट को अपनी थीम में जोड़ें (Theme Integration देखें), या किसी भी पेज के Markdown में एक shortcode डालें:

\{{< fastcomments >}}

उदाहरण

टेक्स्ट के साथ इनलाइन टिप्पणी संख्या:

इस पेज पर \{{< fastcomments-comment-count >}} टिप्पणियाँ हैं।

लाइव चैट:

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

CSS सेलेक्टर द्वारा किसी कंटेंट एलिमेंट को लक्षित करते हुए कोलैब चैट:

<article id="post-body">
  <p>टिप्पणी छोड़ने के लिए मुझे हाइलाइट करें।</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
+++

एक साथ कई पेजों के बगल में कमेंट काउंट दिखाने के लिए (एक ब्लॉग इंडेक्स, एक सेक्शन लिस्ट), बल्क काउंट विजेट का उपयोग करें। यह पेज पर मौजूद हर काउंट को एक ही रिक्वेस्ट में फ़ेच करता है। इसके दो हिस्से हैं: प्रत्येक आइटम के बगल में एक मार्कर, और लिस्ट के बाद एक 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 <span class="fast-comments-count" data-fast-comments-url-id="..."></span> रेंडर करता है, उसी आइडेंटिफ़ायर का उपयोग करते हुए जो उस पेज के लिए कमेंट्स विजेट उपयोग करता है (उसका urlId, या जब कोई urlId सेट न हो तो उसका परमालिंक), ताकि काउंट असली थ्रेड्स से मेल खाएं। bulk-count.html वह एकल रिक्वेस्ट जारी करता है जो इन्हें भरती है।

यदि आप मार्कर स्वयं लिखते हैं (उदाहरण के लिए किसी पेज के Markdown में), तो 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 >}}

सभी FastComments विजेट विकल्प hugo.toml में [params.fastcomments] के अंतर्गत सेट किए जाते हैं, और प्रति पृष्ठ front matter में [fastcomments] के अंतर्गत ओवरराइड किए जा सकते हैं। प्राथमिकता, निम्नतम से अधिकतम: साइट params, पृष्ठ 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 ग्राहक विजेट को cdn-eu.fastcomments.com पर रूट करने के लिए region = "eu" सेट करते हैं:

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

की केसिंग पर नोट

Hugo hugo.toml और front matter में हर की को लोअरकेस कर देता है, लेकिन FastComments विजेट को camelCase कीज़ (tenantId, hasDarkBackground) की आवश्यकता होती है। यह कंपोनेंट हर ज्ञात टॉप-लेवल विकल्प के लिए सही केसिंग स्वचालित रूप से पुनर्स्थापित करता है, इसलिए विकल्पों को उनके सामान्य camelCase रूप में लिखें। ऑब्जेक्ट मान के अंदर नेस्ट की गई कीज़ (उदाहरण के लिए translations मैप की कीज़, या pageReactConfig के फ़ील्ड) पुनर्स्थापित नहीं की जातीं। उन्हें इसके बजाय FastComments डैशबोर्ड कस्टमाइज़ेशन UI के माध्यम से कॉन्फ़िगर करें।

पूरी विजेट विकल्पों की सूची के लिए, FastComments कस्टमाइज़ेशन दस्तावेज़ देखें। दो विजेट एक आवश्यक विकल्प लेते हैं जिसका कोई डिफ़ॉल्ट नहीं है:

• fastcomments-collab-chat और fastcomments-image-chat को target की आवश्यकता होती है, जो जिस तत्व से जोड़ना है उसके लिए एक CSS सेलेक्टर है।
• fastcomments-user-activity-feed को userId की आवश्यकता होती है।

• FastComments दस्तावेज़ीकरण
• कस्टमाइज़ेशन और कॉन्फ़िगरेशन
• Hugo दस्तावेज़ीकरण

ये कंपोनेंट्स हमारे मुख्य VanillaJS विजेट्स के पतले रैपर हैं। हम उन विजेट्स को (बग ठीक करके, फीचर्स जोड़कर) इस रिपॉज़िटरी को प्रकाशित किए बिना अपडेट कर सकते हैं, इसलिए रिलीज़ हिस्ट्री में कम गतिविधि का मतलब यह नहीं है कि FastComments निष्क्रिय है। अपडेट के लिए हमारा ब्लॉग देखें। अंतर्निहित विजेट्स में ब्रेकिंग बदलाव यहाँ वर्ज़न बंप के साथ आते हैं।