كيفية إضافة روبوت الدردشة Asyntai AI إلى Hugo

دليل خطوة بخطوة لمولد المواقع الثابتة Hugo

المنصة:

الخطوة 1: احصل على كود التضمين

أولاً، انتقل إلى لوحة تحكم Asyntai وانتقل لأسفل إلى قسم "Embed Code". انسخ كود التضمين الفريد الذي سيبدو هكذا:

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

ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.

الخطوة 2: إضافة الكود إلى جزء القالب (مُوصى به)

أفضل طريقة لإضافة روبوت الدردشة إلى جميع صفحات موقع Hugo الخاص بك هي إنشاء جزء:

انتقل إلى مجلد 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)
أضف الجزء قبل وسم الإغلاق </body>:

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

احفظ الملف وأعد بناء موقع Hugo الخاص بك

نصيحة: استخدام الأجزاء هو الطريقة الموصى بها من Hugo لتضمين المكونات القابلة لإعادة الاستخدام. تضمن هذه الطريقة ظهور روبوت الدردشة في كل صفحة تستخدم قالب baseof.html، وهو عادةً جميع صفحات موقعك.

الطريقة البديلة 1: الإضافة إلى جزء Head

إذا كان القالب الخاص بك يحتوي على جزء head، يمكنك إضافة الكود هناك:

حدد موقع جزء 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 يتضمن هذا الجزء في قسم <head>:

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

ملاحظة: إذا كان القالب الخاص بك يحتوي بالفعل على جزء head.html بمحتوى موجود، فما عليك سوى إلحاق كود Asyntai به. لا تستبدل المحتوى الموجود.

الطريقة البديلة 2: المجلد الثابت مع JavaScript مخصص

لنهج أكثر تنظيمًا باستخدام المجلد الثابت في 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 أو جزء التذييل قبل </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: البيانات الوصفية (خاصة بالصفحة)

لإضافة روبوت الدردشة إلى صفحات محددة فقط:

أضف معلمة مخصصة إلى البيانات الوصفية للصفحة:

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

في baseof.html أو الجزء الخاص بك، أضف منطقًا شرطيًا:

{{ 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>
احفظ وأعد بناء موقعك

مهم: عند تجاوز ملفات القالب، لن تتلقى تلقائيًا التحديثات لتلك الملفات عند تحديث القالب. تمنحك هذه الطريقة تحكمًا كاملاً ولكنها تتطلب مزيدًا من الصيانة. فكر في استخدام الأجزاء بدلاً من ذلك لتسهيل تحديثات القالب.

الخطوة 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.