Gutenberg Wszystko, co musisz wiedzieć o najnowszym edytorze WordPress
Gutenberg to nowy edytor WordPress, który całkowicie zastąp bieżący edytor oparty na TinyMCE. Jest to ambitny projekt, który prawdopodobnie zmieni WordPress na wiele sposobów i wpłynie zarówno na zwykłych użytkowników końcowych, jak i na programistów, szczególnie tych, którzy polegają na ekranie edytora podczas pracy nad WordPress. Oto jak to wygląda.
Gutenberg wprowadza również nowy paradygmat w WordPressie “Blok”.
“Blok” jest abstrakcyjnym terminem używanym do opisu jednostki marży które składają się z treści lub układu strony internetowej. Pomysł łączy koncepcje tego, co dzisiaj osiągamy w WordPressie shortcodes, niestandardowy HTML i osadzanie odnajdowania w jednym spójnym interfejsie API i doświadczenie użytkownika.
Konfigurowanie projektu
Wiedząc, że Gutenberg jest zbudowany na szczycie React, niektórzy deweloperzy obawiają się, że bariera jest zbyt wysoka, aby deweloperzy na poziomie podstawowym mogli rozwijać Gutenberga.
Skonfigurowanie React.js może być dość czasochłonne i mylące, jeśli dopiero zaczynasz. Będziesz potrzebował przynajmniej transformatora JSX, Babel, w zależności od kodu możesz potrzebować wtyczek Babel i Bundlera takiego jak Webpack, Rollup lub Parcel.
na szczęście, niektórzy ludzie w społeczności WordPress przyspieszyli i staramy się, aby rozwój Gutenberg był tak prosty, jak to tylko możliwe, aby wszyscy mogli go śledzić. Dzisiaj mamy narzędzie, które wygeneruje tzw możemy zacząć pisać kod od razu zamiast błądzić narzędziami i konfiguracjami.
Utwórz blok Guten
The utwórz-guten-blok to inicjowany projekt Ahmada Awaisa. To jest zestaw narzędzi do konfiguracji zerowej (# 0CJS), które pozwolą ci rozwinąć blok Gutenberga z kilkoma nowoczesnymi ustawieniami stosów, w tym React, Webpack, ESNext, Babel, ESLint i Sass. Postępuj zgodnie z instrukcjami, aby rozpocząć tworzenie bloku Guten Block.
Korzystanie z ES5 (ECMAScript 5)
Wykorzystanie wszystkich tych narzędzi do stworzenia prostego “Witaj świecie” blok może wydawać się za dużo. Jeśli chcesz utrzymywać swoje stosy na niskim poziomie, możesz stworzyć blok Gutenberga, używając zwykłego dobrego ECMAScript 5, z którym możesz już się zaznajomić. Jeśli masz WP-CLI 1.5.0 zainstalowany na komputerze, możesz po prostu uruchomić…
wp blok rusztowań[--title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--siła]</pre> <p>… do <strong>wygeneruj blok Gutenberga do swojej wtyczki lub motywu</strong>. Podejście to jest bardziej sensowne, szczególnie w przypadku istniejących wtyczek i motywów, które opracowałeś przed erą Gutenberga.</p> <p>Zamiast tworzyć nową wtyczkę, która pomieści bloki Gutenberga, możesz zintegrować bloki z wtyczkami lub motywami. I uczynić ten samouczek łatwym do śledzenia dla wszystkich, <strong>będziemy używać ECMAScript 5 z WP-CLI</strong>.</p> <h4>Rejestracja nowego bloku</h4> <p>Gutenberg jest obecnie rozwijany jako wtyczka i zostanie połączony z WordPress 5.0, gdy zespół uzna, że jest gotowy. Więc na razie musisz zainstalować go z <strong>Strona wtyczek w <code>wp-admin</code></strong>. Po zainstalowaniu i aktywowaniu uruchom następujące polecenie w terminalu lub wierszu polecenia, jeśli jesteś na komputerze z systemem Windows.</p> <pre name="code"> seria bloków rusztowań wp --title = "HTML5 Series" - motyw</pre> <p>To polecenie wygeneruje blok do aktualnie aktywnego motywu. Nasz blok składa się z następujących plików:</p> <pre name="code"> . ZA¢Â¢Â¢Â seria â  Ââ € ⢢ block.js â  Ââ € ⢢ editor.css â  Ââ € ⢢ style.css ⢢ series.php </pre> <p>Załadujmy główny plik naszych bloków w <code>functions.php</code> naszego tematu:</p> <pre name="code"> if (function_exists ('register_block_type')) wymaga get_template_directory (). '/blocks/series.php'; </pre> <p>Zwróć uwagę, że ładujemy plik z warunkowym. To zapewnia <strong>zgodność z poprzednią wersją WordPress, którą nasz blok jest ładowany tylko wtedy, gdy Gutenberg jest obecny</strong>. Nasz blok powinien być teraz dostępny w interfejsie Gutenberga.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Tak to wygląda, gdy wstawiamy blok.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg API</h3> <p>Gutenberg wprowadza dwa zestawy API do rejestracji nowego bloku. Jeśli spojrzymy na <code>series.php</code>, znajdziemy następujący kod, który rejestruje nasz nowy blok. To także <strong>ładuje arkusz stylów i JavaScripts na front-end i edytor</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>Jak widzimy powyżej, nasz Blok ma nazwę <code>dwadzieścia lat / seria</code>, nazwa bloku musi być unikalna i opatrzona nazwami, aby uniknąć kolizji z innymi blokami przynoszonymi przez inne wtyczki.</p> <p>Ponadto, <strong>Gutenberg zapewnia zestaw nowych interfejsów API JavaScript do interakcji z “Blok” berło</strong> w edytorze. Ponieważ interfejs API jest dość bogaty, skupimy się na pewnych szczegółach, które, jak sądzę, powinieneś wiedzieć, aby uzyskać prosty, ale funkcjonujący blok Gutenberga.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Po pierwsze, będziemy się przyglądać <code>wp.blocks.registerBlockType</code>. Ta funkcja jest używana <strong>zarejestruj nowy “Blok” do edytora Gutenberga</strong>. Wymaga dwóch argumentów. Pierwszym argumentem jest nazwa bloku, która powinna następować po nazwie zarejestrowanej w <code>register_block_type</code> funkcja po stronie PHP. Drugi argument to <strong>Obiekt definiujący właściwości bloku</strong> jak tytuł, kategoria i kilka funkcji do renderowania interfejsu Blok.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategoria: 'widgets', słowa kluczowe: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Ta funkcja pozwala utworzyć element wewnątrz “Blok” w edytorze postów. The <code>wp.element.createElement</code> funkcja jest zasadniczo abstrakcją Reakcji <code>createElement ()</code> funkcja przyjmuje ten sam zestaw argumentów. Pierwszy argument przyjmuje typ elementu, na przykład akapit, a <code>przęsło</code>, lub a <code>div</code> jak pokazano niżej:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Możemy <strong>alias funkcji do zmiennej</strong> więc pisanie jest krótsze. Na przykład:</p> <pre name="code"> var el = wp.element.createElement; el („div”);</pre> <p>Jeśli ty <strong>preferuj używanie nowej składni ES6</strong>, możesz to zrobić w ten sposób:</p> <pre name="code"> const createElement: el = wp.element; el („div”);</pre> <p>Możemy także <strong>dodaj atrybuty elementu</strong> tak jak <code>klasa</code> nazwa lub <code>ID</code> w drugim parametrze w następujący sposób:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>The <code>div</code> to, co stworzyliśmy, nie miałoby sensu bez treści. Możemy <strong>dodaj treść do argumentu trzeciego parametru</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Ten artykuł jest częścią naszej serii samouczków HTML5 / CSS3 aby pomóc ci stać się lepszym projektantem i / lub deweloperem Kliknij tutaj, aby zobaczyć więcej artykułów z tej samej serii ');</pre> <h4><code>wp.components</code></h4> <p>The <code>wp.components</code> zawierają zbiór, jak sama nazwa wskazuje, komponentów Gutenberga. Komponenty te są technicznie komponentami React zawierającymi Button, Popover, Spinner, podpowiedź i grupę innych. Możemy <strong>używaj ponownie tych komponentów w naszym własnym bloku</strong>. W poniższym przykładzie dodajemy składnik przycisku.</p> <pre name="code"> var Button = wp.components.Button; el (Przycisk, 'class': 'przycisk pobierania',, 'Pobierz');</pre> <h4>Atrybuty</h4> <p>Atrybuty to sposób przechowywania danych w naszym bloku, dane te mogą być takie jak treść, kolory, wyrównania, URL itp. Możemy przekazać atrybuty z właściwości przekazanych <code>edytować()</code> funkcja w następujący sposób:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', treść); </pre> <p>Aby zaktualizować atrybuty, używamy <code>setAttributes ()</code> funkcjonować. Zazwyczaj zmienilibyśmy zawartość pewnych działań, np. Po kliknięciu przycisku, wypełnieniu wejścia, wybraniu opcji itp. W poniższym przykładzie używamy go do dodania <strong>powrócić</strong> zawartość naszego bloku na wypadek, gdyby coś nieoczekiwanego stało się naszym <code>seriesContent</code> Atrybut.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Oto zawartość rezerwowa.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', treść),]; </pre> <h4>Zapisywanie bloku</h4> <p>The <code>zapisać()</code> funkcja działa podobnie jak <code>edytować()</code>, z wyjątkiem tego, że definiuje zawartość naszego bloku, aby zapisać go w bazie danych postów. Zapisywanie zawartości bloku jest dość proste, jak widzimy poniżej:</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', treść),]; </pre> <h3>Co dalej?</h3> <p>Gutenberg zmieni ekosystem WordPress na lepsze (a może nawet gorzej). Umożliwia programistom <strong>przyjąć nowy sposób tworzenia wtyczek i motywów WordPress</strong>. Gutenberg to tylko początek. Wkrótce “Blok” paradygmat zostanie rozszerzony na inne obszary WordPress, takie jak ustawienia API i widżety.</p> <p>Dowiedz się JavaScript głęboko; to jedyny sposób, aby dostać się do Gutenberga i pozostać w zgodzie z przyszłością w branży WordPress. Jeśli znasz już podstawy JavaScript, dziwactwa, funkcje, narzędzia, towary i zło, jestem naprawdę pewien, że poradzisz sobie z Gutenbergiem.</p> <p>Jak już wspomniałem, Gutenberg obnaża mnóstwo interfejsów API, wystarczających, by zrobić prawie wszystko w swoim bloku. Możesz wybrać, czy chcesz <strong>koduj swój blok zwykłym starym JavaScriptem, JavaScript ze składnią ES6, React, a nawet Vue</strong>.</p> <h4>Pomysły i inspiracje</h4> <p>Stworzyłem bardzo (bardzo) prosty blok Gutenberga, który można znaleźć w repozytorium naszego konta Github. Ponadto stworzyłem wiele repozytoriów, z których możesz czerpać inspirację do budowania bardziej złożonego bloku.</p> <ul><li>Gutenblocks - Kolekcja bloków Mathieu Viet napisana w JavaScript ze składnią ES5</li> <li>Jetpack Gutenblocks Project - kolekcja bloków w pakiecie Jetpack</li> <li>Lista przykładów wdrożenia Gutenberga, w tym z Vue.js</li> </ul><h3>Dalsze informacje</h3> <ul><li>Oficjalne repozytorium Gutenberga</li> <li>Podręcznik Gutenberga</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">Zhakuj tabelę o braku IKEA w stojak na komponenty</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 stara klawiatura do tworzenia niestandardowego interfejsu sterowania</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">Przewodnik po Menedżerze zadań systemu Windows 10 - część 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">Następny artykuł</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">Złap latarkę za 10 USD w Ultra-jasne Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Poprzedni artykuł</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">Przewodnik po Menedżerze zadań systemu Windows 10 - Część 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"> Przydatne informacje i wskazówki dotyczące tworzenia stron internetowych. Programowanie, projektowanie stron internetowych, CSS, HTML, JAVASCRIPT. Skonfiguruj i zainstaluj ponownie WINDOWS. Tworzenie witryn i aplikacji od podstaw. </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>