Konversi teks ke ucapan Squarespace — Suara AI melalui Injeksi Kode
Para kreator, pelatih, dan pemilik portofolio dapat menambahkan suara AI ke Squarespace dengan GSpeech. Menyampaikan narasi alami pada blog, halaman kursus, dan studi kasus sementara audio dihasilkan di dalam GSpeech Konsol Awan - Tidak memerlukan Kunci API, dan tidak ada beban TTS pada hosting Squarespace.
Panduan ini menunjukkan Injeksi Kode Squarespace TTS: tempel kode sematan di Injeksi Kode Footer sebelumnya , tempatkan pemain Halaman Penuh / Tombol / Lingkaran dengan Blok Kode, lalu petakan Pemilih Konten ke Elemen Render sehingga pemain membaca teks blog atau portofolio yang tepat.
Injeksi Kode + Blok Kode — Penyematan footer di seluruh situs ditambah pemasangan HTML Kustom per halaman.
Generasi Audio Awan — Sintesis sekali, simpan dalam cache, dan putar ulang di berbagai kunjungan.
Tidak memerlukan Kunci API — suara dan pemain dari satu konsol.
Widget siap pakai untuk kreator — blog, kursus, dan studi kasus portofolio dengan desain terpisah.
Terbaik untuk: Blog Squarespace, halaman pelatihan dan kursus, serta studi kasus portofolio di mana pengunjung harus mendengarkan teks panjang tanpa meninggalkan halaman.
Buat situs web — jika Anda belum menambahkan situs, ikuti langkah-langkah berikut. buat situs web.
Buka situsnya — pergi ke milikmu dasbor lalu pilih situs Squarespace.
Salin kode koneksi - membuka Integrasi → Squarespace / Situs Web HTML lalu salin kode koneksinya.
Tempel sebelum — masukkan kode melalui Pengaturan → Lanjutan → Injeksi Kode (Catatan kaki) sebelum penutup Beri tag, lalu simpan dan publikasikan.
Kode koneksi sedang dimuat. GSpeech di setiap halaman tempat widget tersebut berada. Pemain hanya muncul di tempat Anda menempatkan mount dengan Code Block / Embed / Custom HTML dan hanya ketika widget yang sesuai telah dipublikasikan dan dikonfigurasi.
Model pemetaan
Injeksi Kode, Blok Kode, dan Pemetaan Konten
Di Squarespace, Footer Code Injection memuat mesinnya sekali. Setiap widget kemudian memetakan blok blog, bagian kursus, atau salinan portofolio ke pemasangan Blok Kode — tanpa menyertakan audio ke setiap tata letak halaman:
1Kode koneksi
Memuat mesin dari Injeksi Kode Footer. Tanpa itu, dudukan Blok Kode tetap kosong.
2Widget khusus
Konfigurasi dasbor: suara, bahasa, desain, pengaturan konten, aturan URL untuk blog vs portofolio.
3Pasang / Blok Kode
Penanda di halaman (misalnya) .gsp_full_player) tempat UI pemain muncul.
4Pemetaan konten
Pemilih Konten = Teks Squarespace apa yang harus dibaca. Elemen Render = tempat pemain muncul. Kecualikan / Judul / URL mempersempit pencocokan.
Widget tidak terbatas — widget Halaman Penuh, Tombol, atau Lingkaran terpisah untuk blog, kursus, dan tata letak portofolio.
Jumlah pemain tak terbatas per widget. — satu widget yang dipublikasikan dapat mendukung setiap pemasangan Blok Kode yang sesuai yang diizinkan oleh aturan Render Element + URL.
Blok Kode / HTML Kustom — di Squarespace, dudukan tersebut terlihat seperti ini <div class="gsp_full_player"></div>Di WordPress, ide yang sama menggunakan shortcode seperti... [gspeech].
Pengaturan default vs pengaturan lanjutan — Pemasangan default bekerja dengan cepat. Bagian kustom memerlukan nilai Pemilih Konten / Elemen Render yang tepat.
Pemain
Tambahkan pemain dengan Blok Kode / HTML Kustom
Tempatkan salah satu mount ini di tempat pemain seharusnya muncul di halaman (Blok Kode / Sematkan / HTML Kustom). Klik kartu untuk menyalinnya. Kemudian atur widgetnya. Elemen Render ke kelas yang sama.
Memetakan blok Squarespace dan teks blog ke pemutar.
Di dalam widget Konten Klik tab, arahkan pemilih ke item blog Squarespace, konten blok, dan bagian portofolio yang ingin didengar pengunjung — lalu tempatkan pemutar dengan dudukan Code Block.
id → # / kelas → . — salin dari Inspect; tuliskan dengan tanda pagar atau titik di konsol.
Kumpulkan potongan-potongan — Pemilih Konten menerima beberapa target, dipisahkan oleh koma.
Potong potongan — Daftar pengecualian menggunakan awalan + koma yang sama.
Mendefinisikan teks apa yang diucapkanGunakan selektor CSS, dipisahkan dengan koma. Contoh:
artikel, .sqs-block-content, .konten-item-blog, #halaman — bacalah elemen-elemen tersebut.
artikel,bagian,#my_id,.my_class — beberapa target dalam satu bidang.
kelas_induk — membaca pembungkus induk dari mount (berguna untuk Blok Kode yang ditempatkan di dalam bagian teks).
kelas_sendiri — bacalah pembungkus yang sama tempat dudukan itu berada.
Biarkan kosong jika Anda menggunakannya Konten Teks sebagai gantinya (teks tetap, bukan konten DOM).
RE
Elemen Render
Mendefinisikan di mana UI pemain disuntikkan. Itu harus sesuai dengan elemen nyata di halaman tersebut.
Untuk pemasangan HTML kustom, atur ke kelas pemasangan: .gsp_pemain_lengkap, .gsp_button_player, atau .gsp_circle_player.
Anda juga dapat menargetkan kontainer tata letak seperti tubuh, #halaman, atau .konten-item-blog saat Anda tidak menggunakan dudukan khusus.
Jika Content Selector sudah benar tetapi tidak ada yang muncul, Render Element biasanya salah atau hilang di halaman tersebut.
RP
Posisi Render
Menempatkan pemain Sebelum or Setelah Konten Render Element. Untuk div mount khusus, After/Before biasanya masih berfungsi relatif terhadap node tersebut — biarkan mount kosong dan biarkan widget mengisinya.
EX
Daftar Pengecualian
Selektor yang harus tidak dibicarakan, bahkan jika mereka berada di dalam Pemilih Konten. Sama saja. # / . Aturan, dipisahkan koma. Contoh: #comments,.sidebar,.ads,.no-speech.
TT
Pemilih Judul / Teks Judul
Pemilih Judul — judul dinamis dari halaman (contoh: h1).
Teks Judul — Judul tetap ditampilkan di pemutar. Biarkan Pemilih Judul kosong saat menggunakan Teks Judul.
CT
Konten Teks
Teks narasi tetap opsional. Saat digunakan, Pemilih Konten dapat dibiarkan kosong. Berguna untuk pengantar kursus singkat atau ringkasan portofolio ketika konten DOM tidak boleh menggerakkan audio.
Aturan praktis untuk Squarespace: Target Pemilih Konten .blog-item-content or .sqs-block-content, Render Element menargetkan pemasangan Code Block, dan Exclude List melewati komentar dan share strip.
contoh
Contoh praktis pemetaan untuk blog dan portofolio Squarespace
Contoh A
Studi kasus portofolio dengan Pemutar Halaman Penuh
Halaman studi kasus dengan konten isi dan pemasangan Blok Kode di bawah hero:
Pemilih Konten - .blog-item-content (atau pembungkus teks studi kasus Anda)
Elemen Render - .gsp_full_player
Daftar Pengecualian - .share-buttons,.related-posts (Opsional)
Pemilih Judul - h1 (Opsional)
Contoh B
Halaman kursus — Blok Kode di dalam konten (parent_class)
Jika pemasangan Blok Kode berada di dalam bagian pelajaran kursus, Pemilih Konten dapat bersifat relatif:
Pemilih Konten - parent_class (membaca induk dari mount)
Elemen Render - .gsp_full_player
penggunaan self_class ketika pembungkus mount itu sendiri berisi teks yang seharusnya dinarasikan.
Contoh C
Buat postingan blog dengan widget satu tombol.
Tempat .gsp_button_player di banyak postingan blog. Widget One Button Player dengan Render Element. .gsp_button_player dapat mendukung semuanya. Tambahkan lebih banyak widget hanya jika aturan suara, desain, atau URL harus berbeda untuk halaman kursus dibandingkan halaman portofolio.
Publikasikan & dengarkan — Ubah Status menjadi Diterbitkan, segarkan halaman Squarespace yang sedang aktif, uji pemutaran.
Saat teks blog atau portofolio berubah, Smart Audio Sync dapat menghasilkan narasi ulang di latar belakang. Kolom pemetaan tetap menentukan yang teks dan dimana Pemain itu masih hidup.
FAQ (Pertanyaan Umum)
Pertanyaan yang Sering Diajukan (FAQ): Konversi teks ke ucapan Squarespace dan Injeksi Kode
Apakah Squarespace mendukung text-to-speech dan suara AI dengan GSpeech?
Ya. GSpeech menambahkan Konversi teks ke suara Squarespace Dengan suara AI alami untuk blog, halaman kursus, dan portofolio. Anda terhubung dengan Code Injection, menempatkan pemain dengan Code Block, dan mengelola semuanya di Cloud Console — tanpa memerlukan kunci API.
Bagaimana cara menambahkan pemain menggunakan Code Injection dan Code Block?
Salin kode koneksi dari Integrasi → Squarespace / Situs Web HTML. Tempelkan di sini. Pengaturan → Lanjutan → Injeksi Kode (Catatan kaki) sebelum Pada setiap halaman yang membutuhkan audio, tambahkan Blok Kode dengan dudukan seperti <div class="gsp_full_player"></div> dan atur Render Element ke kelas tersebut.
Apa perbedaan antara Content Selector dan Render Element di Squarespace?
Pemilih Konten memilih HTML Squarespace mana yang akan dinarasikan — misalnya .blog-item-content or .sqs-block-content. Elemen Render Memilih di mana pemain muncul — biasanya kelas pemasangan Blok Kode Anda. Teks yang salah berarti perbaiki Pemilih Konten; pemain hilang berarti perbaiki Elemen Render.
Apakah audio GSpeech akan memperlambat situs Squarespace saya?
Tidak. Audio dihasilkan dan disimpan dalam cache di GSpeech Di cloud, bukan di Squarespace. Skrip Injeksi Kode Footer ringan, dan pemutar hanya dimuat di tempat Anda menambahkan Blok Kode. Blog dan halaman portofolio tetap berkinerja normal sementara pengunjung mendengarkan sesuai permintaan.
Apakah saya memerlukan kunci API untuk menambahkan suara AI ke Squarespace?
Nomor GSpeech is Tidak memerlukan Kunci API untuk Squarespace. Masuk ke Cloud Console, tambahkan Injeksi Kode, konfigurasikan widget, dan publikasikan. Suara dan pemutar tetap berada dalam satu akun tanpa kunci TTS pihak ketiga di situs Anda.
Bantuan
Butuh bantuan mencari selektor untuk tata letak Squarespace atau penyematan Code Injection?
Hubungi dukungan GSpeechKirimkan URL halaman dan kami akan membantu memetakan Pemilih Konten / Elemen Render.
