Hugo'ya Asyntai AI Chatbot Nasıl Eklenir

Hugo statik site oluşturucu için adım adım kılavuz

Platform:

Adım 1: Yerleştirme Kodunuzu Alın

Önce Asyntai Dashboard'unuza gidin ve "Yerleştirme Kodu" bölümüne inin. Şuna benzeyen benzersiz yerleştirme kodunuzu kopyalayın:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Not: Yukarıdaki kod yalnızca bir örnektir. Kişisel widget kimliğinizi içerdiğinden, kendi benzersiz yerleştirme kodunuzu Dashboard'unuzdan kopyalamanız gerekir.

Adım 2: Tema Partial'ına Kod Ekleme (Önerilen)

Hugo sitenizin tüm sayfalarına chatbot eklemenin en iyi yolu bir partial oluşturmaktır:

Hugo projenizin layouts/partials/ dizinine gidin
asyntai-widget.html adında yeni bir dosya oluşturun
Asyntai gömme kodunuzu bu dosyaya yapıştırın:

<!-- layouts/partials/asyntai-widget.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Temanızın baseof.html dosyasını açın (genellikle layouts/_default/baseof.html konumunda)
Kapanış </body> etiketinden önce partial'ı ekleyin:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Dosyayı kaydedin ve Hugo sitenizi yeniden oluşturun

İpucu: Partial'lar kullanmak, yeniden kullanılabilir bileşenleri dahil etmenin Hugo tarafından önerilen yoludur. Bu yöntem, chatbot'un baseof.html şablonunu kullanan her sayfada görünmesini sağlar; bu genellikle sitenizdeki tüm sayfalardır.

Alternatif Yöntem 1: Head Partial'ına Ekleme

Temanızda bir head partial varsa kodu oraya ekleyebilirsiniz:

Temanızın head partial dosyasını bulun (genellikle layouts/partials/head.html)
Yoksa, proje kök dizininizde layouts/partials/head.html dosyasını oluşturun
Asyntai yerleştirme kodunuzu bu dosyaya ekleyin:

<!-- layouts/partials/head.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

baseof.html dosyanızın bu partial'ı <head> bölümünde içerdiğinden emin olun:

<head>
  {{ partial "head.html" . }}
</head>

Not: Temanızda zaten mevcut içerikli bir head.html partial varsa, Asyntai kodunuzu basitçe sonuna ekleyin. Mevcut içeriği değiştirmeyin.

Alternatif Yöntem 2: Özel JavaScript ile Static Klasörü

Hugo'nun static klasörünü kullanan daha modüler bir yaklaşım için:

Hugo projenizin static/js/ dizinine gidin
Dizin mevcut değilse oluşturun
asyntai-loader.js adında yeni bir dosya oluşturun
Widget'ı yüklemek için aşağıdaki kodu ekleyin:

// static/js/asyntai-loader.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.head.appendChild(script);
})();

Bu dosyayı baseof.html veya footer partial'ınızda </body> etiketinden önce referans verin:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

İpucu: static/ dizinindeki dosyalar, yayınlanan sitenizin kök dizinine olduğu gibi kopyalanır. relURL fonksiyonu dağıtımınız için doğru göreceli yolu oluşturur.

Alternatif Yöntem 3: Hugo Yapılandırması (config.toml/yaml)

Yapılandırma yoluyla özel komut dosyalarını destekleyen bazı Hugo temaları için:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Not: Bu yöntem yalnızca temanız customJS parametresini destekliyorsa çalışır. Temanızın belgelerini kontrol edin. data-asyntai-id özelliğini tema özelleştirmesi yoluyla eklemeniz de gerekebilir.

Alternatif Yöntem 4: Front Matter (Sayfaya Özel)

Chatbot'u yalnızca belirli sayfalara eklemek için:

Sayfanızın front matter bölümüne özel bir parametre ekleyin:

---
title: "My Page"
asyntaiWidget: true
---

baseof.html veya partial dosyanızda koşullu mantık ekleyin:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

İpucu: Bu yaklaşım, hangi sayfaların chatbot'u içereceği konusunda ayrıntılı kontrol sağlar. Widget'ı yalnızca belirli bölümlerde istediğiniz dokümantasyon siteleri için faydalıdır.

Alternatif Yöntem 5: Tema Düzenlerini Geçersiz Kılma

Tema dosyalarını değiştirmeden temanızın düzenini geçersiz kılmak için:

Temanın baseof.html dosyasını themes/your-theme/layouts/_default/ dizininden kopyalayın
Projenizin layouts/_default/baseof.html dizinine yapıştırın
Asyntai gömme kodunuzu kapanış </body> etiketinden önce ekleyin
Sitenizi kaydedin ve yeniden derleyin

Önemli: Tema dosyalarını geçersiz kıldığınızda, tema güncellendiğinde bu dosyalardaki güncellemeleri otomatik olarak almazsınız. Bu yöntem tam kontrol sağlar ancak daha fazla bakım gerektirir. Daha kolay tema güncellemeleri için partial'lar kullanmayı değerlendirin.

Adım 3: Derleyin ve Dağıtın

Kodu ekledikten sonra Hugo sitenizi oluşturun:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Oluşturulan site public/ dizininde olacaktır
Bu dizini barındırma platformunuza dağıtın (Netlify, Vercel, GitHub Pages vb.)

İpucu: Geliştirme sırasında, sitenizi http://localhost:1313 adresinde yerel olarak önizlemek için hugo server komutunu kullanın. Chatbot tüm sayfalarda sağ alt köşede görünmelidir.

Adım 4: Kurulumu Doğrulayın

Hugo sitenizi dağıttıktan sonra, yeni bir tarayıcı sekmesinde açın. Sağ alt köşede sohbet widget düğmesini görmelisiniz. Doğru şekilde açıldığından ve çalıştığından emin olmak için üzerine tıklayın.

Widget'ı göremiyor musunuz? Değişiklikler yaptıktan sonra sitenizi hugo komutuyla yeniden oluşturduğunuzdan emin olun. YOUR_WIDGET_ID'yi kontrol panelindeki gerçek widget kimliğinizle değiştirdiğinizi kontrol edin. Tarayıcı önbelleğinizi temizleyin veya gizli modda görüntüleyin. CDN kullanıyorsanız önbelleği geçersiz kılmanız gerekebilir. JavaScript hatalarını kontrol etmek için tarayıcı konsolunu (F12) açın.

Belgeler