Sintesi vocale di Squarespace: voce AI tramite iniezione di codice
Creatori, coach e proprietari di portfolio possono Aggiungi la voce AI a Squarespace con GSpeech. Fornisci una narrazione naturale su blog, pagine di corsi e casi di studio mentre l'audio viene generato nel GSpeech Console Cloud - Non sono necessarie chiavi API.e nessun carico TTS sull'hosting Squarespace.
Questa guida mostra Iniezione di codice Squarespace TTS: incolla l'incorporamento in Footer Code Injection prima , posiziona i giocatori di Pagina intera / Pulsante / Cerchio con un Code Block, quindi mappa Selettore di contenuti and Elemento di rendering in modo che il giocatore legga il blog o il testo del portfolio giusto.
Iniezione di codice + Blocco di codice — incorporamento nel piè di pagina dell'intero sito più montaggi HTML personalizzati per ogni pagina.
Generazione audio cloud — sintetizza una volta, memorizza nella cache e riproduci durante le visite.
Non sono necessarie chiavi API. — voci e giocatori da un'unica console.
Widget pronti per i creatori — blog, corsi e casi di studio per portfolio con design separati.
Ideale per: Blog, pagine di coaching e corsi, e case study di portfolio su Squarespace, dove i visitatori possono ascoltare contenuti audio di lunga durata senza abbandonare la pagina.
Crea un sito Web — se non hai ancora aggiunto un sito, segui creare un sito web.
Apri il sito — vai al tuo cruscotto e selezionare il sito Squarespace.
Copia il codice di connessione - aprire Integrazioni → Squarespace / Sito web HTML e copiare il codice di connessione.
Incollare prima — inserire il codice tramite Impostazioni → Avanzate → Iniezione di codice (Piè di pagina) prima della chiusura Aggiungi il tag, quindi salva e pubblica.
Il codice di connessione viene caricato GSpeech su ogni pagina in cui è presente. I player vengono visualizzati solo dove si inseriscono i mount con un blocco di codice / incorporamento / HTML personalizzato e solo quando il widget corrispondente è pubblicato e configurato.
Modello di mappatura
Iniezione di codice, blocchi di codice e mappatura dei contenuti
Su Squarespace, Footer Code Injection carica il motore una sola volta. Ogni widget mappa quindi i blocchi del blog, le sezioni del corso o il testo del portfolio a un blocco di codice, senza dover incorporare l'audio in ogni layout di pagina:
1Codice di connessione
Carica il motore da Footer Code Injection. Senza di esso, i punti di montaggio del blocco di codice rimangono vuoti.
2Widget personalizzato
Configurazione del pannello di controllo: voce, lingua, design, impostazioni dei contenuti, regole URL per blog e portfolio.
3Blocco di montaggio/codice
Un indicatore nella pagina (ad esempio .gsp_full_player) dove appare l'interfaccia utente del giocatore.
4Mappatura dei contenuti
Selettore di contenuti = quale testo di Squarespace leggere. Elemento di rendering = dove appare il giocatore. Escludi / Titolo / URL affina la corrispondenza.
Widget illimitati — Widget separati per pagina intera, pulsante o cerchio per blog, corsi e layout di portfolio.
Giocatori illimitati per widget — un widget pubblicato può alimentare ogni montaggio di blocco di codice corrispondente consentito dalle regole Elemento di rendering + URL.
Blocco di codice / HTML personalizzato — su Squarespace il montaggio appare così <div class="gsp_full_player"></div>Su WordPress la stessa idea utilizza shortcode come [gspeech].
Impostazioni predefinite vs impostazioni avanzate — I montaggi predefiniti funzionano rapidamente. Le sezioni personalizzate richiedono valori precisi per il selettore di contenuti e l'elemento di rendering.
Giocatori
Aggiungi giocatori con blocco di codice / HTML personalizzato
Posiziona uno di questi supporti dove il giocatore dovrebbe apparire sulla pagina (Blocco di codice / Incorpora / HTML personalizzato). Fai clic su una scheda per copiarla. Quindi imposta il widget Elemento di rendering alla stessa classe.
Mappa i blocchi di Squarespace e il testo del blog sul lettore
Nel widget Contenuti scheda, punta i selettori sugli elementi del blog Squarespace, sul contenuto dei blocchi e sulle sezioni del portfolio che i visitatori dovrebbero ascoltare, quindi posiziona il lettore con un supporto Code Block.
ID → # / classe → . — copiali da Inspect; scrivili con un cancelletto o un punto nella console.
Raccogli i pezzi — Il selettore di contenuti accetta più destinazioni, separate da virgole.
Tagliare i pezzi — L'elenco di esclusione utilizza gli stessi prefissi + virgole.
definisce quale testo viene pronunciatoUtilizzare i selettori CSS, separati da virgole. Esempi:
articolo, .sqs-block-content, .blog-item-content, #pagina — leggi questi elementi.
articolo,sezione,#mio_id,.mia_classe — bersagli multipli in un unico campo.
classe_genitore — leggere il contenitore padre del mount (utile per un blocco di codice inserito all'interno di una sezione di testo).
self_class — leggi la stessa confezione in cui è avvolto il supporto.
Lascia vuoto se usi Contenuto del testo invece (testo fisso, non contenuto DOM).
RE
Elemento di rendering
definisce dove viene iniettata l'interfaccia utente del giocatoreDeve corrispondere a un elemento reale presente sulla pagina.
Per i mount HTML personalizzati, impostalo sulla classe di mount: .gsp_full_player, .gsp_button_player, o .gsp_circle_player.
È possibile anche selezionare contenitori di layout come stile di vita, #pagina, o .blog-item-content quando non si utilizza una montatura dedicata.
Se il selettore dei contenuti è corretto ma non appare nulla, di solito l'elemento di rendering è errato o mancante in quella pagina.
RP
Posizione del rendering
Posiziona il giocatore Before or Dopo il contenuto dell'elemento Render. Per un div di montaggio dedicato, After/Before di solito funziona ancora rispetto a quel nodo: mantieni vuoto il mount e lascia che il widget lo riempia.
EX
Escludi elenco
Selettori che devono non è un essere pronunciati, anche se si trovano all'interno del Selettore di contenuti. Lo stesso # / . regole, separate da virgole. Esempio: #comments,.sidebar,.ads,.no-speech.
TT
Selettore del titolo / Testo del titolo
Selettore del titolo — titolo dinamico dalla pagina (esempio: h1).
Titolo del testo — Titolo fisso visualizzato nel lettore. Lascia vuoto il Selettore titolo quando usi il Testo titolo.
CT
Contenuto del testo
Testo di narrazione fisso opzionale. Se utilizzato, il Selettore di contenuti può rimanere vuoto. Utile per brevi introduzioni a corsi o riepiloghi di portfolio quando il contenuto del DOM non deve controllare l'audio.
Regola generale per Squarespace: Il selettore di contenuti si rivolge a .blog-item-content or .sqs-block-content, Render Element seleziona il punto di montaggio del blocco di codice e Exclude List ignora i commenti e le strisce di condivisione.
Esempi
Esempi pratici di mappatura per blog e portfolio Squarespace
Esempio A
Caso di studio di portfolio con lettore a pagina intera
Una pagina di case study con contenuto principale e un blocco di codice posizionato sotto l'elemento principale:
Pagina del corso — Blocco di codice all'interno del contenuto (parent_class)
Se il blocco di codice si trova all'interno di una sezione di una lezione del corso, il selettore di contenuti può essere relativo:
Selettore di contenuti - parent_class (legge il genitore della montatura)
Elemento di rendering - .gsp_full_player
Usa il self_class quando il contenitore di montaggio stesso contiene il testo che deve essere narrato.
Esempio C
Articoli del blog del creatore con un widget Button
posto .gsp_button_player su molti post del blog. Widget del lettore con un pulsante e elemento di rendering. .gsp_button_player può alimentarli tutti. Aggiungi altri widget solo quando le regole relative a voce, design o URL devono essere diverse per i corsi rispetto alle pagine del portfolio.
Pubblica e ascolta — Imposta lo stato su Pubblicato, aggiorna la pagina Squarespace in tempo reale e verifica la riproduzione.
Quando il testo del blog o del portfolio cambia, Smart Audio Sync può rigenerare la narrazione in background. I campi di mappatura decidono comunque quale testo e where il giocatore sopravvive.
FAQ
FAQ: Sintesi vocale e iniezione di codice in Squarespace
Squarespace supporta la sintesi vocale e le voci basate sull'intelligenza artificiale con GSpeech?
Sì. Le serrature scorrevoli portatili e i catenacci a superficie possono essere usati per mettere in sicurezza una porta a scomparsa dall'esterno. Alcuni kit con catena di sicurezza consentono anche il bloccaggio esterno con chiave o manopola girevole. GSpeech aggiunge Sintesi vocale di Squarespace Con voci AI naturali per blog, pagine di corsi e portfolio. Ti connetti tramite Code Injection, assegni i player a un blocco di codice e gestisci tutto nella console cloud, senza bisogno di chiavi API.
Come faccio ad aggiungere il giocatore con Code Injection e un blocco di codice?
Copia il codice di connessione da Integrazioni → Sito web Squarespace / HTML. Incollalo in Impostazioni → Avanzate → Iniezione di codice (Piè di pagina) prima . Su ogni pagina che necessita di audio, aggiungi un Code Block con un supporto come <div class="gsp_full_player"></div> e imposta Render Element su quella classe.
Che differenza c'è tra Content Selector e Render Element su Squarespace?
Selettore di contenuti sceglie quale codice HTML di Squarespace narrare, ad esempio .blog-item-content or .sqs-block-content. Elemento di rendering Sceglie dove appare il giocatore, solitamente la classe di montaggio del blocco di codice. Un testo errato significa correggere il selettore di contenuti; un giocatore mancante significa correggere l'elemento di rendering.
L'audio GSpeech rallenterà il mio sito Squarespace?
No. L'audio viene generato e memorizzato nella cache GSpeech cloud, non su Squarespace. Lo script Footer Code Injection è leggero e i player vengono caricati solo dove aggiungi i blocchi di codice. Blog e pagine portfolio mantengono prestazioni normali mentre i visitatori ascoltano su richiesta.
Ho bisogno di chiavi API per aggiungere la voce AI a Squarespace?
No. GSpeech is Non sono necessarie chiavi API. Per Squarespace. Accedi alla Cloud Console, aggiungi l'iniezione di codice, configura i widget e pubblica. Voci e lettori rimangono in un unico account, senza bisogno di chiavi TTS di terze parti sul tuo sito.
Aiuto
Hai bisogno di aiuto per trovare i selettori per un layout Squarespace o per l'incorporamento di codice?
Contatta l'assistenza di GSpeechInviaci l'URL della pagina e ti aiuteremo a mappare il selettore di contenuti/elemento di rendering.
