Gutenberg Alles wat u moet weten over de laatste editor van WordPress
Gutenberg is een nieuwe editor voor WordPress die dat helemaal zal doen vervang de huidige door TinyMCE gevoede editor. Het is een ambitieus project dat waarschijnlijk op veel manieren WordPress zal veranderen en dat zowel reguliere eindgebruikers als ontwikkelaars zou treffen, met name degenen die afhankelijk zijn van het bewerkerscherm voor het werken aan WordPress. Hier is hoe het eruit ziet.
Gutenberg introduceert ook een nieuw paradigma in WordPress genaamd “Blok”.
“Blok” is de abstracte term die wordt gebruikt om te beschrijven eenheden markup die zijn samengesteld uit de inhoud of lay-out van een webpagina. Het idee combineert concepten van wat we vandaag bereiken in WordPress shortcodes, aangepaste HTML en insluiten van ontdekkingen in een enkele consistente API en gebruikerservaring.
Het project opzetten
Wetende dat Gutenberg bovenop React is gebouwd, zijn sommige ontwikkelaars bezorgd dat het barrière is te hoog voor beginnende ontwikkelaars voor het ontwikkelen van Gutenberg.
Het instellen van React.js kan behoorlijk tijdrovend en verwarrend zijn als u er net mee bent begonnen. Je hebt op zijn minst JSX-transformator, Babel nodig, afhankelijk van je code heb je misschien een aantal Babel-plug-ins nodig, en een Bundler zoals Webpack, Rollup of Parcel.
gelukkig, sommige mensen binnen de WordPress-gemeenschap hebben een stapje verder gebracht en proberen de ontwikkeling van Gutenberg zo gemakkelijk mogelijk te maken voor iedereen om te volgen. Vandaag hebben we een tool die een Gutenberg-boilerplate zal genereren we kunnen meteen beginnen met het schrijven van code in plaats van zich te vervelen met de gereedschappen en de configuraties.
Maak een Guten Block
De create-Guten-block is een initiatief van Ahmad Awais. Het is een zero-configuration toolkit (# 0CJS) waarmee je het Gutenberg-blok kunt ontwikkelen met een aantal voorinstellingen voor moderne stacks, waaronder React, Webpack, ESNext, Babel, ESLint en Sass. Volg de instructies om aan de slag te gaan met Create Guten Block.
ES5 gebruiken (ECMAScript 5)
Gebruik al deze hulpmiddelen om een eenvoudig te maken “Hallo Wereld” blok lijkt misschien gewoon te veel. Als je je stapels graag wilt houden, kun je eigenlijk een Gutenberg-blok ontwikkelen met een gewoon goed 'ECMAScript 5 waar je misschien al bekend mee bent. Als je hebt WP-CLI 1.5.0 geïnstalleerd op uw computer, je kunt gewoon rennen ...
wp steigerblok[--Title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>… naar <strong>genereer de Gutenberg block boilerplate naar jouw plug-in of thema</strong>. Deze benadering is vooral zinvol voor bestaande plug-ins en thema's die u vóór het Gutenberg-tijdperk hebt ontwikkeld.</p> <p>In plaats van een nieuwe plug-in te maken die geschikt is voor de Gutenberg-blokken, wil je misschien de blokken integreren met je plug-ins of met de thema's. En om deze tutorial gemakkelijk te volgen voor iedereen, <strong>we zullen ECMAScript 5 gebruiken met WP-CLI</strong>.</p> <h4>Een nieuw blok registreren</h4> <p>Gutenberg is momenteel ontwikkeld als een plug-in en zal worden samengevoegd met WordPress 5.0 wanneer het team voelt dat het klaar is. Dus, voor het moment, moet je het installeren vanuit de <strong>Plugins-pagina in <code>wp-admin</code></strong>. Nadat u het hebt geïnstalleerd en geactiveerd, voert u de volgende opdracht uit in de terminal of de opdrachtprompt als u op een Windows-computer werkt.</p> <pre name="code"> wp steigerblokserie --title = "HTML5 Series" --thema</pre> <p>Deze opdracht genereert een blok naar het momenteel actieve thema. Ons blok zal bestaan uit de volgende bestanden:</p> <pre name="code"> . EEN¢Â ?? â ?? â ?? â ?? â ??  ?? serie â ?? Â'Ã' Ã' â ?? â ?? â ?? â ?? â ??  ?? block.js â ?? Â'Ã' Ã' â ?? â ?? â ?? â ?? â ??  ?? editor.css â ?? Â'Ã' Ã' â ?? â ?? â ?? â ?? â ??  ?? style.css â ?? â ?? â ?? â ?? â ??  ?? series.php </pre> <p>Laten we het hoofdbestand van onze blokken laden in de <code>functions.php</code> van ons thema:</p> <pre name="code"> if (function_exists ('register_block_type')) vereist get_template_directory (). '/Blocks/series.php'; </pre> <p>Merk op dat we het laden van bestanden insluiten met een voorwaardelijke. Dit zorgt ervoor <strong>compatibiliteit met vorige WordPress-versie die ons blok alleen wordt geladen wanneer Gutenberg aanwezig is</strong>. Ons blok zou nu beschikbaar moeten zijn binnen de Gutenberg-interface.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Zo ziet het eruit als we het blok invoegen.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg API's</h3> <p>Gutenberg introduceert twee sets API's om een nieuw blok te registreren. Als we naar de <code>series.php</code>, we zullen de volgende code vinden die ons nieuwe blok registreert. Het ook <strong>laadt de stylesheet en JavaScripts op de front-end en de editor</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>Zoals we hierboven kunnen zien, is ons blok genoemd <code>twentyseventeen / series</code>, de Block-naam moet uniek zijn en namespaced om een botsing met de andere Blocks veroorzaakt door de andere plug-ins te voorkomen.</p> <p>voorts, <strong>Gutenberg biedt een reeks nieuwe JavaScript API's om te communiceren met de “Blok” interface</strong> in de editor. Omdat de API vrij veel voorkomt, zullen we ons concentreren op een aantal details waarvan ik denk dat je die moet kennen om een eenvoudig maar functionerend Gutenberg-blok te krijgen.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Eerst zullen we kijken naar <code>wp.blocks.registerBlockType</code>. Deze functie is gewend aan <strong>registreer een nieuw “Blok” naar de Gutenberg-redacteur</strong>. Het vereist twee argumenten. Het eerste argument is de Block-naam die de naam moet volgen die is geregistreerd in de <code>register_block_type</code> functie aan de PHP-kant. Het tweede argument is een <strong>Object dat de Block-eigenschappen definieert</strong> zoals titel, categorie en een aantal functies om de Block-interface weer te geven.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), categorie: 'widgets', keywords: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Met deze functie kunt u het element binnen de “Blok” in de berichteditor. De <code>wp.element.createElement</code> functie is in feite een abstractie van de React <code>createElement ()</code> functie accepteert dus dezelfde reeks argumenten. Het eerste argument neemt het type van het element, bijvoorbeeld een alinea, een <code>span</code>, of a <code>div</code> zoals hieronder getoond:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>We kunnen <strong>alias de functie in een variabele</strong> dus het is korter om te schrijven. Bijvoorbeeld:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>als jij <strong>geef de voorkeur aan het gebruik van de nieuwe ES6-syntaxis</strong>, je kunt het ook op deze manier doen:</p> <pre name="code"> const createElement: el = wp.element; el ( 'div');</pre> <p>We kunnen ook <strong>voeg de elementattributen toe</strong> zoals de <code>klasse</code> naam of <code>ID kaart</code> op de tweede parameter als volgt:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>De <code>div</code> die we hebben gemaakt, zou zonder de inhoud niet logisch zijn. We kunnen <strong>voeg de inhoud toe aan het argument van de derde parameter</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Dit artikel is onderdeel van onze' HTML5 / CSS3 Tutorials-serie '- gewijd om u te helpen een betere ontwerper en / of ontwikkelaar te maken Klik hier om meer artikelen uit dezelfde serie te zien ');</pre> <h4><code>wp.components</code></h4> <p>De <code>wp.components</code> bevatten een verzameling van, zoals de naam al aangeeft, de Gutenberg-componenten. Deze componenten zijn technisch gezien aangepaste React-componenten, waaronder de Button, Popover, Spinner, Tooltip en een aantal anderen. We kunnen <strong>hergebruik deze componenten in ons eigen blok</strong>. In het volgende voorbeeld voegen we een knopcomponent toe.</p> <pre name="code"> var Button = wp.components.Button; el (Knop, 'klasse': 'downloadknop',, 'Download');</pre> <h4>attributen</h4> <p>De attributen zijn de manier om de gegevens op te slaan in ons blok, deze gegevens kunnen zijn zoals de inhoud, de kleuren, de uitlijningen, de URL, enz. We kunnen de kenmerken van de eigenschappen doorgeven aan de <code>Bewerk()</code> functie, als volgt:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', inhoud); </pre> <p>Om de Attributen bij te werken, gebruiken we de <code>setAttributes ()</code> functie. Meestal zouden we de inhoud van bepaalde acties wijzigen, bijvoorbeeld wanneer op een knop wordt geklikt, een invoer is gevuld, een optie is geselecteerd, enzovoort. In het volgende voorbeeld gebruiken we deze om een <strong>terugvallen</strong> inhoud van ons blok voor het geval er iets onverwachts met ons is gebeurd <code>seriesContent</code> Attribuut.</p> <pre name="code"> edit: functie (rekwisieten) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hallo wereld! Hier is de terugval-inhoud.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', content),]; </pre> <h4>Het blok opslaan</h4> <p>De <code>opslaan()</code> function werkt op dezelfde manier als de <code>Bewerk()</code>, behalve dat het de inhoud van ons blok definieert om op te slaan in de postdatabase. Het opslaan van de Block-inhoud is vrij eenvoudig, zoals we hieronder kunnen zien:</p> <pre name="code"> save: function (props) if (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', content),]; </pre> <h3>Wat is het volgende?</h3> <p>Gutenberg zal het WordPress-ecosysteem ten goede veranderen (of mogelijk slechter). Het stelt ontwikkelaars in staat om <strong>een nieuwe manier aannemen om WordPress-plug-ins en -thema's te ontwikkelen</strong>. Gutenberg is slechts een begin. Binnenkort de “Blok” paradigma zal worden uitgebreid naar andere gebieden van WordPress, zoals de Settings API's en de Widgets.</p> <p>JavaScript diep leren; het is de enige manier om in Gutenberg te komen en relevant te blijven voor de toekomst in de WordPress-industrie. Als je al bekend bent met de basisbeginselen van JavaScript, de eigenaardigheden, de functies, de hulpmiddelen, de goederen en de slechte dingen, weet ik zeker dat je op de hoogte bent van Gutenberg.</p> <p>Zoals gezegd, biedt Gutenberg een overvloed aan API's, genoeg om bijna alles voor uw Block te doen. U kunt kiezen of <strong>codeer je Block met een gewoon oud JavaScript, JavaScript met ES6-syntaxis, React of zelfs Vue</strong>.</p> <h4>Ideeën en inspiraties</h4> <p>Ik heb een heel (heel) eenvoudig Gutenberg-blok gemaakt dat je kunt vinden in de repository van ons Github-account. Verder heb ik ook een aantal repositories samengesteld van waaruit je inspiratie kunt opdoen voor het bouwen van een complexer Block.</p> <ul><li>Gutenblocks - Een verzameling blokken van Mathieu Viet geschreven in JavaScript met ES5 Syntax</li> <li>Jetpack Gutenblocks Project - een verzameling blokken gebundeld in Jetpack</li> <li>Een lijst met voorbeelden van implementatie van Gutenberg, inclusief met Vue.js</li> </ul><h3>Verdere referentie</h3> <ul><li>Gutenberg Official Repository</li> <li>Gutenberg Handbook</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 een IKEA Lack Table in een Component 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 een oud toetsenbord om een aangepaste besturingsinterface te maken</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">Handleiding voor Windows 10 Taakbeheer - Deel II</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">Volgend artikel</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 een zaklamp van $ 10 in een ultraheldere Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Vorig artikel</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">Handleiding voor Windows 10 Taakbeheer - Deel III</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"> Nuttige informatie en tips voor webontwikkeling. Programmering, webdesign, CSS, HTML, JAVASCRIPT. Configureer en installeer WINDOWS opnieuw. Creëren van sites en applicaties vanuit het niets. </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>