วิธีเพิ่มแชทบอท AI Asyntai ลงใน Hugo

คู่มือทีละขั้นตอนสำหรับตัวสร้างเว็บไซต์แบบคงที่ Hugo

แพลตฟอร์ม:

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

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

หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ

ขั้นตอนที่ 2: เพิ่มโค้ดลงใน Theme 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: เพิ่มลงใน Head Partial

หากธีมของคุณมี head partial คุณสามารถเพิ่มโค้ดที่นั่น:

ค้นหา head partial ของธีมคุณ (โดยปกติคือ 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>

หมายเหตุ: หากธีมของคุณมี head.html partial พร้อมเนื้อหาอยู่แล้ว เพียงเพิ่มโค้ด Asyntai ต่อท้าย อย่าแทนที่เนื้อหาที่มีอยู่

วิธีทางเลือกที่ 2: โฟลเดอร์ Static พร้อม 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 หรือ footer partial ก่อน </body>:

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

เคล็ดลับ: ไฟล์ในไดเรกทอรี static/ จะถูกคัดลอกตามเดิมไปยังรูทของเว็บไซต์ที่เผยแพร่ ฟังก์ชัน relURL จะสร้างเส้นทางสัมพัทธ์ที่ถูกต้องสำหรับการ deploy ของคุณ

วิธีทางเลือกที่ 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: Override เลย์เอาต์ธีม

เพื่อ override เลย์เอาต์ธีมโดยไม่ต้องแก้ไขไฟล์ธีม:

คัดลอก baseof.html ของธีมจาก themes/your-theme/layouts/_default/
วางลงใน layouts/_default/baseof.html ของโปรเจกต์คุณ
เพิ่มโค้ดฝัง Asyntai ของคุณก่อนแท็กปิด </body>
บันทึกและสร้างเว็บไซต์ของคุณใหม่

สำคัญ: เมื่อคุณ override ไฟล์ธีม คุณจะไม่ได้รับการอัปเดตไฟล์เหล่านั้นโดยอัตโนมัติเมื่อธีมถูกอัปเดต วิธีนี้ให้คุณควบคุมได้เต็มที่แต่ต้องการการดูแลรักษามากขึ้น พิจารณาใช้ partials แทนเพื่อการอัปเดตธีมที่ง่ายขึ้น

ขั้นตอนที่ 3: สร้างและ Deploy

หลังจากเพิ่มโค้ดแล้ว ให้สร้างเว็บไซต์ Hugo ของคุณ:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

เว็บไซต์ที่สร้างจะอยู่ในไดเรกทอรี public/
Deploy ไดเรกทอรีนี้ไปยังแพลตฟอร์มโฮสติ้งของคุณ (Netlify, Vercel, GitHub Pages ฯลฯ)

เคล็ดลับ: ในระหว่างการพัฒนา ให้ใช้ hugo server เพื่อดูตัวอย่างเว็บไซต์ในเครื่องที่ http://localhost:1313 แชทบอทควรปรากฏที่มุมขวาล่างในทุกหน้า

ขั้นตอนที่ 4: ตรวจสอบการติดตั้ง

หลังจาก deploy เว็บไซต์ Hugo ของคุณแล้ว ให้เปิดในแท็บเบราว์เซอร์ใหม่ คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดและทำงานได้อย่างถูกต้อง

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้สร้างเว็บไซต์ใหม่ด้วยคำสั่ง hugo หลังจากทำการเปลี่ยนแปลง ตรวจสอบว่าคุณได้แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงจากแดชบอร์ด ล้างแคชเบราว์เซอร์หรือดูในโหมดส่วนตัว หากใช้ CDN คุณอาจต้อง invalidate แคช เปิดคอนโซลเบราว์เซอร์ (F12) เพื่อตรวจสอบข้อผิดพลาด JavaScript