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