Gutenberg Minden, amit tudnia kell a WordPress-ről
Gutenberg egy új szerkesztő a WordPress számára, amely teljesen cserélje ki az aktuális TinyMCE-meghajtású szerkesztőt. Ez egy ambiciózus projekt, amely vitathatatlanul megváltoztatja a WordPress-et, és mind a rendszeres végfelhasználókat, mind a fejlesztőket érinti, különös tekintettel azokra, akik a WordPressen dolgozó szerkesztőképernyőtől függenek. Itt van, hogyan néz ki.
Gutenberg új paradigmát is bemutat a WordPressben “Blokk”.
“Blokk” az elvont kifejezést használjuk mértékegység amelyek egy weboldal tartalmát vagy elrendezését alkotják. Az ötlet ötvözi azokat a fogalmakat, amelyeket a WordPress ma elértünk rövid kódokat, egyéni HTML-kódokat és egy felfedezés beágyazását egyetlen egységes API-ba és felhasználói élmény.
A projekt beállítása
Tudva, hogy Gutenberg épül a React tetején, néhány fejlesztő aggódik, hogy a túl magas a belépő szintű fejlesztők számára a Gutenberg fejlesztéséhez.
A React.js üzembe helyezése elég időigényes és zavaró lehet, ha éppen elkezdené vele. Legalább szüksége lesz a JSX transzformátorra, a Babelre, attól függően, hogy a kódjától függően szükség lehet néhány Babel bővítményre és egy Bundlerre, mint például a Webpack, Rollup vagy Parcel.
szerencsére, néhány ember a WordPress közösségen belül felgyorsult és igyekeznek a Gutenberg fejlesztését a lehető legegyszerűbben mindenki számára követni. Ma van egy olyan eszközünk, amely egy Gutenberg-főtáblát hoz létre azonnal elkezdhetjük a kód írását a szerszámok és a konfigurációk helyett.
Guten blokk létrehozása
A create-Guten-block Ahmad Awais kezdeményező projektje. Ez egy nulla konfigurációs szerszámkészlet (# 0CJS), amely lehetővé teszi a Gutenberg-blokk kialakítását néhány korszerű, előre beállított köteggel, például React, Webpack, ESNext, Babel, ESLint és Sass. Kövesse az utasításokat a Guten blokk létrehozásához.
Az ES5 használata (ECMAScript 5)
Mindezen eszközök használata egyszerű létrehozásához “Helló Világ” a blokk túl soknak tűnhet. Ha szeretné megtartani a halmozott lapokat, valójában egy Gutenberg-blokkot készíthet, ha egy egyszerű, egyszerű ECMAScript 5-et használ, amelyet már ismerhet. Ha van A számítógépre telepített WP-CLI 1.5.0, egyszerűen futhatsz ...
wp állványblokk[--Title = ] [--dashicon =<dashicon>] [- kategória =<category>] [--theme] [--plugin =<plugin>] [--erő]</pre> <p>… nak nek <strong>generálja a Gutenberg blokk boilerplate-t a bővítményéhez vagy a témához</strong>. Ez a megközelítés ésszerűbb, különösen a Gutenberg-korszak előtt kifejlesztett meglévő bővítmények és témák esetében.</p> <p>Ahelyett, hogy új plugint hozna létre a Gutenberg blokkok befogadására, érdemes lehet a blokkokat beépíteni a bővítményeivel vagy a témákkal. És hogy ez a bemutató mindenki számára könnyen követhető legyen, <strong>az ECMAScript 5-öt WP-CLI-vel fogjuk használni</strong>.</p> <h4>Új blokk regisztrálása</h4> <p>A Gutenberg jelenleg bővítményként van kifejlesztve, és összeolvad a WordPress 5.0-ba, amikor a csapat úgy érzi, készen áll. Tehát egyelőre telepítenie kell azt a <strong>Bővítmények oldala <code>wp-admin</code></strong>. Miután telepítette és aktiválta, futtassa a következő parancsot a terminálon vagy a parancssorban, ha Windows-gépen van.</p> <pre name="code"> wp scaffold blokk sorozat --title = "HTML5 Series" - a téma</pre> <p>Ez a parancs létrehoz egy blokkot az aktuálisan aktív témához. Blokkunk a következő fájlokból áll:</p> <pre name="code"> . â ??  ?? â¢Â ??  ?? â¢Â ??  ?? sorozat â       à ¢ ??  ?? â¢Â ??  ?? â¢Â ??  ?? block.js â       à ¢ ??  ?? â¢Â ??  ?? â¢Â ??  ?? editor.css â       à ¢ ??  ?? â¢Â ??  ?? â¢Â ??  ?? style.css â ??  ?? â¢Â ??  ?? â¢Â ??  ?? series.php </pre> <p>Töltsük be a blokkok fő fájlját a <code>functions.php</code> témánk:</p> <pre name="code"> if (function_exists ('register_block_type')) szükséges get_template_directory (). '/Blocks/series.php'; </pre> <p>Figyeljük meg, hogy a fájl betöltését feltételes feltételekkel csatoljuk. Ez biztosítja <strong>kompatibilitás a korábbi WordPress verzióval, hogy blokkunk csak akkor töltődik be, amikor Gutenberg jelen van</strong>. A blokkunknak most elérhetőnek kell lennie a Gutenberg felületen.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Így néz ki, amikor behelyezzük a blokkot.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg API-k</h3> <p>Gutenberg két API-t vezet be új blokk regisztrálásához. Ha megnézzük a <code>series.php</code>, megtaláljuk a következő kódot, amely regisztrálja az új blokkunkat. Az is <strong>betölti a stíluslapot és a JavaScripteket az előlapon és a szerkesztőn</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', tömb ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Ahogy fent láthatjuk, a blokkunk neve <code>twentyseventeen / sorozat</code>, a blokk nevének egyedinek kell lennie, és el kell látnia a névtáblákat, hogy elkerülje az ütközést a többi blokk által a többi blokkkal.</p> <p>Továbbá, <strong>A Gutenberg új JavaScript API-kat kínál, amelyekkel együttműködhet a “Blokk” felület</strong> a szerkesztőben. Mivel az API eléggé bőséges, néhány olyan sajátosságra fogunk összpontosítani, amelyekről úgy vélem, tudnod kell, hogy egy egyszerű, mégis működő Gutenberg blokkot kapsz.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Először is meg fogjuk vizsgálni <code>wp.blocks.registerBlockType</code>. Ezt a funkciót használják <strong>regisztráljon “Blokk” a Gutenberg-szerkesztőhöz</strong>. Két érvre van szükség. Az első érv az a blokk neve, amelyet követnie kell a névben regisztrált névnek <code>register_block_type</code> funkció a PHP oldalán. A második érv egy <strong>A blokk tulajdonságait meghatározó objektum</strong> mint a cím, kategória és néhány funkció a Blokk interfész megjelenítéséhez.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 sorozat'), kategória: "widgetek", kulcsszavak: ['html'], szerkesztés: funkció (kellékek) , mentés: funkció (kellékek) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Ez a funkció lehetővé teszi, hogy az elemet a “Blokk” a szerkesztőben. A <code>wp.element.createElement</code> A függvény alapvetően a Reagencia absztrakciója <code>createElement ()</code> funkcióval, ezért elfogadja ugyanazokat az érveket. Az első argumentum az elem típusát, például egy bekezdést vesz fel, a <code>arasz</code>, vagy a <code>div</code> az alábbiak szerint:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Tudunk <strong>varázsolja a függvényt változóvá</strong> így rövidebb írni. Például:</p> <pre name="code"> var el = wp.element.createElement; El ( 'div');</pre> <p>Ha te <strong>előnyben részesíti az új ES6 szintaxist</strong>, így is megteheti:</p> <pre name="code"> const createElement: el = wp.element; El ( 'div');</pre> <p>Mi is <strong>adja hozzá az elem attribútumokat</strong> mint például a <code>osztály</code> név vagy <code>id</code> a második paraméterre az alábbiak szerint:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'));</pre> <p>A <code>div</code> a létrehozott tartalom nem lenne értelme a tartalom nélkül. Tudunk <strong>adja hozzá a tartalmat a harmadik paraméter argumentumához</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001'), 'Ez a cikk a "HTML5 / CSS3 oktatóanyagok sorozatának" része - dedikált a jobb tervező és / vagy fejlesztő létrehozásához kattintson ide, ha több cikket szeretne látni ugyanabból a sorozatból ”);</pre> <h4><code>wp.components</code></h4> <p>A <code>wp.components</code> a Gutenberg komponensek gyűjteménye, amint azt a neve is jelzi. Ezek az összetevők technikailag React egyéni összetevők, amelyek magukban foglalják a Button, Popover, Spinner, Tooltip és egy csomó mást. Tudunk <strong>ezeket az összetevőket újra felhasználhatja saját blokkunkba</strong>. A következő példában egy gombelemet adunk hozzá.</p> <pre name="code"> var Button = wp.components.Button; el (Gomb, 'class': 'download-button', ►, 'Download');</pre> <h4>attribútumok</h4> <p>Az attribútumok az adatok tárolásának módja a blokkban, ezek az adatok lehetnek például a tartalom, a színek, az igazítások, az URL-cím stb. <code>szerkesztés ()</code> funkció:</p> <pre name="code"> szerkesztés: funkció (kellékek) var content = props.attributes.seriesContent; vissza el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), tartalom); </pre> <p>Az attribútumok frissítéséhez a <code>setAttributes ()</code> funkció. Jellemzően bizonyos műveletek tartalmát megváltoztatjuk, például ha egy gombot rákattintunk, egy bemenetet betöltünk, egy opciót választunk, stb. A következő példában egy <strong>üzemszüneti</strong> blokk tartalmával, ha valami váratlan történt <code>seriesContent</code> Tulajdonság.</p> <pre name="code"> szerkesztés: függvény (kellékek) if (type.supports.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Itt van a tartalék tartalom.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), tartalom),]; </pre> <h4>A blokk mentése</h4> <p>A <code>mentés()</code> funkció hasonlóan működik <code>szerkesztés ()</code>, kivéve, hogy meghatározza a blokk tartalmát, hogy elmentse a postai adatbázisba. A blokk tartalma mentése meglehetősen egyszerű, ahogy az alábbiakban láthatjuk:</p> <pre name="code"> mentés: funkció (kellékek) if (! kellékek ||! props.attributes.seriesContent) visszatér; var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), tartalom),]; </pre> <h3>Mi a következő lépés?</h3> <p>Gutenberg megváltoztatja a WordPress ökoszisztémáját a jobbra (vagy esetleg rosszabbra). Lehetővé teszi a fejlesztők számára <strong>fogadjon el egy új módszert a WordPress bővítmények és témák fejlesztésére</strong>. Gutenberg csak egy kezdet. Hamarosan a “Blokk” A paradigmát a WordPress más területeire is kiterjeszti, például a Beállítások API-kat és a Widgeteket.</p> <p>Ismerje meg a JavaScriptet mélyen; ez az egyetlen módja, hogy bejuthasson Gutenbergbe és maradjon releváns a jövő szempontjából a WordPress iparágban. Ha már ismeri a JavaScript alapjait, a quirks-eket, a funkciókat, az eszközöket, az árukat és a rosszokat, nagyon biztos vagyok benne, hogy felgyorsul Gutenberg-szel.</p> <p>Mint már említettük, Gutenberg rengeteg API-t tesz ki, ami elég ahhoz, hogy szinte bármit tegyen a blokkjára. Kiválaszthatja, hogy <strong>kódolja a blokkját egy egyszerű régi JavaScript-szel, JavaScript-rel ES6 szintaxissal, React vagy Vue</strong>.</p> <h4>Ötletek és inspirációk</h4> <p>Létrehoztam egy nagyon (nagyon) egyszerű Gutenberg-blokkot, amely megtalálható a Github-fiókunk tárolójában. Továbbá számos tárolót is összeállítottam, ahonnan bonyolultabb blokk építésével inspirálhatsz.</p> <ul><li>Gutenblocks - A Mathieu Viet blokkok gyűjteménye, melyet JavaScript-ben írtak az ES5 szintaxisával</li> <li>Jetpack Gutenblocks Project - a Jetpack-ba csomagolt blokkok gyűjteménye</li> <li>A Gutenberg implementáció példáinak listája, beleértve a Vue.js-ot is</li> </ul><h3>További információk</h3> <ul><li>Gutenberg hivatalos tárolója</li> <li>Gutenberg kézikönyv</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">Hackeljen egy IKEA hiányzó táblát egy komponens rackbe</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 egy régi billentyűzet az egyéni vezérlő interfész létrehozásához</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">Útmutató a Windows 10 Task Managerhez - II. Rész</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">Következő cikk</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 egy 10 dolláros zseblámpát egy rendkívül fényes Premium One-ba</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Korábbi cikk</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">Útmutató a Windows 10 Task Managerhez - III. Rész</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"> Hasznos információk és webfejlesztési tippek. Programozás, webdesign, CSS, HTML, JAVASCRIPT. Konfigurálja és telepítse újra a WINDOWS szoftvert. Webhelyek és alkalmazások létrehozása a semmiből. </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>