Կանչել HTML-ից հատուկ վիջեթ

Ինչպես «կանչել» HTML-ից հատուկ վիջեթը

Մտածեք երեք շերտի մասին։ Միացման սկրիպտը բեռնվում է։ GSpeech ամբողջ կայքի համար: Cloud Console-ի վիջեթը խաղացողի սահմանումն է (ձայն, Chrome, ընտրիչներ, URL կանոններ): Ձեր HTML-ում միացումը դատարկ հանգույցն է, որտեղ այդ խաղացողը կարող է հայտնվել:

• 1. Միացման սկրիպտ — մեկ անգամ մեկ կայքի համար (Ինտեգրացիաներ → Html կայք), սովորաբար նախքան </body>.
• 2. Հրապարակված վիջեթ — Լրիվ / Կոճակ / Շրջանակ, որը դուք ստեղծում կամ հարմարեցնում եք կոնսոլում։
• 3. HTML-ում տեղադրել — օրինակ <div class="my_listen_btn"></div>; Render տարրը պետք է լինի .my_listen_btn.
• Բովանդակության ընտրիչ — CSS թիրախ էջի տեքստի համար, որը պետք է ներկայացվի (կամ թողեք դատարկ և օգտագործեք «Բովանդակության տեքստ»՝ առանձին աուդիոյի համար):

Նիշի կանոն. HTML-ը երբեք չի «ներմուծում» վիջեթը անունով։ Համապատասխան Render տարր + mount դաս is զանգը։

Ինչպես գրել id, class և ստորակետեր (ծրագրավորման աստիճան անհրաժեշտ չէ)

Բովանդակության ընտրիչը, Render Element-ը և Exclude List-ը օգտագործում են նույն պարզ լեզուն: Ձեզ անհրաժեշտ է միայն երկու նախածանց, այդ դեպքում կարող եք բանավոր բովանդակությունը մասերի հավաքել և աղբը փորագրել Բացառման հետ։

• id → # — HTML-ում id="article" → մեջ GSpeech գրել #article (հեշ + ճշգրիտ id):
• դաս → . — HTML-ում class="post-content" → գրել .post-content (կետ + ճշգրիտ դասը): Եթե տարրն ունի մի քանի դաս, մեկ համապատասխան դասը բավարար է:
• Միայն պիտակ — մերկ պիտակների անունները նույնպես աշխատում են. article, section, h1 (no # or .).
• Բովանդակության ընտրիչ + ստորակետեր — հավաքեք բովանդակությունը մասերով մեկ դաշտում. #intro,.chapter-body,#summaryՀամընկնումները կարդացվում են հերթականությամբ՝ կատարյալ է, երբ էջը բաժանված է մի քանի փաթեթավորողների։
• Բացառությունների ցանկ + ստորակետեր — նույն շարահյուսությամբ հեռացնել աղմուկը այդ ընտրությունից՝ #comments,.ads,.share-buttonsԲացառությունները վերաբերում են բովանդակության ընտրիչի կողմից հավաքվածին։
• Ինչպես գտնել արժեքներ — ակտիվ էջում՝ աջ սեղմեք բլոկի վրա → Ստուգել։ Փնտրեք id="…" or class="…", ապա մուտքագրեք դրանք՝ # or . կոնսոլում։ Խորը բացառման ուղեցույց։ Բացառվածների ցանկ և ոչ խոսքի սահմանափակում.

Երեք լռելյայն մոնտաժներ ընդդեմ ձեր սեփական վիջեթի

Փաստաթղթերը հաճախ ցույց են տալիս երեք հարմար միացման դասերը, քանի որ դրանք առաքվում են պատրաստ՝ Cloud-ի լռելյայն կարգավորումներով: Պատվերով վիջեթը տարբեր ապրանք չէ՝ այն նույն Full / Button / Circle տեսակն է՝ Ձեր Render տարրը (և սովորաբար ձեր բովանդակության ընտրիչը):

• Լռելյայն լրիվ — լեռ <div class="gsp_full_player"></div> → Ռենդերի տարր .gsp_full_player.
• Լռելյայն կոճակ - .gsp_button_player mount + համապատասխան Render տարր։
• Լռելյայն շրջանակ - .gsp_circle_player mount + համապատասխան Render տարր։
• Ձեր անհատական ​​զանգը — ձեր ունեցած ցանկացած դաս կամ ID (օրինակ՝ #promo-listen or .footer_tts) → սահմանեք հենց այդ ընտրիչը որպես Render Element ձեր հրապարակած վիջեթի վրա։

WordPress-ի կարճ կոդերը ([gspeech] / button / circle) գրառումների տեղադրման տարբեր ուղի են։ Raw HTML-ում կարճ կոդ չկա՝ միայն mount + Render Element զույգը։ Տես լռելյայն կարճ կոդեր միայն WP-ի համար։

Ամբողջականից մինչև ամբողջական. կարգավորեք և կանչեք ձեր անհատական ​​վիջեթը

1. Ստեղծեք / բացեք ձեր կայքը է Cloud Console և հաստատեք գլոբալ լռելյայն կարգավորումները Կարգավորումներ (ձայն, լեզու) — տե՛ս Գլոբալ vs. Պատվերով.
2. Պատճեն Html կայք միացման սկրիպտը ինտեգրացիաներից և մեկ անգամ տեղադրեք այն ձեր համօգտագործվող ձևանմուշում նախքան </body>Տեղակայեք այնպես, որ ձայնի կարիք ունեցող յուրաքանչյուր էջ բեռնի սկրիպտը։
3. Ստեղծել Լրիվ / Կոճակ / Շրջան վիջեթ (կամ բացեք արդեն իսկ գոյություն ունեցող մեկը): Տվեք դրան հստակ անուն, որպեսզի հետագայում ճանաչելի լինի:
4. Էջի HTML-ում ավելացրեք դատարկ մոնտաժ որտեղ պետք է հայտնվի խաղացողը՝ ընտրեք եզակի դաս, որը չեք վերօգտագործի անկապ UI-ի համար։ Օրինակ՝ <div class="my_custom_player"></div>.
5. Վիջեթի վրա սահմանեք Render տարր հենց այդ ընտրողին՝ .my_custom_player (դասի համար առաջատար կետը;) #id անձնագրի համար)։
6. հավաքածու Բովանդակության ընտրիչ այն, ինչ այցելուները պետք է լսեն։ Մեկ փաթեթավորումը բավարար է (#main or .product-descriptionԿամ հավաքեք կտորները ստորակետերով՝ #intro,.body-copy,#summary: Օգտագործում parent_class / self_class երբ մոնտաժը գտնվում է այդ բովանդակության բլոկի ներսում։
7. Optional: Բացառել ցուցակը (նաև ստորակետով բաժանված, նույնը # / . կանոններ) նավիգացիայի / գովազդների / մեկնաբանությունների համար՝ օրինակ՝ #comments,.ads,.share-buttons. Ըստ ցանկության՝ թույլատրված / արգելափակված URL-ներ, որպեսզի այս վիջեթը աշխատի միայն այնտեղ, որտեղ դուք ցանկանում եք։
8. Սահմանել կարգավիճակը Հրատարակված է, Փրկել, վերաբեռնեք ուղիղ հեռարձակվող HTML էջը և համոզվեք, որ նվագարկիչը լրացնում է ձեր միացումը և կարդում է ճիշտ տեքստը։

Անհրաժեշտ է աուդիո ոչ շրջապատող էջի տեքստը (ցուցադրական / տաղավարի ոճ): Թողեք բովանդակության ընտրիչը դատարկ և լրացրեք Բովանդակության տեքստ փոխարենը՝ ամբողջական ուղեցույց. Առանձին նվագարկիչ՝ բովանդակության տեքստով.

Ձեր վիջեթը կանչող նվազագույն HTML էջ

Ստորև ներկայացված է աշխատանքային էջի ձևը։ Փոխարինեք կապի սկրիպտը Integrations-ից ձեր սկրիպտով։ Mount դասը պետք է համապատասխանի հրապարակված վիջեթի Render Element-ին։ Content Selector-ը պետք է ուղղված լինի #article այս օրինակում.

• HTML-ում տեղադրել - <div class="my_custom_player"></div> (դատարկ):
• Վիջեթի արտապատկերման տարր - .my_custom_player.
• Վիջեթի բովանդակության ընտրիչ - #article.
• Միացման սկրիպտ — ձեր մեկ տողանոց Html կայքի ներդրման նախօրոք </body>.

Կմախք (մեկնաբանություններում ներկայացված է քարտեզագրումը):

<!-- spoken content -->
<article id="article">…your text…</article>
<!-- player mount (Render Element = .my_custom_player) -->
<div class="my_custom_player"></div>
<!-- GSpeech connection script from Integrations -->

Կարող եք տեղադրել ամրակը հոդվածի վերևում, կողային վահանակում կամ ստորին մասում՝ Content Selector-ը դեռևս մատնացույց է անում #article, ուստի Chrome-ի դասավորությունը չի արտասանվում։ Այդ դասավորության ձևանմուշը նույնպես ներառված է Տեղադրեք անհատական ​​վիջեթ.

Եթե ​​​​հարմարեցված վիջեթը չի երևում

1. Միացման սկրիպտ բեռնված է այդ URL-ի վրա (Դիտել աղբյուրը / ցանցը):
2. Վիջեթի կարգավիճակը՝ Հրատարակված է (ոչ նախագիծ / անջատված):
3. Միացումը գոյություն ունի էջում, և դասի/իդենտիֆիկացիայի ուղղագրությունը համընկնում է Render տարր ճիշտ (ներառյալ առաջատարը) . or #).
4. Բովանդակության ընտրիչ գտնում է իրական տեքստ (կամ Content Text-ը լրացվում է առանձին տեքստի համար):
5. Թույլատրված / արգելափակված URL-ները չեն բացառում այս ուղին։
6. Պահպանումից հետո վերաբեռնում — HTML/CDN քեշը կարող է կարճ ժամանակով պահպանել հին shell-ը։

Լրիվ խնդրի լուծման ուղին՝ Խաղացողը չի ներկայանում.