Gutenberg Kõik, mida pead teadma WordPressist
Gutenberg on uus toimetaja WordPressile, mis täielikult asenda praegune TinyMCE-toega redaktor. See on ambitsioonikas projekt, mis väidetavalt muudab WordPressi mitmel viisil ja mõjutaks nii tavapäraseid lõppkasutajaid kui ka arendajaid, eriti neid, kes sõltuvad WordPressiga töötamiseks mõeldud toimetajaekraanist. Siin on, kuidas see välja näeb.
Gutenberg tutvustab ka uut paradigmat WordPressis “Blokeeri”.
“Blokeeri” on abstraktne termin, mida kasutatakse kirjeldamiseks märgistusühikud mis moodustavad veebilehe sisu või paigutuse. Idee ühendab mõisteid, mida WordPressis täna me saavutame lühikoodid, kohandatud HTML-i ja embed avastamise ühtsesse sidusesse API-sse kasutajate kogemusi.
Projekti seadistamine
Teades, et Gutenberg on ehitatud React'i peale, on mõned arendajad mures selle pärast, et Gutenbergi arendamiseks on algtaseme arendajatele liiga suur barjäär.
React.js'i seadistamine võib olla üsna aeganõudev ja segadust tekitav, kui olete just sellega alustanud. Peate vähemalt, JSX-i transformaator, Babel, sõltuvalt teie koodist võib olla vaja mõnda Babeli pluginat ja Bundlerit nagu veebipakett, rollup või pakett.
Õnneks, mõned inimesed WordPressi kogukonnas kiirendasid ja üritavad muuta Gutenbergi arenguks võimalikult lihtsaks, et igaüks neist järgiks. Täna on meil tööriist, mis loob Gutenbergi katla me võime kohe koodi kirjutada tööriistade ja konfiguratsioonide asemel.
Loo Guteni plokk
The luua-guten-block on Ahmad Awais algatatud projekt. See on null-konfiguratsiooni tööriistakomplekt (# 0CJS), mis võimaldab teil välja töötada Gutenbergi plokk mõne kaasaegse stackiga, sealhulgas React, Webpack, ESNext, Babel, ESLint ja Sass. Guteni ploki loomise alustamiseks järgige juhiseid.
ES5 kasutamine (ECMAScript 5)
Kasutades kõiki neid vahendeid, et luua lihtne “Tere, Maailm” plokk võib tunduda liiga palju. Kui soovid hoida oma korstnad lahjana, saate tegelikult välja töötada Gutenbergi ploki, kasutades lihtsat hea ol 'ECMAScript 5-d, mida võiksite juba tunda. Kui teil on WP-CLI 1.5.0 arvutisse installitud, saate lihtsalt käivitada ...
wp tellingute plokk[- pealkiri = ] [- dashicon =<dashicon>] [- kategooria =<category>] [--theme] [- plugin =<plugin>] [- force]</pre> <p>… <strong>genereerige Gutenbergi ploki katlakivi oma plugina või teema jaoks</strong>. See lähenemine on mõistlikum, eriti olemasolevate pluginate ja teemade puhul, mida olete arendanud enne Gutenbergi ajastu.</p> <p>Selle asemel, et luua Gutenbergi plokkide jaoks uus pistikprogramm, võiksite need plokid oma pluginatesse või teemadesse integreerida. Ja selleks, et see juhendaja oleks kõigi jaoks lihtne järgida, <strong>kasutame ECMAScript 5 WP-CLI-ga</strong>.</p> <h4>Uue ploki registreerimine</h4> <p>Gutenberg on praegu välja töötatud plugina ja see ühendatakse WordPress 5.0-ga, kui meeskond tunneb, et see on valmis. Niisiis peate praegu installima selle <strong>Pluginate leht <code>wp-admin</code></strong>. Kui olete selle installinud ja aktiveerinud, käivitage terminalis või käsuviipis järgmine käsk, kui olete Windowsi seadmes.</p> <pre name="code"> wp karkassiplokkide seeria --title = "HTML5 Series" - teema</pre> <p>See käsk genereerib aktiivse teema bloki. Meie plokk koosneb järgmistest failidest:</p> <pre name="code"> . âÂ? Â? âÂ? Â? âÂ? seeria â       à ¢Â? Â? âÂ? Â? âÂ? block.js â       à ¢Â? Â? âÂ? Â? âÂ? editor.css â       à ¢Â? Â? âÂ? Â? âÂ? style.css âÂ? Â? âÂ? Â? âÂ? series.php </pre> <p>Laadime meie plokkide põhifaili <code>funktsioonid.php</code> meie teema:</p> <pre name="code"> kui (function_exists ('register_block_type')) vaja get_template_directory (). '/blocks/series.php'; </pre> <p>Pange tähele, et me lisame faili laadimise tingimusliku. See tagab <strong>ühilduvus eelmise WordPressi versiooniga, et meie plokk on laaditud ainult siis, kui Gutenberg on kohal</strong>. Meie plokk peaks nüüd olema Gutenbergi liideses saadaval.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>See, kuidas see bloki sisestamisel näeb.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenbergi API-d</h3> <p>Gutenberg tutvustab kahte API-komplekti uue ploki registreerimiseks. Kui me vaatame <code>series.php</code>, leiame järgmise koodi, mis registreerib meie uue ploki. See samuti <strong>laadib stiili ja JavaScripti esiküljele ja toimetajale</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Nagu eespool näeme, on meie plokk nimeks <code>twentyseventeen / series</code>, Blokeeringu nimi peab olema unikaalne ja nimesuunatud, et vältida kokkupõrkeid teiste plokkide poolt toodetud plokkidega.</p> <p>Lisaks sellele, <strong>Gutenberg pakub mitmeid uusi JavaScripti API-sid “Blokeeri” liides</strong> redaktoris. Kuna API on küllaltki rohkelt, keskendume mõningatele spetsiifilistele küsimustele, mida ma arvan, et peaksite teadma, et saaksid lihtsa, kuid veel toimiva Gutenbergi ploki.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Esiteks uurime <code>wp.blocks.registerBlockType</code>. Seda funktsiooni kasutatakse <strong>registreerige uus “Blokeeri” Gutenbergi toimetajale</strong>. See nõuab kahte argumenti. Esimene argument on ploki nimi, mis peaks järgima nime, mis on registreeritud <code>register_block_type</code> funktsiooni PHP poolel. Teine argument on <strong>Objekti, mis määratleb ploki omadused</strong> nagu pealkiri, kategooria ja paar funktsiooni ploki liidese muutmiseks.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', pealkiri: __ ('HTML5 Series'), kategooria: "vidinad", märksõnad: ['html'], redigeeri: funktsioon (rekvisiidid) , salvestada: funktsioon (rekvisiidid) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>See funktsioon võimaldab luua elemendi “Blokeeri” postiredaktoris. The <code>wp.element.createElement</code> funktsioon on põhimõtteliselt reaktsiooni võtmine <code>createElement ()</code> seega aktsepteerib ta sama argumentide kogumit. Esimene argument võtab elemendi tüübi näiteks punkti, a <code>span</code>, või a <code>div</code> nagu allpool näidatud:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Me saame <strong>alias funktsiooni muutujaks</strong> nii et see on lühem kirjutada. Näiteks:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Kui sa <strong>eelistavad kasutada uut ES6 süntaksit</strong>, seda saab teha ka järgmiselt:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Me võime ka <strong>lisage elemendi atribuudid</strong> nagu <code>klassi</code> nimi või <code>id</code> teisele parameetrile:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'seeria-html-post-id-001'));</pre> <p>The <code>div</code> meie loodud sisu ei oleks mõistlik ilma sisuta. Me saame <strong>lisage sisu kolmanda parameetri argumendile</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001'), 'See artikkel on osa meie "HTML5 / CSS3 juhendite seeriast" - pühendatud paremate disainerite ja / või arendajate loomise hõlbustamiseks klõpsake siia, et näha rohkem sama seeria artikleid ”);</pre> <h4><code>wp.components</code></h4> <p>The <code>wp.components</code> sisaldama Gutenbergi komponentide kogumit, nagu nimigi ütleb. Need komponendid on tehniliselt React custom komponendid, mis sisaldavad nuppu Button, Popover, Spinner, Tooltip ja hulga teisi. Me saame <strong>kasutage neid komponente uuesti oma plokki</strong>. Järgmises näites lisame nupu komponendi.</p> <pre name="code"> var Button = wp.components.Button; el (nupp, 'class': 'download-button', ►, 'Download');</pre> <h4>Atribuudid</h4> <p>Atribuudid on viis andmete salvestamiseks meie plokki, need andmed võivad olla nagu sisu, värvid, joondused, URL jne. Me saame atribuudid atribuutidest, mis on edastatud <code>muuda ()</code> funktsioon:</p> <pre name="code"> redigeeri: funktsioon (rekvisiidid) var content = props.attributes.seriesContent; tagastage el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), sisu); </pre> <p>Atribuutide värskendamiseks kasutame <code>setAttributes ()</code> funktsiooni. Tavaliselt muudaksime teatud toimingute sisu, näiteks kui nupule klõpsatakse, sisend on täidetud, valik on valitud jne. Järgmises näites kasutame seda, et lisada <strong>varu</strong> meie ploki sisu puhul, kui meie jaoks juhtus midagi ootamatut <code>seriesContent</code> Atribuut.</p> <pre name="code"> redigeeri: funktsiooni (rekvisiidid) if (tüübi props.attributes.seriesContent === 'määratlemata' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: Hello World! Siin on varukoopia sisu. ' ) var content = props.attributes.seriesContent; tagasi [el ('div', 'class': 'series-html5', 'id': 'seeria-html-post-id-001'), sisu),]; </pre> <h4>Bloki salvestamine</h4> <p>The <code>salvestage ()</code> funktsioon toimib sarnaselt <code>muuda ()</code>, välja arvatud see, mis määratleb meie ploki sisu postitusandmebaasi salvestamiseks. Blokeerimise sisu salvestamine on üsna lihtne, nagu allpool näeme:</p> <pre name="code"> salvestada: funktsioon (rekvisiidid) if (! rekvisiidid ||! props.attributes.seriesContent) tagasi; var content = props.attributes.seriesContent; tagasi [el ('div', 'class': 'series-html5', 'id': 'seeria-html-post-id-001'), sisu),]; </pre> <h3>Mis järgmiseks?</h3> <p>Gutenberg muudab WordPressi ökosüsteemi paremaks (või isegi halvemaks). See võimaldab arendajatel <strong>võtta kasutusele uus viis WordPressi pluginate ja teemade arendamiseks</strong>. Gutenberg on vaid algus. Varsti “Blokeeri” paradigma laiendatakse WordPressi muudesse valdkondadesse, nagu seadete API-d ja vidinad.</p> <p>Õpi JavaScript sügavalt; see on ainus viis pääseda Gutenbergi ja jääda WordPressi tööstuse tuleviku seisukohalt asjakohaseks. Kui olete juba tutvunud JavaScripti põhitõedega, quirks'idega, funktsioonidega, tööriistadega, kaupadega ja halbadega, siis olen tõesti kindel, et jõuad Gutenbergi juurde.</p> <p>Nagu mainitud, paljastab Gutenberg arvukalt API-sid, mis on piisavad, et teie plokkile peaaegu midagi teha. Võite valida, kas <strong>koodige oma plokk lihtsa vana JavaScripti, JavaScriptiga, millel on ES6 süntaks, React või isegi Vue</strong>.</p> <h4>Ideed ja inspiratsioonid</h4> <p>Olen loonud väga (väga) lihtsa Gutenbergi ploki, mis on meie Githubi konto hoidlas. Lisaks sellele olen ma pannud kokku ka mitmeid hoidlaid, kust saab inspireerida keerukama ploki ehitamist.</p> <ul><li>Gutenblocks - Mathieu Vieti plokkide kogum, mis on kirjutatud JavaScriptis koos ES5 süntaksiga</li> <li>Jetpack Gutenblocks Project - Jetpackiga komplekteeritud plokkide kogum</li> <li>Gutenbergi rakenduste näidete loetelu koos Vue.jsiga</li> </ul><h3>Täiendav viide</h3> <ul><li>Gutenbergi ametlik hoidla</li> <li>Gutenbergi käsiraamat</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Hack IKEA Lack tabeli Komponent Rack</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Hack Apart vana vana klaviatuuri luua Custom Control Interface</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Juhend Windows 10 Task Managerile - II osa</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Järgmine artikkel</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Hack $ 10 taskulampi ultra-helge Premium One'i</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Eelmine artikkel</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Juhend Windows 10 Task Managerile - III osa</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Kasulik teave ja veebiarenduse näpunäited. Programmeerimine, veebidisain, CSS, HTML, JAVASCRIPT. Seadistage ja installige Windows WINDOWS uuesti. Saidide ja rakenduste loomine nullist. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>