Текст в реч в квадратно пространство — инжектиране на код
Squarespace интеграция
Текст в реч в квадратно пространство — глас с изкуствен интелект чрез инжектиране на код
Създатели, треньори и собственици на портфолио могат добавете AI глас към Squarespace с GSpeechОсигурете естествено разказване в блогове, страници на курсове и казуси, докато аудиото се генерира в GSpeech Конзола за облак - Не се изискват API ключовеи без зареждане на TTS на хостинга на Squarespace.
Това ръководство показва Инжектиране на код в Squarespace TTSпоставете вградения код във футъра преди инжектирането му , поставете играчи на цяла страница / бутон / кръг с Блок код, след това карта Селектор на съдържание намлява Рендиране на елемент така че играчът чете правилния текст за блога или портфолиото.
Инжектиране на код + Блокиране на код — вграждане на футър в целия сайт плюс монтиране на персонализиран HTML код за всяка страница.
Генериране на облачно аудио — синтезира се веднъж, кешира се и се възпроизвежда отново при посещения.
Не се изискват API ключове — гласове и играчи от една конзола.
Джаджи, готови за създатели — блогове, курсове и казуси от портфолио с отделни дизайни.
Най-доброто за: Блогове на Squarespace, страници за коучинг и курсове, както и казуси от портфолио, където посетителите трябва да слушат дълги текстове, без да напускат страницата.
Създайте уебсайт — ако все още не сте добавили сайт, последвайте го създайте уебсайт.
Отворете сайта — отидете при вас табло и изберете сайта Squarespace.
Копирайте кода за връзка — отворено Интеграции → Squarespace / Html уебсайт и копирайте кода за връзка.
Постави преди — въведете кода чрез Настройки → Разширени → Инжектиране на код (Долен колонтитул) преди затварянето маркирайте, след което запазете и публикувайте.
Кодът за връзка се зарежда GSpeech на всяка страница, където е налично. Плейърите се появяват само там, където поставяте елементи за монтиране с Code Block / Embed / Custom HTML и само когато съответстващият уиджет е публикуван и конфигуриран.
Модел на картографиране
Инжектиране на код, блокове код и картографиране на съдържание
В Squarespace, инжектирането на код на долния колонтитул зарежда двигателя веднъж. След това всеки уиджет картографира блокове от блога, секции от курса или копие от портфолиото към монтиран блок от код — без да се вгражда аудио във всяко оформление на страницата:
1Код за връзка
Зарежда двигателя от инжектирането на код във футъра. Без него, монтираните блокове на кода остават празни.
2Персонализирана джаджа
Конфигурация на таблото за управление: глас, език, дизайн, настройки на съдържанието, URL правила за блогове спрямо портфолиа.
3Монтиране / Блок на код
Маркер на страницата (например .gsp_full_player) където се появява потребителският интерфейс на плейъра.
4Картографиране на съдържание
Селектор на съдържание = какъв текст в Squarespace да се прочете. Рендиране на елемент = къде се появява играчът. Изключване / Заглавие / URL адреси прецизират съвпадението.
Неограничени джаджи — отделни джаджи „Цяла страница“, „Бутон“ или „Кръг“ за блогове, курсове и оформления на портфолио.
Неограничен брой играчи на джаджа — един публикуван уиджет може да захранва всяко съответстващо монтиране на блокове от код, разрешено от правилата за Render Element + URL.
Блок код / Персонализиран HTML — в Squarespace монтировката изглежда така <div class="gsp_full_player"></div>В WordPress същата идея използва кратки кодове като [gspeech].
Настройки по подразбиране срещу разширени настройки — монтираните по подразбиране елементи работят бързо. Персонализираните секции изискват точни стойности за селектор на съдържание / елемент за рендериране.
Играчите
Добавете играчи с Code Block / Custom HTML
Поставете някое от тези места на страницата, където трябва да се появи плейърът (Блок с код / Вграждане / Персонализиран HTML). Кликнете върху карта, за да я копирате. След това задайте уиджета. Рендиране на елемент към същия клас.
Картографирайте блокове и текст на блога в Squarespace към плейъра
В уиджета съдържание Натиснете Tab, селекторите насочват към елементите в блога на Squarespace, блоковото съдържание и секциите на портфолиото, които посетителите трябва да чуят — след това поставете плейъра с монтиране на Code Block.
идентификатор → # / клас → . — копирайте от Inspect; запишете ги с диез или точка в конзолата.
Съберете парчета — Селекторът на съдържание приема няколко цели, разделени със запетая.
Подстригване на парчета — Списъкът за изключване използва същите префикси + запетаи.
Определя какъв текст се произнасяИзползвайте CSS селектори, разделени със запетаи. Примери:
статията, .sqs-block-content, .blog-item-content, #страница — прочетете тези елементи.
статия,раздел,#my_id,.my_class — множество цели в едно поле.
родителски_клас — прочете родителската обвивка на монтираното състояние (полезно за блок с код, поставен в текстова секция).
себе_клас — прочетете същата обвивка, в която се намира монтировката.
Оставете празно, ако използвате Съдържание Текст вместо това (фиксиран текст, а не DOM съдържание).
RE
Рендиране на елемент
Определя където е инжектиран потребителският интерфейс на играчаТрябва да съвпада с реален елемент на страницата.
За персонализирани HTML монтирания, задайте го на класа за монтиране: .gsp_пълен_плейър, .gsp_button_player или .gsp_circle_player.
Можете също така да насочвате контейнери за оформление, като например тяло, #страница или .blog-item-content когато не използвате специално монтиране.
Ако „Селектор на съдържание“ е правилен, но нищо не се показва, „Елементът за рендиране“ обикновено е грешен или липсва на тази страница.
RP
Позиция на изобразяване
Поставя играча Преди or След съдържанието на Render Element. За специален div за монтиране, After/Before обикновено все още работи спрямо този възел — дръжте монтирането празно и оставете уиджета да го запълни.
EX
Списък за изключване
Селектори, които трябва не да бъдат изговорени, дори ако се намират в селектора на съдържание. Същото # / . правила, разделени със запетаи. Пример: #comments,.sidebar,.ads,.no-speech.
TT
Селектор на заглавия / Текст на заглавието
Селектор на заглавие — динамично заглавие от страницата (пример: h1).
Заглавен текст — фиксирано заглавие, показвано в плейъра. Оставете селектора на заглавие празен, когато използвате текст на заглавието.
CT
Съдържание Текст
Незадължителен фиксиран текст на разказване. Когато се използва, селекторът на съдържание може да остане празен. Полезен е за кратки въведения в курсове или резюмета на портфолио, когато DOM съдържанието не трябва да задвижва аудио.
Емпирично правило за Squarespace: Цели на селектора на съдържание .blog-item-content or .sqs-block-content, Render Element е насочен към монтирания Code Block, а Exclude List пропуска коментари и споделя ленти.
Примери
Практически примери за картографиране за блогове и портфолиа на Squarespace
Пример А
Казус за портфолио с плейър за цяла страница
Страница с казус, съдържаща съдържание на тялото и монтиран блок с код под героя:
Селектор на съдържание - .blog-item-content (или текстът на вашия казус)
Рендиране на елемент - .gsp_full_player
Списък за изключване - .share-buttons,.related-posts (незадължително поле)
Селектор на заглавие - h1 (незадължително поле)
Пример Б
Страница на курса — Блок с код вътре в съдържанието (parent_class)
Ако монтираният кодов блок се намира в секция от урок на курс, селекторът на съдържание може да бъде относителен:
Селектор на съдържание - parent_class (чете родителя на планината)
Рендиране на елемент - .gsp_full_player
употреба self_class когато самата обвивка на монтирането съдържа текста, който трябва да бъде разказан.
Пример В
Публикации в блога на създателите с уиджет с един бутон
Място .gsp_button_player в много публикации в блогове. Уиджет за плейър с един бутон с елемент за рендериране .gsp_button_player може да захранва всички тях. Добавяйте още джаджи само когато правилата за глас, дизайн или URL адреси трябва да се различават за курсове спрямо страници с портфолио.
Widgets
Създаване на аудио джаджи за създатели на Squarespace
Публикувай и слушай — задайте „Статус“ на „Публикувано“, обновете страницата на Squarespace на живо, тествайте възпроизвеждането.
Когато текстът в блога или портфолиото се промени, Smart Audio Sync може да регенерира разказването във фонов режим. Полетата за картографиране все още решават... който текст и където играчът живее.
Често задавани въпроси
ЧЗВ: Текст в реч в Squarespace и инжектиране на код
Поддържа ли Squarespace преобразуване на текст в реч и гласове с изкуствен интелект с GSpeech?
Да. GSpeech добавя Текст в реч с квадратно пространство с естествени AI гласове за блогове, страници на курсове и портфолиа. Свързвате се с Code Injection, поставяте играчи с Code Block и управлявате всичко в Cloud Console — не са необходими API ключове.
Как да добавя плейъра с инжектиране на код и блок с код?
Копирайте кода за връзка от Интеграции → Squarespace / Html уебсайт. Поставете го вътре Настройки → Разширени → Инжектиране на код (Долен колонтитул) преди На всяка страница, която се нуждае от аудио, добавете Блок код с монтиране като например <div class="gsp_full_player"></div> и задайте Render Element на този клас.
Какво е селектор на съдържание спрямо елемент за рендериране в Squarespace?
Селектор на съдържание избира кой HTML код на Squarespace да се разказва — например .blog-item-content or .sqs-block-content. Рендиране на елемент избира къде да се появи плейърът — обикновено вашият клас за монтиране на Code Block. Грешен текст означава поправка на Content Selector; липсващ плейър означава поправка на Render Element.
Ще забави ли звукът на GSpeech моя сайт в Squarespace?
Не. Аудиото се генерира и кешира в GSpeech облак, а не в Squarespace. Скриптът за инжектиране на код във футъра е лек и плейърите се зареждат само там, където добавяте блокове код. Блоговете и страниците с портфолио поддържат нормална производителност, докато посетителите слушат при поискване.
Необходими ли са ми API ключове, за да добавя AI глас към Squarespace?
Не. GSpeech is Не се изискват API ключове за Squarespace. Влезте в Cloud Console, добавете Code Injection, конфигурирайте джаджи и публикувайте. Гласовете и плейърите остават в един акаунт без TTS ключове на трети страни на вашия сайт.
Помогне
Нуждаете се от помощ при намирането на селектори за оформление Squarespace или вграждане на Code Injection?
Свържете се с поддръжката на GSpeechИзпратете URL адрес на страница и ние ще ви помогнем да картографирате селектора на съдържание / елемента за рендиране.
