Az Asyntai AI Chatbot hozzáadása a Statamic-hoz

Lépésről lépésre útmutató a Statamic CMS weboldalakhoz

Platform:

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

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

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Telepítési módszer kiválasztása

A Statamic az Antlers és a Blade sablonrendszert is támogatja. Válassza a módszert az Ön által használt sablonrendszer alapján:

1. módszer: Antlers elrendezés (ajánlott)

A chatbot hozzáadásának legegyszerűbb módja a fő elrendezési fájlba való beillesztés. A Statamic alapértelmezett sablonrendszere az Antlers.

Navigáljon a Statamic projekt resources/views könyvtárához
Open your layout file (usually layout.antlers.html)
Keresse meg a záró </body> taget
Illessze be az Asyntai beágyazási kódot közvetlenül a </body> tag elé
Mentse el a fájlt

<!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>

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

2. módszer: Blade elrendezés

Ha az Antlers helyett Blade sablonokat használ, kövesse ezeket a lépéseket:

Navigáljon a Statamic projekt resources/views könyvtárához
Open your Blade layout file (e.g., layout.blade.php)
Keresse meg a záró </body> taget
Illessze be az Asyntai beágyazási kódot közvetlenül a </body> tag elé
Mentse el a fájlt

<!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>

Megjegyzés: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

3. módszer: Részleges sablon használata

A jobb szervezettség érdekében létrehozhat egy újrafelhasználható részleges sablont a chatbothoz:

1. lépés: Hozza létre a részleges sablont

Hozzon létre egy új fájlt itt: resources/views/partials/_chatbot.antlers.html
Adja hozzá az Asyntai beágyazási kódot ehhez a fájlhoz:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

2. lépés: Foglalja bele az elrendezésbe

Nyissa meg az elrendezési fájlt (layout.antlers.html)
Adja hozzá a részleges sablon taget a </body> elé:
{{ partial:chatbot }} </body>

Miért használjon részleges sablont? A részleges sablonok megkönnyítik a külső szkriptek egy helyen való kezelését. Ha valaha frissítenie kell a chatbot kódját, csak egy fájlt kell szerkesztenie.

Több elrendezés használata

Ha a Statamic webhelye több elrendezést használ (pl. különböző elrendezések blogbejegyzésekhez, céloldalakhoz stb.), adja hozzá a chatbot szkriptet minden elrendezési fájlhoz, amelyen meg szeretné jeleníteni a widgetet.

Több módon beállíthatja, hogy egy oldal melyik elrendezést használja:

A bejegyzésben: Adja hozzá a layout: your_layout kódot a front matterhez
A gyűjteményben: Állítson be alapértelmezett elrendezést a gyűjtemény konfigurációs YAML fájljában
A tervrajzban: Adjon hozzá egy elrendezés mezőt, amelyből a szerkesztők választhatnak

Statamic Starter Kitekhez

Ha Statamic Starter Kitet használ, az elrendezés helye eltérhet. Általános helyek:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html részleges sablonokkal a resources/views/snippets/ könyvtárban

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

3. lépés: Gyorsítótár törlése és ellenőrzés

A kód hozzáadása után ürítse a Statamic gyorsítótárát, hogy a módosítások érvénybe lépjenek:

php artisan cache:clear
php please stache:refresh

Ezután látogassa meg weboldalát egy új böngészőlapon vagy inkognító ablakban. A jobb alsó sarokban meg kell jelennie a chat widget gombnak. Kattintson rá, hogy megbizonyosodjon arról, hogy megnyílik és megfelelően működik.

Nem látja a widgetet? Győződjön meg róla, hogy törölte mind a Laravel, mind a Statamic Stache gyorsítótárát. Ha statikus gyorsítótárazást használ, futtassa a php please static:clear parancsot is. Ellenőrizze a böngésző konzolját (F12) JavaScript hibák után.

Fontos: Ha a Statamic statikus oldalszerkesztőjét (ssg) használja, a chatbot szkript hozzáadása után feltétlenül generálja újra a statikus fájlokat a php please ssg:generate futtatásával.

Dokumentacio