Squarespace Κείμενο σε Ομιλία — Έγχυση Κώδικα

Squarespace κείμενο σε ομιλία — Φωνή με τεχνητή νοημοσύνη μέσω Code Injection

Οι δημιουργοί, οι προπονητές και οι κάτοχοι χαρτοφυλακίου μπορούν προσθήκη φωνής AI στο Squarespace μαζί σου, GSpeech. Προσφέρετε φυσική αφήγηση σε ιστολόγια, σελίδες μαθημάτων και μελέτες περιπτώσεων, ενώ παράλληλα δημιουργείται ήχος στο GSpeech Cloud Console - Δεν απαιτούνται κλειδιά APIκαι χωρίς φορτίο TTS στη φιλοξενία Squarespace.

Αυτός ο οδηγός δείχνει Έγχυση κώδικα Squarespace TTS: επικολλήστε την ενσωμάτωση στην ένεση κώδικα υποσέλιδου πριν , τοποθετήστε παίκτες Ολόκληρης Σελίδας / Κουμπιού / Κύκλου με ένα Κωδικός Blockκαι, στη συνέχεια, χάρτης Επιλογέας περιεχομένου και Στοιχείο απόδοσης έτσι ώστε ο παίκτης να διαβάζει το σωστό κείμενο ιστολογίου ή χαρτοφυλακίου.

  • Έγχυση Κώδικα + Μπλοκ Κώδικα — ενσωμάτωση υποσέλιδου σε ολόκληρο τον ιστότοπο και προσαρμοσμένες προσαρτήσεις HTML ανά σελίδα.
  • Δημιουργία ήχου στο cloud — σύνθεση μία φορά, προσωρινή αποθήκευση και επανάληψη σε όλες τις επισκέψεις.
  • Δεν απαιτούνται κλειδιά API — φωνές και παίκτες από μία κονσόλα.
  • Widgets έτοιμα για δημιουργούς — ιστολόγια, μαθήματα και μελέτες περιπτώσεων χαρτοφυλακίου με ξεχωριστά σχέδια.

Καλύτερο για: Ιστολόγια, σελίδες καθοδήγησης και μαθημάτων της Squarespace, καθώς και μελέτες περιπτώσεων χαρτοφυλακίου όπου οι επισκέπτες θα πρέπει να ακούσουν κείμενο μεγάλης διάρκειας χωρίς να φύγουν από τη σελίδα.

Επισκόπηση TTS ιστότοπου Ζωντανές επιδείξεις Άνοιγμα κονσόλας cloud

Connect GSpeech στο Squarespace

Πώς να συνδεθείτε GSpeech στο Squarespace

  • Συνδεθείτε - Συνδεθείτε στον λογαριασμό σας στο GSpeech (χρειάζεστε ένα;) δημιουργήστε έναν δωρεάν λογαριασμό).
  • Δημιουργήστε έναν ιστότοπο — αν δεν έχετε προσθέσει ακόμα έναν ιστότοπο, ακολουθήστε δημιουργήστε έναν ιστότοπο.
  • Άνοιγμα του ιστότοπου — πήγαινε στο δικό σου ταμπλό και επιλέξτε την τοποθεσία Squarespace.
  • Αντιγράψτε τον κωδικό σύνδεσης — ανοιχτό Ενσωματώσεις → Ιστότοπος Squarespace / Html και αντιγράψτε τον κωδικό σύνδεσης.
  • Επικόλληση πριν — εισαγάγετε τον κωδικό μέσω Ρυθμίσεις → Για προχωρημένους → Εισαγωγή κώδικα (Υποσέλιδο) πριν από το κλείσιμο ετικέτα, στη συνέχεια αποθηκεύστε και δημοσιεύστε.

Ο κώδικας σύνδεσης φορτώνει GSpeech σε κάθε σελίδα όπου υπάρχει. Οι παίκτες εμφανίζονται μόνο όπου τοποθετείτε mounts με Code Block / Embed / Custom HTML και μόνο όταν το αντίστοιχο widget έχει δημοσιευτεί και ρυθμιστεί.

Έγχυση κώδικα, μπλοκ κώδικα και αντιστοίχιση περιεχομένου

Στο Squarespace, το Footer Code Injection φορτώνει τη μηχανή μία φορά. Κάθε γραφικό στοιχείο αντιστοιχίζει στη συνέχεια μπλοκ ιστολογίου, ενότητες μαθημάτων ή αντίγραφο χαρτοφυλακίου σε ένα Code Block mount — χωρίς να ενσωματώνει ήχο σε κάθε διάταξη σελίδας:

1 Κωδικός σύνδεσης

Φορτώνει τη μηχανή από την ένεση κώδικα υποσέλιδου. Χωρίς αυτήν, οι προσαρτήσεις μπλοκ κώδικα παραμένουν κενές.

2 Προσαρμοσμένο widget

Διαμόρφωση πίνακα ελέγχου: φωνή, γλώσσα, σχεδιασμός, ρυθμίσεις περιεχομένου, κανόνες URL για ιστολόγια έναντι χαρτοφυλακίων.

3 Mount / Code Block

Ένας δείκτης στη σελίδα (για παράδειγμα .gsp_full_player) όπου εμφανίζεται το περιβάλλον χρήστη του παίκτη.

4 Χαρτογράφηση περιεχομένου

Επιλογέας περιεχομένου = ποιο κείμενο Squarespace να διαβάσω. Στοιχείο απόδοσης = όπου εμφανίζεται ο παίκτης. Εξαίρεση / Τίτλος / URL βελτιώνουν την αντιστοίχιση.

  • Απεριόριστα widget — ξεχωριστά γραφικά στοιχεία πλήρους σελίδας, κουμπιού ή κύκλου για ιστολόγια, μαθήματα και διατάξεις χαρτοφυλακίου.
  • Απεριόριστοι παίκτες ανά γραφικό στοιχείο — ένα δημοσιευμένο widget μπορεί να τροφοδοτήσει κάθε αντίστοιχο mount Code Block που επιτρέπεται από τους κανόνες Render Element + URL.
  • Μπλοκ κώδικα / Προσαρμοσμένη HTML — στο Squarespace η βάση μοιάζει με <div class="gsp_full_player"></div>Στο WordPress η ίδια ιδέα χρησιμοποιεί shortcodes όπως [gspeech].
  • Προεπιλογές έναντι προηγμένων ρυθμίσεων — οι προεπιλεγμένες προσαρτήσεις λειτουργούν γρήγορα. Οι προσαρμοσμένες ενότητες χρειάζονται ακριβείς τιμές Επιλογής Περιεχομένου / Στοιχείου Απόδοσης.

Προσθήκη παικτών με Code Block / Custom HTML

Τοποθετήστε οποιοδήποτε από αυτά τα mounts εκεί που θα πρέπει να εμφανίζεται ο παίκτης στη σελίδα (Code Block / Embed / Custom HTML). Κάντε κλικ σε μια κάρτα για να την αντιγράψετε. Στη συνέχεια, ορίστε το widget. Στοιχείο απόδοσης στην ίδια τάξη.

  • Πρόγραμμα αναπαραγωγής πλήρους σελίδας
    <div class="gsp_full_player"></div>
  • Παίκτης κουμπιών
    <div class="gsp_button_player"></div>
  • Παίκτης κύκλου
    <div class="gsp_circle_player"></div>

Πλήρη έγγραφα παίκτη Έγγραφα για το Button Player Έγγραφα του Circle Player

Αντιστοίχιση μπλοκ Squarespace και κειμένου ιστολογίου στον παίκτη

Στο γραφικό στοιχείο Περιεχόμενο καρτέλα, επιλογείς σημείων σε στοιχεία ιστολογίου Squarespace, περιεχόμενο μπλοκ και ενότητες χαρτοφυλακίου που θα πρέπει να ακούνε οι επισκέπτες — στη συνέχεια τοποθετήστε τη συσκευή αναπαραγωγής με μια βάση Code Block.

  • αναγνωριστικό → # / τάξη → . — αντιγράψτε από το Inspect· γράψτε τα με μια δίεση ή μια τελεία στην κονσόλα.
  • Συγκεντρώστε κομμάτια — Ο Επιλογέας Περιεχομένου δέχεται πολλούς στόχους, διαχωρισμένους με κόμμα.
  • Κόψτε κομμάτια — Η Λίστα εξαιρέσεων χρησιμοποιεί τα ίδια προθέματα + κόμματα.
  • Οδηγός για αρχάριους - Πώς να γράψετε τιμές HTML (# / .).

Επιλογέας περιεχομένου

Ορίζει ποιο κείμενο εκφωνείταιΧρησιμοποιήστε επιλογείς CSS, διαχωρισμένους με κόμμα. Παραδείγματα:

  • άρθρο, .sqs-block-content, .blog-item-content, #σελίδα — διαβάστε αυτά τα στοιχεία.
  • άρθρο, ενότητα,#my_id,.my_class — πολλαπλοί στόχοι σε ένα πεδίο.
  • parent_class — διαβάστε το γονικό περιτύλιγμα της προσάρτησης (χρήσιμο για ένα μπλοκ κώδικα που τοποθετείται μέσα σε μια ενότητα κειμένου).
  • self_class — διαβάστε το ίδιο περιτύλιγμα στο οποίο βρίσκεται η βάση.
  • Αφήστε κενό αν χρησιμοποιείτε Κείμενο περιεχομένου αντίθετα (σταθερό κείμενο, όχι περιεχόμενο DOM).

Στοιχείο απόδοσης

Ορίζει όπου εισάγεται το UI του παίκτηΠρέπει να ταιριάζει με ένα πραγματικό στοιχείο στη σελίδα.

  • Για προσαρμοσμένες προσαρτήσεις HTML, ορίστε την στην κλάση mount: .gsp_full_player, .gsp_button_playerΤο HIFU, ή Υψηλής Έντασης Εστιασμένος Υπέρηχος, στοχεύει επίσης στο πρόσωπο και τον λαιμό. Προσφέρει θεραπεία σε γρήγορες εκπομπές, γεγονός που κάνει τις συνεδρίες θεραπείας συντομότερες. .gsp_circle_player.
  • Μπορείτε επίσης να στοχεύσετε κοντέινερ διάταξης όπως Σώμα, #σελίδαΤο HIFU, ή Υψηλής Έντασης Εστιασμένος Υπέρηχος, στοχεύει επίσης στο πρόσωπο και τον λαιμό. Προσφέρει θεραπεία σε γρήγορες εκπομπές, γεγονός που κάνει τις συνεδρίες θεραπείας συντομότερες. .blog-item-content όταν δεν χρησιμοποιείτε ειδική βάση.
  • Εάν ο Επιλογέας Περιεχομένου είναι σωστός αλλά δεν εμφανίζεται τίποτα, το Στοιχείο Απόδοσης είναι συνήθως λανθασμένο ή λείπει σε αυτήν τη σελίδα.

Θέση απόδοσης

Τοποθετεί τον παίκτη Πριν or Μετά το το περιεχόμενο του στοιχείου Render. Για ένα dedicated mount div, το After/Before συνήθως εξακολουθεί να λειτουργεί σε σχέση με αυτόν τον κόμβο — διατηρήστε το mount κενό και αφήστε το widget να το γεμίσει.

Λίστα εξαιρέσεων

Επιλογείς που πρέπει δεν να εκφωνούνται, ακόμα κι αν βρίσκονται μέσα στον Επιλογέα Περιεχομένου. Το ίδιο # / . κανόνες, διαχωρισμένοι με κόμμα. Παράδειγμα: #comments,.sidebar,.ads,.no-speech.

Επιλογέας Τίτλου / Κείμενο Τίτλου

  • Επιλογέας τίτλου — δυναμικός τίτλος από τη σελίδα (παράδειγμα: h1).
  • Κείμενο κειμένου — διορθώθηκε η εμφάνιση τίτλου στη συσκευή αναπαραγωγής. Αφήστε τον Επιλογέα Τίτλου κενό όταν χρησιμοποιείτε Κείμενο Τίτλου.

Κείμενο περιεχομένου

Προαιρετικό σταθερό κείμενο αφήγησης. Όταν χρησιμοποιείται, ο Επιλογέας Περιεχομένου μπορεί να παραμείνει κενός. Χρήσιμο για σύντομες εισαγωγές μαθημάτων ή περιλήψεις χαρτοφυλακίου όταν το περιεχόμενο DOM δεν θα πρέπει να οδηγεί ήχο.

Κανόνας για το Squarespace: Στόχοι Επιλογέα Περιεχομένου .blog-item-content or .sqs-block-content, το Render Element στοχεύει στην προσάρτηση Code Block και η Exclude List παραλείπει τα σχόλια και μοιράζεται λωρίδες.

Πρακτικά παραδείγματα χαρτογράφησης για ιστολόγια και χαρτοφυλάκια Squarespace

Μελέτη περίπτωσης χαρτοφυλακίου με το Full Page Player

Μια σελίδα μελέτης περίπτωσης με περιεχόμενο σώματος και ένα Code Block mount κάτω από τον ήρωα:

  • Σήμανση σελίδας
    <div class="blog-item-content">...</div> <div class="gsp_full_player"></div>
  • Επιλογέας περιεχομένου - .blog-item-content (ή το περιτύλιγμα κειμένου της μελέτης περίπτωσης σας)
  • Στοιχείο απόδοσης - .gsp_full_player
  • Λίστα εξαιρέσεων - .share-buttons,.related-posts (Προαιρετικό)
  • Επιλογέας τίτλου - h1 (Προαιρετικό)

Σελίδα μαθήματος — Μπλοκ κώδικα μέσα στο περιεχόμενο (parent_class)

Εάν το mount Code Block βρίσκεται μέσα σε μια ενότητα μαθήματος μαθήματος, ο Επιλογέας Περιεχομένου μπορεί να είναι σχετικός:

  • Επιλογέας περιεχομένου - parent_class (διαβάζει τον γονέα του mount)
  • Στοιχείο απόδοσης - .gsp_full_player

Χρήση self_class όταν το ίδιο το περιτύλιγμα mount περιέχει το κείμενο που πρέπει να αφηγηθεί.

Αναρτήσεις ιστολογίου δημιουργού με ένα γραφικό στοιχείο κουμπιού

Μέρος .gsp_button_player σε πολλές αναρτήσεις ιστολογίου. Γραφικό στοιχείο One Button Player με Render Element .gsp_button_player μπορεί να τα τροφοδοτήσει όλα. Προσθέστε περισσότερα γραφικά στοιχεία μόνο όταν οι κανόνες φωνής, σχεδίασης ή URL πρέπει να διαφέρουν για τις σελίδες μαθημάτων έναντι των σελίδων χαρτοφυλακίου.

Δημιουργήστε γραφικά στοιχεία ήχου για δημιουργούς Squarespace

  • Άνοιγμα πίνακα ελέγχου — πήγαινε στο δικό σου Πίνακας ελέγχου GSpeech.
  • Επιλέξτε τον ιστότοπο — ανοίξτε τον ιστότοπο Squarespace στον οποίο συνδεθήκατε.
  • Προσθήκη νέου γραφικού στοιχείου — Γραφικά στοιχεία → Προσθήκη νέου γραφικού στοιχείου → επιλογή τύπου (Πλήρης παίκτης, Κουμπί, Κύκλος, …) → Δημιουργία.
  • Ρύθμιση παραμέτρων περιεχομένου — ορίστε Επιλογέα Περιεχομένου, Στοιχείο Απόδοσης, Λίστα Εξαιρέσεων, τίτλους για ιστολόγια ή χαρτοφυλάκια.
  • Ρύθμιση παραμέτρων προγράμματος αναπαραγωγής / σχεδίασης — φωνή, πίνακες, θέμα, πλάτος, περιθώρια.
  • Δημοσίευση και ακρόαση — ορίστε την Κατάσταση σε Δημοσιευμένη, ανανεώστε τη ζωντανή σελίδα του Squarespace, δοκιμάστε την αναπαραγωγή.

Όταν αλλάζει το κείμενο του ιστολογίου ή του χαρτοφυλακίου, το Smart Audio Sync μπορεί να αναδημιουργήσει την αφήγηση στο παρασκήνιο. Τα πεδία αντιστοίχισης εξακολουθούν να αποφασίζουν. Ποιό κείμενο και όπου ο παίκτης ζει.

Συχνές ερωτήσεις: Κείμενο σε ομιλία Squarespace και Έγχυση κώδικα

  • Υποστηρίζει το Squarespace μετατροπή κειμένου σε ομιλία και φωνές τεχνητής νοημοσύνης με το GSpeech;

    Ναί. GSpeech προσθέτει Squarespace κείμενο σε ομιλία με φυσικές φωνές τεχνητής νοημοσύνης για ιστολόγια, σελίδες μαθημάτων και χαρτοφυλάκια. Συνδέεστε με Code Injection, τοποθετείτε παίκτες με ένα Code Block και διαχειρίζεστε τα πάντα στην Cloud Console — δεν απαιτούνται κλειδιά API.
  • Πώς μπορώ να προσθέσω τον παίκτη με Code Injection και ένα Code Block;

    Αντιγράψτε τον κώδικα σύνδεσης από Ενοποιήσεις → Squarespace / Html Ιστότοπος. Επικολλήστε τον Ρυθμίσεις → Για προχωρημένους → Εισαγωγή κώδικα (Υποσέλιδο) πριν Σε κάθε σελίδα που χρειάζεται ήχο, προσθέστε ένα Κωδικός Block με μια βάση όπως <div class="gsp_full_player"></div> και ορίστε το Render Element σε αυτήν την κλάση.
  • Τι είναι ο Επιλογέας Περιεχομένου έναντι του Στοιχείου Απόδοσης στο Squarespace;

    Επιλογέας περιεχομένου επιλέγει ποιο HTML Squarespace θα αφηγηθεί — για παράδειγμα .blog-item-content or .sqs-block-content. Στοιχείο απόδοσης επιλέγει πού εμφανίζεται ο παίκτης — συνήθως η κλάση προσάρτησης Code Block. Λάθος κείμενο σημαίνει διόρθωση του Επιλογέα Περιεχομένου. Η έλλειψη παίκτη σημαίνει διόρθωση του Στοιχείου Απόδοσης.
  • Θα επιβραδύνει ο ήχος GSpeech την ιστοσελίδα μου στο Squarespace;

    Όχι. Ο ήχος δημιουργείται και αποθηκεύεται προσωρινά στο GSpeech cloud, όχι στο Squarespace. Το σενάριο Footer Code Injection είναι ελαφρύ και τα προγράμματα αναπαραγωγής φορτώνουν μόνο εκεί που προσθέτετε Code Blocks. Τα ιστολόγια και οι σελίδες χαρτοφυλακίου διατηρούν κανονική απόδοση ενώ οι επισκέπτες ακούν on demand.
  • Χρειάζομαι κλειδιά API για να προσθέσω φωνή AI στο Squarespace;

    Όχι. GSpeech is Δεν απαιτούνται κλειδιά API για το Squarespace. Συνδεθείτε στην Cloud Console, προσθέστε Code Injection, διαμορφώστε widgets και δημοσιεύστε. Οι φωνές και οι παίκτες παραμένουν σε έναν λογαριασμό χωρίς κλειδιά TTS τρίτων στον ιστότοπό σας.

Χρειάζεστε βοήθεια με την εύρεση επιλογέων για διάταξη Squarespace ή ενσωμάτωση Code Injection; Επικοινωνήστε με την υποστήριξη του GSpeechΣτείλτε μια διεύθυνση URL σελίδας και θα σας βοηθήσουμε να αντιστοιχίσετε τον Επιλογέα Περιεχομένου / Στοιχείο Απόδοσης.

Έγγραφα και οδηγοί