איך להוסיף צ'אטבוט AI של Asyntai ל-Hugo

מדריך צעד אחר צעד למחולל אתרים סטטי Hugo

פלטפורמה:

שלב 1: קבל את קוד ההטמעה שלך

ראשית, עבור ללוח הבקרה של Asyntai וגלול למטה לחלק "קוד הטמעה". העתק את קוד ההטמעה הייחודי שלך שייראה כך:

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

הערה: הקוד למעלה הוא רק דוגמה. עליך להעתיק את קוד ההטמעה הייחודי שלך מלוח הבקרה שלך כיוון שהוא מכיל את מזהה הווידג'ט האישי שלך.

שלב 2: הוספת קוד ל-partial של ערכת העיצוב (מומלץ)

הדרך הטובה ביותר להוסיף את הצ'אטבוט לכל עמודי אתר Hugo שלך היא על ידי יצירת partial:

נווט לתיקייה layouts/partials/ של פרויקט Hugo שלך
צור קובץ חדש בשם asyntai-widget.html
הדבק את קוד ההטמעה של Asyntai בקובץ זה:

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

פתח את קובץ baseof.html של ערכת העיצוב שלך (בדרך כלל ב-layouts/_default/baseof.html)
הוסף את ה-partial לפני תגית הסגירה </body>:

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

שמור את הקובץ ובנה מחדש את אתר Hugo שלך

טיפ: שימוש ב-partials הוא הדרך המומלצת ב-Hugo לכלול רכיבים לשימוש חוזר. שיטה זו מבטיחה שהצ'אטבוט מופיע בכל עמוד שמשתמש בתבנית baseof.html, שזה בדרך כלל כל העמודים באתר שלך.

שיטה חלופית 1: הוספה ל-partial של Head

אם לערכת העיצוב שלך יש partial של head, ניתן להוסיף את הקוד שם:

אתר את partial ה-head של ערכת העיצוב שלך (בדרך כלל layouts/partials/head.html)
אם הוא לא קיים, צור layouts/partials/head.html בתיקיית השורש של הפרויקט שלך
הוסף את קוד ההטמעה של Asyntai לקובץ זה:

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

ודא ש-baseof.html שלך כולל partial זה בחלק <head>:

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

הערה: אם לערכת העיצוב שלך כבר יש partial של head.html עם תוכן קיים, פשוט הוסף את קוד Asyntai שלך אליו. אל תחליף את התוכן הקיים.

שיטה חלופית 2: תיקייה סטטית עם JavaScript מותאם אישית

לגישה מודולרית יותר באמצעות תיקיית static של Hugo:

נווט לתיקייה static/js/ של פרויקט Hugo שלך
צור את התיקייה אם היא לא קיימת
צור קובץ חדש בשם asyntai-loader.js
הוסף את הקוד הבא כדי לטעון את הווידג'ט:

// 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);
})();

הפנה לקובץ זה ב-baseof.html או ב-partial של ה-footer לפני </body>:

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

טיפ: קבצים בתיקיית static/ מועתקים כפי שהם לשורש האתר המפורסם שלך. פונקציית relURL מייצרת את הנתיב היחסי הנכון לפריסה שלך.

שיטה חלופית 3: תצורת Hugo (config.toml/yaml)

לחלק מערכות העיצוב של Hugo שתומכות בסקריפטים מותאמים אישית דרך תצורה:

# 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

הערה: שיטה זו עובדת רק אם ערכת העיצוב שלך תומכת בפרמטר customJS. בדוק את תיעוד ערכת העיצוב שלך. ייתכן שתצטרך גם להוסיף את תכונת data-asyntai-id דרך התאמת ערכת העיצוב.

שיטה חלופית 4: Front Matter (לעמוד ספציפי)

להוספת הצ'אטבוט לעמודים ספציפיים בלבד:

הוסף פרמטר מותאם אישית ל-front matter של העמוד שלך:

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

ב-baseof.html או ב-partial שלך, הוסף לוגיקה מותנית:

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

טיפ: גישה זו נותנת לך שליטה מדויקת על אילו עמודים כוללים את הצ'אטבוט. היא שימושית לאתרי תיעוד שבהם אתה רוצה את הווידג'ט רק בחלקים מסוימים.

שיטה חלופית 5: דריסת פריסות ערכת עיצוב

לדריסת הפריסה של ערכת העיצוב שלך מבלי לשנות קבצי ערכת עיצוב:

העתק את baseof.html של ערכת העיצוב מ-themes/your-theme/layouts/_default/
הדבק אותו ב-layouts/_default/baseof.html של הפרויקט שלך
הוסף את קוד ההטמעה של Asyntai לפני תגית הסגירה </body>
שמור ובנה מחדש את האתר שלך

חשוב: כאשר אתה דורס קבצי ערכת עיצוב, לא תקבל אוטומטית עדכונים לקבצים אלה כאשר ערכת העיצוב מתעדכנת. שיטה זו נותנת לך שליטה מלאה אך דורשת תחזוקה רבה יותר. שקול להשתמש ב-partials במקום לעדכוני ערכת עיצוב קלים יותר.

שלב 3: בנייה ופריסה

לאחר הוספת הקוד, בנה את אתר Hugo שלך:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

האתר שנוצר יהיה בתיקייה public/
פרוס תיקייה זו לפלטפורמת האחסון שלך (Netlify, Vercel, GitHub Pages וכו')

טיפ: במהלך הפיתוח, השתמש ב-hugo server כדי לצפות בתצוגה מקדימה של האתר שלך מקומית בכתובת http://localhost:1313. הצ'אטבוט אמור להופיע בפינה הימנית התחתונה בכל העמודים.

שלב 4: אימות ההתקנה

לאחר פריסת אתר Hugo שלך, פתח אותו בכרטיסיית דפדפן חדשה. אתה אמור לראות את כפתור הצ'אט בפינה הימנית התחתונה. לחץ עליו כדי לוודא שהוא נפתח ופועל כראוי.

לא רואה את הווידג'ט? ודא שבנית מחדש את האתר שלך עם פקודת hugo לאחר ביצוע שינויים. בדוק שהחלפת YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלך מלוח הבקרה. נקה את מטמון הדפדפן או צפה במצב גלישה פרטית. אם אתה משתמש ב-CDN, ייתכן שתצטרך לבטל את המטמון. פתח את מסוף הדפדפן (F12) כדי לבדוק אם יש שגיאות JavaScript.