Текст у мовлення в квадратному просторі — впровадження коду
Інтеграція Squarespace
Текст у форматі Squarespace для перетворення мовлення — голос ШІ через впровадження коду
Творці, коучі та власники портфоліо можуть додайте голос штучного інтелекту до Squarespace з GSpeechЗабезпечуйте природне оповідання в блогах, на сторінках курсів та в тематичних дослідженнях, поки аудіо генерується в GSpeech Хмарна консоль - Ключі API не потрібніі без навантаження синтезу мовлення на хостингу Squarespace.
Цей посібник показує Впровадження коду в квадратний простір TTSвставте вбудований код у Футер-код-ін'єкцію перед , розмістіть гравців на всю сторінку / кнопку / коло за допомогою Код блоку, а потім карта Вибір вмісту та Елемент візуалізації щоб гравець читав потрібний текст блогу чи портфоліо.
Впровадження коду + блокування коду — вбудовування футера на весь сайт плюс монтування користувацького HTML для кожної сторінки.
Генерація хмарного аудіо — синтезувати один раз, кешувати та відтворювати протягом усіх відвідувань.
Ключі API не потрібні — голоси та гравці з однієї консолі.
Віджети, готові для творців — блоги, курси та портфоліо з окремими дизайнами.
Найкраще для: Блоги Squarespace, сторінки коучингу та курсів, а також тематичні дослідження портфоліо, де відвідувачі повинні слухати довгий текст, не залишаючи сторінку.
Створіть веб-сайт — якщо ви ще не додали сайт, перейдіть за посиланням створити веб-сайт.
Відкрийте сайт — йти до свого приладова панель та виберіть сайт Squarespace.
Скопіюйте код підключення - ВІДЧИНЕНО Інтеграції → Squarespace / Вебсайт Html та скопіюйте код підключення.
Вставити перед — вставити код через Налаштування → Додатково → Впровадження коду (Нижній колонтитул) перед закриттям позначте тегом, а потім збережіть та опублікуйте.
Код підключення завантажується GSpeech на кожній сторінці, де він присутній. Гравці відображаються лише там, де ви розміщуєте монтування за допомогою блоку коду / вбудовування / користувацького 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].
За замовчуванням проти розширених налаштувань — монтування за замовчуванням працює швидко. Для користувацьких розділів потрібні точні значення Виборника вмісту / Елемента рендерингу.
Гравці
Додайте гравців за допомогою блоку коду / користувацького HTML
Розмістіть будь-яке з цих кріплень там, де має з'явитися гравець на сторінці (Блок коду / Вбудувати / Користувацький HTML). Клацніть картку, щоб скопіювати її. Потім встановіть віджет. Елемент візуалізації до того ж класу.
Зіставлення блоків Squarespace та тексту блогу з гравцем
У віджеті зміст Натисніть Tab, вкажіть селектори на елементи блогу Squarespace, блоковий контент і розділи портфоліо, які мають почути відвідувачі, а потім розмістіть плеєр із кріпленням Code Block.
ідентифікатор → # / клас → . — скопіювати з Inspect; записати їх через решітку або крапку в консолі.
Зберіть шматочки — Селектор вмісту приймає кілька цілей, розділених комами.
Обрізати шматочки — Список виключень використовує ті самі префікси + коми.
Визначає який текст озвученоВикористовуйте селектори CSS, розділені комами. Приклади:
стаття, .sqs-block-content, .blog-item-content, #сторінка — прочитайте ці елементи.
article,section,#my_id,.my_class — кілька цілей в одному полі.
батьківський_клас — зчитує батьківську обгортку монтування (корисно для блоку коду, розміщеного всередині текстової секції).
self_class — читайте на тій самій обгортці, в якій знаходиться монтування.
Залиште порожнім, якщо використовуєте Зміст Текст натомість (фіксований текст, а не вміст DOM).
RE
Елемент візуалізації
Визначає куди вводиться інтерфейс гравцяВін має відповідати реальному елементу на сторінці.
Для монтування користувацького HTML встановіть для нього клас монтування: .gsp_full_player, .gsp_button_playerабо .gsp_circle_player.
Ви також можете орієнтуватися на контейнери макета, такі як тіло, #сторінкаабо .blog-item-content коли ви не використовуєте спеціальне кріплення.
Якщо селектор вмісту правильний, але нічого не відображається, елемент візуалізації зазвичай неправильний або відсутній на цій сторінці.
RP
Позиція візуалізації
Розміщує гравця Перш ніж or після вміст елемента Render. Для виділеного 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
Приклад A
Тематичне дослідження портфоліо з повносторінковим програвачем
Сторінка тематичного дослідження з основним вмістом та монтуванням блоку коду під героєм:
Вибір вмісту - .blog-item-content (або текстова оболонка вашого тематичного дослідження)
Елемент візуалізації - .gsp_full_player
Список виключень - .share-buttons,.related-posts (За бажанням)
Вибір заголовка - h1 (За бажанням)
Приклад B
Сторінка курсу — Блок коду всередині контенту (parent_class)
Якщо монтування блоку коду знаходиться всередині розділу уроку курсу, вибір вмісту може бути відносним:
Вибір вмісту - parent_class (читає батьківський елемент монтування)
Елемент візуалізації - .gsp_full_player
Скористайтеся кнопкою self_class коли сама обгортка монтування містить текст, який має бути озвучений.
Приклад С
Дописи в блозі авторів з віджетом One Button
місце .gsp_button_player у багатьох публікаціях блогу. Віджет One Button Player з елементом Render .gsp_button_player може забезпечити їх усі. Додавайте більше віджетів лише тоді, коли правила голосу, дизайну або URL-адрес мають відрізнятися для курсів і сторінок портфоліо.
Опублікувати та прослухати — встановити статус на Опубліковано, оновити сторінку Squarespace, протестувати відтворення.
Коли текст блогу чи портфоліо змінюється, Smart Audio Sync може відновлювати озвучування у фоновому режимі. Поля зіставлення все ще вирішують який текст і де гравець живе.
FAQ
Найчастіші запитання: Перетворення тексту на мову в квадратному просторі та впровадження коду
Чи підтримує Squarespace перетворення тексту в мовлення та голоси штучного інтелекту за допомогою GSpeech?
Так. GSpeech додає Текст у форматі квадратного простору для перетворення мовлення із природними голосами штучного інтелекту для блогів, сторінок курсів та портфоліо. Ви підключаєтеся за допомогою Code Injection, розміщуєте гравців за допомогою Code Block та керуєте всім у хмарній консолі — ключі API не потрібні.
Як додати гравця за допомогою впровадження коду та блокування коду?
Скопіюйте код підключення з розділу Інтеграції → Squarespace / Вебсайт Html. Вставте його Налаштування → Додатково → Впровадження коду (Нижній колонтитул) перед На кожній сторінці, де потрібен аудіофайл, додайте Код блоку з кріпленням, таким як <div class="gsp_full_player"></div> і встановіть Render Element на цей клас.
Що таке селектор контенту проти елемента рендерингу на Squarespace?
Вибір вмісту вибирає, який HTML-код Squarespace використовувати для озвучування — наприклад .blog-item-content or .sqs-block-content. Елемент візуалізації вибирає, де з’явиться гравець — зазвичай це клас монтування вашого блоку коду. Неправильний текст означає виправлення селектора вмісту; відсутній гравець означає виправлення елемента рендерингу.
Чи уповільнить аудіо GSpeech роботу мого сайту Squarespace?
Ні. Аудіо генерується та кешується в GSpeech хмара, а не Squarespace. Скрипт вставки коду футера є легким, і програвачі завантажуються лише там, де ви додаєте блоки коду. Блоги та сторінки портфоліо зберігають нормальну продуктивність, поки відвідувачі слухають за запитом.
Чи потрібні мені ключі API, щоб додати голос ШІ до Squarespace?
Ні. GSpeech is Ключі API не потрібні для Squarespace. Увійдіть у хмарну консоль, додайте впровадження коду, налаштуйте віджети та опублікуйте. Голоси та програвачі залишаються в одному обліковому записі без сторонніх ключів синтезу мовлення на вашому сайті.
Документи
Потрібна допомога з пошуком селекторів для макета Squarespace або вбудовування Code Injection?
Зверніться до служби підтримки GSpeechНадішліть URL-адресу сторінки, і ми допоможемо зіставити елемент вибору контенту / рендерингу.
