Az Asyntai AI Chatbot hozzáadása a Docusaurushoz

Lépésről lépésre útmutató Docusaurus dokumentációs webhelyekhez

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: Szkript hozzáadása a docusaurus.config.js fájlhoz (ajánlott)

A legjobb módja, hogy az összes Docusaurus oldalhoz hozzáadja a chatbotot, a konfigurációs fájlon keresztül:

Nyissa meg a Docusaurus projektet a kódszerkesztőjében
Keresse meg és nyissa meg a docusaurus.config.js fájlt a projekt gyökérkönyvtárában
Keresse meg a const config = { } objektumot
Adja hozzá vagy frissítse a scripts mezőt az Asyntai widgetjével:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

Mentse el a docusaurus.config.js fájlt
Építse újra a webhelyet a npm run build vagy a yarn build parancs futtatásával
Indítsa újra a fejlesztői szervert, ha helyileg fut

Tipp: A scripts mező JavaScript forrásokat tartalmazó tömböt fogad el. A script tag automatikusan bekerül minden oldal HTML fejlécébe. Ez a legtisztább és legkarbantarthatóbb módszer Docusaurus webhelyekhez.

Alternatív 1. módszer: Karakterlánc formátum (egyszerűbb szintaxis)

Ha egyszerűbb megközelítést részesít előnyben, használhat karakterlánc formátumot a scripts tömbben:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

Megjegyzés: Karakterlánc formátum használatakor módosítania kell a szkript URL-jét, hogy tartalmazza a widget azonosítóját lekérdezési paraméterként, vagy használja a 2. lépésben bemutatott objektum formátumot, amely lehetővé teszi a data-asyntai-id attribútum közvetlen beállítását.

Alternatív 2. módszer: Egyéni Head tagek

A szkriptet a headTags mező segítségével is hozzáadhatja a docusaurus.config.js fájlban:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

Tipp: A headTags mező nagyobb irányítást biztosít a <head> szakaszba beillesztett pontos HTML tagek felett. Ez a módszer funkcionálisan egyenértékű a scripts mező használatával.

Alternatív 3. módszer: Egyéni HTML sablon (haladó)

Haladó felhasználók számára, akiknek teljes kontrollra van szükségük a HTML sablon felett:

Hozzon létre egy új könyvtárat: src/theme (ha még nem létezik)
Hozzon létre egy fájlt: src/theme/Root.js
Adja hozzá a következő kódot a szkript dinamikus befecskendezéséhez:

import React, { useEffect } from 'react';

export default function Root({children}) {
  useEffect(() => {
    const 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);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

Mentse el a fájlt, és építse újra a webhelyet

Fontos: A Root.js komponens az egész alkalmazást burkolja. Ezt a haladó módszert csak akkor szabad használni, ha egyéni JavaScript logikára van szüksége, vagy ha olyan speciális követelményei vannak, amelyek nem teljesíthetők a konfigurációs fájlos megközelítéssel.

Alternatív 4. módszer: Lábléc komponens swizzle-elése

A lábléc testreszabható, hogy tartalmazza a szkriptet:

Futtassa a swizzle parancsot: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Ez létrehozza a Lábléc komponens másolatát a src/theme/Footer/ könyvtárban
Szerkessze a Lábléc komponenst, hogy tartalmazza a script taget
Adja hozzá a szkriptet a lábléc záró tagje elé
Mentse el, és építse újra a webhelyet

Megjegyzés: A swizzle teljes irányítást ad a Docusaurus komponensek felett, de ez azt jelenti, hogy saját maga kell karbantartania azt a komponenst. A Docusaurus frissítései nem frissítik automatikusan a swizzle-elt komponenseket.

3. lépés: Fordítás és telepítés

A kód hozzáadása után fordítsa le és telepítse Docusaurus webhelyét:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

Tipp: Fejlesztés során futtassa az npm start vagy a yarn start parancsot a módosítások helyi előnézetéhez. A chatbotnak minden oldalon meg kell jelennie a jobb alsó sarokban.

4. lépés: Telepítés ellenőrzése

A módosítások telepítése után nyissa meg dokumentációs webhelyét egy új böngészőlapon. A jobb alsó sarokban meg kell jelennie a chat widget gombnak. Kattintson rá, hogy megbizonyosodjon arról, hogy megfelelően nyílik meg és működik.

Nem látja a widgetet? Győződjön meg arról, hogy újraépítette webhelyét a módosítások elvégzése után. Ellenőrizze, hogy kicserélte-e a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról. Ürítse ki a böngésző gyorsítótárát, vagy nézze meg inkognitó módban. Nyissa meg a böngésző konzolját (F12), és ellenőrizze, hogy nincsenek-e JavaScript hibák.

Dokumentáció