Gutenberg Všetko, čo potrebujete vedieť o najnovšom editore WordPress
Gutenberg je nový editor pre WordPress, ktorý bude úplne nahradiť aktuálny editor TinyMCE. Je to ambiciózny projekt, ktorý pravdepodobne zmení WordPress mnohými spôsobmi a bude mať vplyv na pravidelných koncových používateľov a vývojárov, konkrétne na tých, ktorí sú závislí na obrazovke editora pre prácu na WordPress. Tu je, ako to vyzerá.
Gutenberg tiež zavádza novú paradigmu v programe WordPress nazvanom “blok”.
“blok” je abstraktný termín používaný na opis jednotiek značkovania ktoré sa skladajú z obsahu alebo rozloženia webovej stránky. Myšlienka kombinuje pojmy toho, čo v dnešnom WordPress sme dosiahli skrátených kópií, vlastného kódu HTML a integráciu do jediného konzistentného rozhrania API a skúsenosti používateľov.
Nastavenie projektu
S vedomím, že Gutenberg je postavený na vrchole React, niektorí vývojári sa obávajú, že bariéra je príliš vysoká pre začínajúcich developerov pre rozvoj Gutenbergu.
Nastavenie React.js môže byť dosť časovo náročné a mätúce, ak ste s tým začali. Budete potrebovať aspoň JSX transformátor, Babel, v závislosti od vášho kódu budete potrebovať nejaké Babel pluginy a Bundler ako Webpack, Rollup alebo Parcel.
našťastie, niektorí ľudia v komunite WordPress sa zintenzívnili a snažia sa, aby sa Gutenberg stal čo najjednoduchším, aby ho každý mohol sledovať. Dnes máme nástroj, ktorý vytvorí Gutenbergovu kotlinu tak môžeme začať písať kód hneď namiesto toho, aby ste sa oboznámili s nástrojmi a konfiguráciami.
Vytvorte Guten Block
vytvoriť-Guten-blok je iniciovaný projekt od Ahmada Awaisa. Je to sada nástrojov s nulovou konfiguráciou (# 0CJS), ktoré vám umožnia vytvoriť Gutenbergovu bloku s niekoľkými prednastavenými modernými stackami vrátane React, Webpack, ESNext, Babel, ESLint a Sass. Postupujte podľa pokynov a začnite s funkciou Vytvoriť Guten Block.
Pomocou ES5 (ECMAScript 5)
Použitie všetkých týchto nástrojov na vytvorenie jednoduchého “ahoj-world” blok sa môže zdať príliš veľa. Ak máte záujem udržať svoje stohy naklonené, môžete skutočne vytvoriť gutenbergský blok pomocou jednoduchého dobrého ol 'ECMAScript 5, s ktorým by ste už mali oboznámenie. Ak máte WP-CLI 1.5.0 nainštalovaný v počítači, môžete jednoducho spustiť ...
wp lešenia[--Title = ] [--dashicon =<dashicon>] [--kategória =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>... do <strong>vygenerujte Gutenbergov blok bloku do doplnku alebo témy</strong>. Tento prístup je oveľa rozumnejší, najmä pre existujúce zásuvné moduly a motívy, ktoré ste vytvorili pred Gutenbergovu éru.</p> <p>Namiesto vytvorenia nového doplnku na prispôsobenie blokov Gutenberg by ste mohli chcieť integrovať bloky do vašich pluginov alebo tém. A aby sa tento návod ľahko sledoval pre každého, <strong>budeme používať ECMAScript 5 s WP-CLI</strong>.</p> <h4>Registrácia nového bloku</h4> <p>Gutenberg je v súčasnosti vyvinutý ako plugin a bude zlúčený s aplikáciou WordPress 5.0 vždy, keď tím bude mať pocit, že je pripravený. Takže zatiaľ budete musieť ho nainštalovať z <strong>Stránka Pluginy v <code>wp-admin</code></strong>. Keď ho nainštalujete a aktivujete, spustite nasledujúci príkaz v termináli alebo v príkazovom riadku, ak používate stroj so systémom Windows.</p> <pre name="code"> séria sádrového bloku wp série - title = "Séria HTML5" - téma</pre> <p>Tento príkaz vygeneruje blok na aktuálne aktívnu tému. Náš blok sa bude skladať z nasledujúcich súborov:</p> <pre name="code"> . â ??  ?? â ??  ?? â ??  ?? séria â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? block.js â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? editor.css â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? series.php </pre> <p>Načítať hlavný súbor našich blokov do priečinka <code>functions.php</code> našej témy:</p> <pre name="code"> ak (function_exists ('register_block_type')) vyžadujú get_template_directory (). '/Blocks/series.php'; </pre> <p>Všimnite si, že zatvorenie súboru uzavrieme s podmieneným. To zaisťuje <strong>kompatibilita s predchádzajúcou verziou WordPress, že náš blok je načítaný len vtedy, keď je prítomný Gutenberg</strong>. Náš blok by teraz mal byť k dispozícii v rámci Gutenbergovho rozhrania.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Ako to vyzerá pri vkladaní bloku.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>API Gutenberg</h3> <p>Gutenberg zavádza dve sady rozhraní API na registráciu nového bloku. Ak sa pozrieme na <code>series.php</code>, nájdeme nasledujúci kód, ktorý zaregistruje náš nový blok. To tiež <strong>načíta štýl a jazyk JavaScript na front-end a editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor';</pre> <p>Ako môžeme vidieť vyššie, náš blok je pomenovaný <code>twentyseventeen / series</code>, názov bloku musí byť jedinečný a menný, aby sa zabránilo kolíziám s ostatnými blokmi, ktoré prinášajú ostatné doplnky.</p> <p>okrem toho, <strong>Gutenberg poskytuje súbor nových rozhraní API jazyka JavaScript, ktoré komunikujú s “blok” rozhranie</strong> v editore. Vzhľadom k tomu, že rozhranie API je pomerne hojné, budeme sa zameriavať na niektoré špecifiká, ktoré by podľa mňa mali byť jednoduché, ale fungujúce Gutenberg Block.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Najprv sa budeme zaoberať <code>wp.blocks.registerBlockType</code>. Táto funkcia sa používa na <strong>zaregistrovať nový “blok” na Gutenbergovu redakciu</strong>. Vyžaduje to dva argumenty. Prvým argumentom je názov bloku, ktorý by mal nasledovať po názve zaregistrovanom v priečinku <code>register_block_type</code> funkcia na strane PHP. Druhým argumentom je <strong>Objekt definujúci vlastnosti bloku</strong> ako je názov, kategória a niekoľko funkcií na vykreslenie rozhrania bloku.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('Séria HTML5'), kategória: 'widgets', kľúčové slová: ['html'], edit: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Táto funkcia umožňuje vytvoriť prvok v rámci “blok” v príspevkovom editore. <code>wp.element.createElement</code> funkcia je v podstate abstrakciou Reactu <code>createElement ()</code> tak akceptuje rovnaký súbor argumentov. Prvým argumentom je typ prvku, napríklad odsek, a <code>rozpätie</code>, alebo a <code>div</code> ako je uvedené nižšie:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Môžeme <strong>alias funkcie do premennej</strong> preto je kratšie písať. Napríklad:</p> <pre name="code"> var el = wp.element.createElement; el ( 'div');</pre> <p>Ak ty <strong>uprednostňuje použitie novej syntaxe ES6</strong>, môžete tak urobiť aj takto:</p> <pre name="code"> konst createElement: el = wp.element; el ( 'div');</pre> <p>Môžeme tiež <strong>pridajte atribúty prvkov</strong> ako <code>trieda</code> názov alebo <code>id</code> na druhý parameter takto:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'trieda': 'séria-html5', 'id': 'séria-html-post-id-001');</pre> <p> <code>div</code> ktoré sme vytvorili, by bez obsahu nemalo zmysel. Môžeme <strong>pridajte obsah do argumentu tretieho parametra</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'sériový-html-post-id-001', Tento článok je súčasťou našej série "HTML5 / CSS3 Tutorials" aby ste sa stali lepším dizajnérom a / alebo vývojárom. Kliknite sem a uvidíte ďalšie články z tej istej série ");</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> obsahujú zbierku komponentov Gutenberg, ako to naznačuje názov. Tieto komponenty sú z technického hľadiska reaktívne vlastné súčasti, ktoré obsahujú tlačidlo Button, Popover, Spinner, Tooltip a veľa ďalších. Môžeme <strong>znovu použite tieto komponenty do nášho vlastného bloku</strong>. V nasledujúcom príklade pridáme komponent tlačidla.</p> <pre name="code"> var Button = wp.components.Button; el (Tlačidlo, 'class': 'download-button',, 'Download');</pre> <h4>atribúty</h4> <p>Atribúty sú spôsoby ukladania údajov do nášho bloku, tieto údaje môžu byť podobné obsahu, farbám, zarovnanosti, adrese URL atď. Môžeme získať atribúty z vlastností odovzdaných na <code>Upraviť ()</code> funkcie:</p> <pre name="code"> upraviť: funkcia (rekvizity) var content = props.attributes.seriesContent; návrat el ('div', 'trieda': 'séria-html5', 'id': 'séria-html-post-id-001', obsah); </pre> <p>Ak chcete aktualizovať atribúty, použijeme <code>setAttributes ()</code> Funkcie. Zvyčajne by sme obsah zmenili na určitú akciu, napríklad pri kliknutí na tlačidlo, vloženie je vyplnené, je vybratá možnosť atď. V nasledujúcom príklade ho používame na pridanie <strong>fallback</strong> obsah nášho bloku v prípade, že sa nám stalo niečo neočakávané <code>seriesContent</code> atribút.</p> <pre name="code"> editovať: funkcia (rekvizity) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute contentContent: 'Hello World! ) var content = props.attributes.seriesContent; návrat [el ('div', 'trieda': 'séria-html5', 'id': 'séria-html-post-id-001'; </pre> <h4>Uloženie bloku</h4> <p> <code>save ()</code> funkcia funguje podobne ako <code>Upraviť ()</code>, okrem toho, že definuje obsah nášho bloku na uloženie do databázy príspevkov. Ukladanie obsahu bloku je úplne jednoduché, ako vidíme nižšie:</p> <pre name="code"> uložiť: funkcia (rekvizity) if (! props ||! props.attributes.seriesContent) návrat; var content = props.attributes.seriesContent; návrat [el ('div', 'trieda': 'séria-html5', 'id': 'séria-html-post-id-001'; </pre> <h3>Čo bude ďalej?</h3> <p>Gutenberg zmení ekosystém WordPress k lepšiemu (prípadne horšiemu). Umožňuje vývojárom <strong>prijať nový spôsob vývoja pluginov a tém WordPress</strong>. Gutenberg je len začiatok. Čoskoro “blok” paradigma bude rozšírená aj na iné oblasti aplikácie WordPress, ako sú API nastavenia a miniaplikácie.</p> <p>Naučte JavaScript v hĺbke; je to jediný spôsob, ako sa dostať do Gutenbergu a zostať relevantné pre budúcnosť v odvetví WordPress. Ak ste už oboznámení so základnými informáciami jazyka JavaScript, s kvízmi, funkciami, nástrojmi, tovarom a bajtami, som si istý, že sa s Gutenbergom stanete rýchlosťou.</p> <p>Ako už bolo spomenuté, Gutenberg odhaľuje množstvo API, čo je dosť na to, aby ste urobili takmer čokoľvek do vášho bloku. Môžete si vybrať, či chcete <strong>kód svojho bloku pomocou jednoduchého starého jazyka JavaScript, JavaScript s syntaxou ES6, React alebo dokonca Vue</strong>.</p> <h4>Nápady a inšpirácie</h4> <p>Vytvoril som veľmi (veľmi) jednoduchý Gutenberg Block, ktorý nájdete v úložisku nášho účtu Github. Okrem toho som tiež dal dohromady niekoľko repozitárov, z ktorých môžete inšpirovať budovanie komplexnejších blokov.</p> <ul><li>Gutenblocks - zbierka blokov od Mathieu Viet napísaná v jazyku JavaScript s syntaxou ES5</li> <li>Projekt Jetpack Gutenblocks - zbierka blokov v balíku Jetpack</li> <li>Zoznam príkladov implementácie programu Gutenberg vrátane programu Vue.js</li> </ul><h3>Ďalšie odkazy</h3> <ul><li>Gutenberg Úradné úložisko</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">Zablokujte tabuľku s nedostatkom IKEA do komponentného zásobníka</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 Oddeľte starú klávesnicu na vytvorenie vlastného ovládacieho rozhrania</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">Sprievodca správcom úloh systému Windows 10 - časť 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">Ďalší článok</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 baterku do ultra-jasný Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Predchádzajúci článok</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">Sprievodca správcom úloh systému Windows 10 - časť 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"> Užitočné informácie a tipy na vývoj webových aplikácií. Programovanie, webdesign, CSS, HTML, JAVASCRIPT. Nakonfigurujte a preinštalujte Windows. Tvorba webov a aplikácií od nuly. </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>