Hugo Sitenize Yorum Ekleyin

Tüm shortcode'ları ve tema partial'larını genel demo kiracısına karşı yerel olarak çalışırken görmek için repoyu klonlayın ve paketlenmiş exampleSite'ı çalıştırın:

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

Her widget'in exampleSite/content/ altında kendi sayfası vardır; bunları doğrudan kendi sitenize kopyalayabilirsiniz.

Bir Hugo tema bileşeni eklemek için iki standart yöntemden birini seçin.

Seçenek A: Hugo Modülü (önerilen)

Sitenizin kök dizininden:

hugo mod init github.com/you/your-site   # yalnızca siteniz henüz bir modül değilse
hugo mod get github.com/FastComments/fastcomments-hugo

Ardından import'u hugo.toml dosyanıza ekleyin:

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

Seçenek B: Tema bileşeni (Git alt modülü)

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

Ardından bunu hugo.toml dosyanızdan referanslayın. Kendi temanızla birlikte listeleyin; sonraki girdiler kazanır, bu yüzden temanızı ilk sırada tutun:

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

tenant ID'nizi hugo.toml dosyasında bir kez ayarlayın:

[params.fastcomments]
  tenantId = "demo"   # "demo" değerini FastComments tenant ID'niz ile değiştirin

Sonra ya yorumlar widget'ını temanıza bağlayın (bkz. Tema Entegrasyonu), ya da herhangi bir sayfanın Markdown'una bir shortcode ekleyin:

\{{< fastcomments >}}

Örnekler

Metin içinde yorum sayısı:

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

Canlı sohbet:

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

İşbirlikçi sohbet, bir içerik öğesini CSS seçicisiyle hedefleme:

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

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

Görsel sohbet, bir görsel öğesini CSS seçicisiyle hedefleme:

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

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

İncelemeler özeti:

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

Kullanıcı etkinlik akışı:

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

Hugo'nun yerleşik Disqus desteğinin yaptığı gibi her gönderiye yorum eklemek için, temanızın single şablonuna (layouts/_default/single.html) bir satır ekleyin:

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

Partial yalnızca bir tenantId yapılandırıldığında render edilir. Bireysel bir sayfada yorumları front matter ile devre dışı bırakın:

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

Birçok sayfanın yanında aynı anda bir yorum sayısı göstermek için (bir blog indeksi, bir bölüm listesi), toplu sayım widget'ını kullanın. Bu, sayfadaki tüm sayımları tek bir istekte getirir. İki parçadan oluşur: her öğenin yanındaki bir işaretleyici ve listenin ardından yapılan bir init çağrısı.

Bir liste şablonunda (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 şu öğeyi render eder: <span class="fast-comments-count" data-fast-comments-url-id="..."></span>, yorumlar widget'ının o sayfa için kullandığı aynı tanımlayıcıyı (sayfanın urlId'si veya urlId yoksa permalink'i) kullanır, böylece sayımlar gerçek konu başlıklarıyla hizalanır. bulk-count.html ise bunları dolduran tek isteği gönderir.

Eğer işaretleyicileri kendiniz yazıyorsanız (örneğin bir sayfanın Markdown'unda), init çağrısını oluşturmak için kısa kodu kullanın:

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

Tüm FastComments widget seçenekleri hugo.toml içindeki [params.fastcomments] altında ayarlanır ve sayfa bazında front matter'da [fastcomments] altında geçersiz kılınabilir. Öncelik, en düşükten en yükseğe: site parametreleri, sayfa front matter'ı, shortcode parametreleri.

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

Ne url ne de urlId sağlandığında, url sayfanın permalink'ine varsayılan olur, böylece yorum dizileri sabit bir URL'ye bağlı kalır.

AB veri yerleşimi

AB müşterileri widget'ı cdn-eu.fastcomments.com'a yönlendirmek için region = "eu" olarak ayarlar:

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

Anahtar yazım şekli hakkında not

Hugo, hugo.toml ve front matter içindeki her anahtarı küçük harfe çevirir; ancak FastComments widget'ları camelCase anahtarlara (tenantId, hasDarkBackground) ihtiyaç duyar. Bu bileşen bilinen her üst düzey seçenek için doğru yazımı otomatik olarak geri getirir, bu yüzden seçenekleri normal camelCase biçiminde yazın. Bir nesne değerinin içine gömülü anahtarlar (örneğin bir translations haritasının anahtarları veya pageReactConfig alanları) geri getirilmez. Bu türleri FastComments kontrol panelindeki özelleştirme kullanıcı arayüzü üzerinden yapılandırın.

Widget seçeneklerinin tam listesi için FastComments özelleştirme belgelerine bakın. İki widget, varsayılanı olmayan zorunlu bir seçenek gerektirir:

• fastcomments-collab-chat ve fastcomments-image-chat için target gereklidir; bu, iliştirilecek öğe için bir CSS seçicisidir.
• fastcomments-user-activity-feed için userId gereklidir.

• FastComments Belgeleri
• Özelleştirme ve Yapılandırma
• Hugo Belgeleri

Bu bileşenler, çekirdek VanillaJS widget'larının ince sarmalayıcılarıdır. Bu widget'ları (hataları düzeltme, yeni özellik ekleme) bu depoyu yayımlamadan güncelleyebiliriz, bu yüzden sakin bir sürüm geçmişi FastComments'in faal olmadığı anlamına gelmez. Güncellemeler için blogumuz adresine bakın. Altta yatan widget'lara yapılan geri uyumsuz değişiklikler burada bir sürüm artışıyla birlikte gelir.