Kako dodati klepetalnik Asyntai z UI v Docusaurus

Vodič po korakih za dokumentacijske strani Docusaurus

Platforma:

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte skript v docusaurus.config.js (priporočeno)

Najboljši način za dodajanje klepetalnika na vse strani vaše strani Docusaurus je prek konfiguracijske datoteke:

Odprite svoj projekt Docusaurus v svojem urejevalniku kode
Poiščite in odprite datoteko docusaurus.config.js v korenu projekta
Poiščite objekt const config = { }
Dodajte ali posodobite polje scripts s svojim klepetalnikom Asyntai:

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
};

Shranite datoteko docusaurus.config.js
Znova zgradite svojo stran z zagonom npm run build ali yarn build
Znova zaženite razvojni strežnik, če se izvaja lokalno

Nasvet: Polje scripts sprejema niz virov JavaScript. Oznaka script bo samodejno vstavljena v glavo HTML vsake strani. To je najčistejši in najbolj vzdržljiv način za strani Docusaurus.

Alternativni način 1: Oblika niza (preprostejša skladnja)

Če raje preprostejši pristop, lahko uporabite obliko niza v nizu scripts:

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

Opomba: Pri uporabi oblike niza boste morali spremeniti URL skripta, da bo vključeval vaš ID klepetalnika kot parameter poizvedbe, ali uporabite obliko objekta, prikazano v koraku 2, ki omogoča neposredno nastavitev atributa data-asyntai-id.

Alternativni način 2: Oznake glave po meri

Skript lahko dodate tudi z uporabo polja headTags v datoteki docusaurus.config.js:

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

Nasvet: Polje headTags zagotavlja več nadzora nad natančnimi oznakami HTML, vstavljenimi v razdelek <head>. Ta način je funkcionalno enakovreden uporabi polja scripts.

Alternativni način 3: Predloga HTML po meri (napredno)

Za napredne uporabnike, ki potrebujejo popoln nadzor nad predlogo HTML:

Ustvarite nov imenik: src/theme (če ne obstaja)
Ustvarite datoteko: src/theme/Root.js
Dodajte naslednjo kodo za dinamično vstavljanje skripta:

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}</>;
}

Shranite datoteko in znova zgradite svojo stran

Pomembno: Komponenta Root.js ovija celotno aplikacijo. Ta napredni način uporabite le, če potrebujete logiko JavaScript po meri ali imate posebne zahteve, ki jih ni mogoče izpolniti s pristopom konfiguracijske datoteke.

Alternativni način 4: Zamenjava komponente noge

Nogo lahko prilagodite, da vključuje skript:

Zaženite ukaz za zamenjavo: npm run swizzle @docusaurus/theme-classic Footer -- --eject
To ustvari kopijo komponente noge v src/theme/Footer/
Uredite komponento noge, da vključuje vašo oznako script
Dodajte skript pred zaključno oznako noge
Shranite in znova zgradite svojo stran

Opomba: Zamenjava vam daje popoln nadzor nad komponentami Docusaurus, vendar pomeni, da boste morali to komponento vzdrževati sami. Posodobitve Docusaurus ne bodo samodejno posodobile zamenjanih komponent.

Korak 3: Zgradite in namestite

Po dodajanju kode zgradite in namestite svojo stran Docusaurus:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Nasvet: Med razvojem zaženite npm start ali yarn start za lokalni predogled sprememb. Klepetalnik bi se moral prikazati v spodnjem desnem kotu na vseh straneh.

Korak 4: Preverite namestitev

Po namestitvi sprememb odprite svojo dokumentacijsko stran v novem zavihku brskalnika. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Prepričajte se, da ste po spremembah znova zgradili svojo stran. Preverite, ali ste zamenjali YOUR_WIDGET_ID s svojim dejanskim ID-jem klepetalnika z nadzorne plošče. Počistite predpomnilnik brskalnika ali si oglejte stran v načinu brez beleženja. Odprite konzolo brskalnika (F12), da preverite morebitne napake JavaScript.

Dokumentacija