Štvorcový priestor na text na reč – vkladanie kódu
Integrácia štvorcového priestoru
Štvorcový text na reč – hlas s umelou inteligenciou prostredníctvom vkladania kódu
Tvorcovia, kouči a majitelia portfólia môžu pridajte hlas umelej inteligencie do Squarespace s GSpeechPrirodzene rozprávajte na blogoch, stránkach kurzov a v prípadových štúdiách, zatiaľ čo sa zvuk generuje v GSpeech Cloud Console - Nie sú potrebné žiadne kľúče APIa žiadne zaťaženie TTS na hostingu Squarespace.
Táto príručka ukazuje Vkladanie textu do štvorcového priestoru pomocou kódu TTSvložte vložený kód do vkladania kódu päty pred , umiestnite hráčov na celú stránku / tlačidlo / kruh s Kódový blok, potom mapa Výber obsahu a Render Element takže hráč si prečíta správny text blogu alebo portfólia.
Vstrekovanie kódu + blok kódu — vloženie päty na celú stránku plus prispôsobenie HTML kódu pre každú stránku.
Generovanie cloudového zvuku — syntetizovať raz, ukladať do vyrovnávacej pamäte a prehrávať počas viacerých návštev.
Nie sú potrebné žiadne kľúče API — hlasy a hráči z jednej konzoly.
Widgety pripravené pre tvorcov — blogy, kurzy a prípadové štúdie portfólia so samostatnými návrhmi.
Najlepšie pre: Blogy Squarespace, stránky s koučingom a kurzami a prípadové štúdie portfólia, kde by si návštevníci mali vypočuť dlhý text bez toho, aby opustili stránku.
Vytvorte webovú stránku — ak ste ešte nepridali stránku, postupujte podľa vytvorte webové stránky.
Otvoriť stránku — choď k svojmu prístrojová doska a vyberte stránku Squarespace.
Skopírujte kód pripojenia - OTVORENÉ Integrácie → Squarespace / HTML webová stránka a skopírujte kód pripojenia.
Prilepiť pred — vložte kód cez Nastavenia → Rozšírené → Vkladanie kódu (Päta) pred záverečnou časťou označiť, potom uložiť a publikovať.
Načíta sa kód pripojenia GSpeech na každej stránke, kde sa nachádza. Hráči sa zobrazia iba tam, kde umiestnite mounty pomocou bloku kódu / vloženia / vlastného HTML a iba vtedy, keď je zodpovedajúci widget publikovaný a nakonfigurovaný.
Mapovací model
Vkladanie kódu, bloky kódu a mapovanie obsahu
V Squarespace načíta Footer Code Injection engine len raz. Každý widget potom namapuje bloky blogu, sekcie kurzu alebo kópiu portfólia na pripojený blok kódu – bez vkladania zvuku do každého rozloženia stránky:
1Kód pripojenia
Načíta engine z vkladania kódu do päty. Bez neho zostanú pripojenia blokov kódu prázdne.
2Vlastný widget
Konfigurácia ovládacieho panela: hlas, jazyk, dizajn, nastavenia obsahu, pravidlá URL pre blogy verzus portfóliá.
3Pripojenie / blok kódu
Značka na stránke (napríklad .gsp_full_player), kde sa zobrazí používateľské rozhranie prehrávača.
4Mapovanie obsahu
Výber obsahu = aký text v Squarespace sa má čítať. Render Element = kde sa hráč objaví. Vylúčiť / Názov / URL adresy spresňujú zhodu.
Neobmedzené widgety – samostatné widgety Celá stránka, Tlačidlo alebo Kruh pre blogy, kurzy a rozloženia portfólia.
Neobmedzený počet hráčov na widget — jeden publikovaný widget môže napájať každé zodpovedajúce pripojenie bloku kódu povolené pravidlami Render Element + URL.
Blok kódu / Vlastný HTML kód — na Squarespace vyzerá držiak takto <div class="gsp_full_player"></div>Na WordPresse sa v rovnakej myšlienke používajú krátke kódy ako napríklad [gspeech].
Predvolené verzus rozšírené nastavenia — predvolené pripojenia fungujú rýchlo. Vlastné sekcie vyžadujú presné hodnoty pre výber obsahu / vykresľovací prvok.
Hráči
Pridajte hráčov pomocou bloku kódu / vlastného HTML
Umiestnite ľubovoľný z týchto držiakov tam, kde sa má hráč zobraziť na stránke (Blok kódu / Vložiť / Vlastný HTML). Kliknite na kartu, ktorú chcete skopírovať. Potom nastavte widget. Render Element do tej istej triedy.
Priradiť bloky Squarespace a text blogu k prehrávaču
Vo widgete obsah Stlačte tabulátor, ukážte selektormi na položky blogu Squarespace, blokový obsah a sekcie portfólia, ktoré by návštevníci mali počuť – potom umiestnite prehrávač s držiakom Code Block.
id → # / trieda → . — skopírujte z Inspect; zapíšte ich s mriežkou alebo bodkou v konzole.
Zhromaždite kúsky — Výber obsahu akceptuje niekoľko cieľov oddelených čiarkou.
Orezať kusy — Zoznam vylúčení používa rovnaké predpony + čiarky.
definuje aký text sa hovoríPoužívajte selektory CSS oddelené čiarkou. Príklady:
článok, .sqs-block-content, .blog-item-content, #stránka – prečítajte si tieto prvky.
clanok,sekcia,#moje_id,.moja_trieda — viacero cieľov v jednom poli.
rodičovská_trieda — prečítať rodičovský obal pripojenia (užitočné pre blok kódu umiestnený vo vnútri textovej sekcie).
self_class – prečítajte si ten istý obal, v ktorom je držiak umiestnený.
Ak používate, nechajte prázdne Text obsahu namiesto toho (pevný text, nie obsah DOM).
RE
Render Element
definuje kde je vložené používateľské rozhranie hráčaMusí sa zhodovať so skutočným prvkom na stránke.
Pre vlastné HTML pripojenia nastavte triedu pripojenia: .gsp_full_player, .gsp_button_player, Alebo .gsp_circle_player.
Môžete tiež zacieliť na kontajnery rozloženia, ako napríklad telo, #stránka, Alebo .blog-item-content keď nepoužívate určený držiak.
Ak je Výber obsahu správny, ale nič sa nezobrazuje, prvok vykreslenia je zvyčajne nesprávny alebo na danej stránke chýba.
RP
Poloha vykreslenia
Umiestni hráča Predtým or Po obsah prvku Render. Pre vyhradený div pripojenia funguje After/Before zvyčajne stále vzhľadom na daný uzol – pripojenie nechajte prázdne a nechajte ho vyplniť widgetom.
EX
Vylúčiť zoznam
Selektory, ktoré musia nie budú vyslovené, aj keď sa nachádzajú vo Výbere obsahu. To isté # / . pravidlá, oddelené čiarkou. Príklad: #comments,.sidebar,.ads,.no-speech.
TT
Výber názvu / Text názvu
Výber titulov — dynamický názov zo stránky (príklad: h1).
Text nadpisu — opravený názov zobrazený v prehrávači. Pri použití textu názvu nechajte výber názvu prázdny.
CT
Text obsahu
Voliteľný fixný text rozprávania. Pri použití môže Selektor obsahu zostať prázdny. Užitočné pre krátke úvody kurzov alebo súhrny portfólia, keď by obsah DOM nemal byť zdrojom zvuku.
Základné pravidlo pre Squarespace: Ciele výberu obsahu .blog-item-content or .sqs-block-content, Render Element cieli na pripojenie bloku kódu a Exclude List preskakuje komentáre a zdieľané pásy.
Príklady
Praktické príklady mapovania pre blogy a portfóliá Squarespace
Príklad A
Prípadová štúdia portfólia s prehrávačom na celú stránku
Stránka prípadovej štúdie s obsahom tela a pripojením bloku kódu pod hlavným prvkom:
Výber obsahu - .blog-item-content (alebo textový obal vašej prípadovej štúdie)
Render Element - .gsp_full_player
Vylúčiť zoznam - .share-buttons,.related-posts (Voliteľne)
Výber titulov - h1 (Voliteľne)
Príklad B
Stránka kurzu — Blok kódu vo vnútri obsahu (parent_class)
Ak sa pripojenie bloku kódu nachádza vo vnútri sekcie lekcie kurzu, Selektor obsahu môže byť relatívny:
Výber obsahu - parent_class (číta rodičovský názov mountu)
Render Element - .gsp_full_player
Použitie self_class keď samotný obal pripojenia obsahuje text, ktorý má byť prečítaný.
Príklad C
Príspevky na blogu pre tvorcov s miniaplikáciou One Button
Miesto .gsp_button_player na mnohých blogových príspevkoch. Widget One Button Player s prvkom Render .gsp_button_player môže ich všetky poháňať. Pridajte ďalšie widgety iba vtedy, keď sa pravidlá pre hlas, dizajn alebo URL musia líšiť pre stránky kurzov a portfólia.
Miniaplikácie
Vytvorte zvukové widgety pre tvorcov v aplikácii Squarespace
Publikovať a počúvať — nastavte Stav na Publikované, obnovte aktívnu stránku Squarespace, otestujte prehrávanie.
Keď sa zmení text blogu alebo portfólia, funkcia Smart Audio Sync dokáže na pozadí regenerovať rozprávanie. Mapovacie polia stále rozhodujú. ktorý text a kde hráč žije.
Často kladené otázky
Často kladené otázky: Prevod textu na reč v priestore Squarespace a vkladanie kódu
Podporuje Squarespace prevod textu na reč a hlasy s umelou inteligenciou pomocou GSpeech?
Áno. GSpeech dodáva Štvorcový priestor pre prevod textu na reč s prirodzenými hlasmi umelej inteligencie pre blogy, stránky kurzov a portfóliá. Pripojíte sa pomocou Code Injection, umiestnite hráčov pomocou Code Block a všetko spravujete v cloudovej konzole – nie sú potrebné žiadne API kľúče.
Ako pridám prehrávač s vstrekovaním kódu a blokom kódu?
Skopírujte kód pripojenia z Integrácie → Squarespace / Html webová stránka. Vložte ho tam Nastavenia → Rozšírené → Vkladanie kódu (Päta) pred Na každú stránku, ktorá potrebuje zvuk, pridajte Kódový blok s držiakom ako napr. <div class="gsp_full_player"></div> a nastavte Render Element na túto triedu.
Čo je to selektor obsahu vs. element vykreslenia na Squarespace?
Výber obsahu vyberá, ktorý HTML kód Squarespace sa má prerozprávať – napríklad .blog-item-content or .sqs-block-content. Render Element vyberá, kde sa prehrávač zobrazí – zvyčajne vaša trieda pripojenia Code Block. Nesprávny text znamená opravu výberu obsahu; chýbajúci prehrávač znamená opravu prvku vykreslenia.
Spomalí zvuk GSpeech moju stránku Squarespace?
Nie. Zvuk sa generuje a ukladá do vyrovnávacej pamäte GSpeech cloud, nie na Squarespace. Skript Footer Code Injection je ľahký a prehrávače sa načítavajú iba tam, kde pridáte bloky kódu. Blogy a stránky portfólia si zachovávajú normálny výkon, zatiaľ čo návštevníci počúvajú na požiadanie.
Potrebujem kľúče API na pridanie hlasu AI do Squarespace?
Nie. GSpeech is Nie sú potrebné žiadne kľúče API pre Squarespace. Prihláste sa do cloudovej konzoly, pridajte vkladanie kódu, nakonfigurujte widgety a publikujte. Hlasy a prehrávače zostanú v jednom účte bez kľúčov pre prevod textu na reč od tretích strán na vašej stránke.
Pomoc
Potrebujete pomôcť s nájdením selektorov pre rozloženie Squarespace alebo vloženie kódu Code Injection?
Kontaktujte podporu GSpeechPošlite URL adresu stránky a my vám pomôžeme namapovať prvok výberu obsahu / vykreslenia.
