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

دليل خطوة بخطوة لمواقع Statamic CMS

المنصة:

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

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

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

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

الخطوة 2: اختيار طريقة التثبيت

يدعم Statamic كلاً من محركي قوالب Antlers وBlade. اختر الطريقة بناءً على محرك القوالب الذي تستخدمه:

الطريقة 1: تخطيط Antlers (موصى به)

أسهل طريقة لإضافة روبوت الدردشة هي تضمينه في ملف التخطيط الرئيسي. يستخدم Statamic محرك Antlers كمحرك قوالب افتراضي.

انتقل إلى دليل resources/views في مشروع Statamic الخاص بك
افتح ملف التخطيط (عادةً layout.antlers.html)
ابحث عن وسم الإغلاق </body>
الصق كود تضمين Asyntai الخاص بك قبل وسم </body> مباشرة
احفظ الملف

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

نصيحة: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

الطريقة 2: تخطيط Blade

إذا كنت تستخدم قوالب Blade بدلاً من Antlers، اتبع هذه الخطوات:

انتقل إلى دليل resources/views في مشروع Statamic الخاص بك
افتح ملف تخطيط Blade (مثل layout.blade.php)
ابحث عن وسم الإغلاق </body>
الصق كود تضمين Asyntai الخاص بك قبل وسم </body> مباشرة
احفظ الملف

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

ملاحظة: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

الطريقة 3: استخدام جزئية

لتنظيم أفضل، يمكنك إنشاء جزئية قابلة لإعادة الاستخدام لروبوت الدردشة:

الخطوة 1: إنشاء الجزئية

أنشئ ملفاً جديداً في resources/views/partials/_chatbot.antlers.html
أضف كود تضمين Asyntai الخاص بك إلى هذا الملف:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

الخطوة 2: التضمين في التخطيط

افتح ملف التخطيط (layout.antlers.html)
أضف وسم الجزئية قبل </body>:
{{ partial:chatbot }} </body>

لماذا نستخدم جزئية؟ تسهّل الجزئيات إدارة الأكواد الخارجية في مكان واحد. إذا احتجت لتحديث كود روبوت الدردشة، ما عليك سوى تعديل ملف واحد.

استخدام تخطيطات متعددة

إذا كان موقع Statamic الخاص بك يستخدم تخطيطات متعددة (مثل تخطيطات مختلفة للمقالات وصفحات الهبوط، إلخ)، تأكد من إضافة كود روبوت الدردشة إلى كل ملف تخطيط تريد ظهور الأداة فيه.

يمكنك تحديد التخطيط الذي تستخدمه الصفحة بعدة طرق:

في المدخل: أضف layout: your_layout إلى البيانات الوصفية
في المجموعة: عيّن تخطيطاً افتراضياً في ملف إعدادات YAML للمجموعة
في المخطط: أضف حقل تخطيط يمكن للمحررين الاختيار منه

لحزم Statamic الأولية

إذا كنت تستخدم حزمة Statamic أولية، فقد يختلف موقع التخطيط. تشمل المواقع الشائعة:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html مع جزئيات في resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

الخطوة 3: مسح ذاكرة التخزين المؤقت والتحقق

بعد إضافة الكود، امسح ذاكرة التخزين المؤقت لـ Statamic لضمان تفعيل التغييرات:

php artisan cache:clear
php please stache:refresh

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

لا ترى الأداة؟ تأكد من مسح ذاكرة التخزين المؤقت لكل من Laravel وStache في Statamic. إذا كنت تستخدم التخزين المؤقت الثابت، شغّل php please static:clear أيضاً. تحقق من وحدة تحكم المتصفح (F12) بحثاً عن أي أخطاء JavaScript.

مهم: إذا كنت تستخدم مولد المواقع الثابتة في Statamic (ssg)، تأكد من إعادة توليد ملفاتك الثابتة بعد إضافة كود روبوت الدردشة عن طريق تشغيل php please ssg:generate.

التوثيق