Гутенберг Све што требате знати о ВордПресс-у 'Латест Едитор
Гутенберг је нови уредник за ВордПресс који ће потпуно замените тренутни ТиниМЦЕ уређивач. То је амбициозан пројекат који ће вероватно променити ВордПресс на много начина и утицати на редовне крајње кориснике и програмере, посебно оне који зависе од екрана за уређивање за рад на ВордПресс-у. Ево како то изгледа.
Гутенберг такође представља нову парадигму у ВордПресс-у “Блокирати”.
“Блокирати” је апстрактни термин који се користи за описивање јединице маркупа који су састављени од садржаја или изгледа веб странице. Идеја комбинује концепте онога што у ВордПресс-у данас остварујемо кратки кодови, прилагођени ХТМЛ и уграђивање открића у један конзистентан АПИ и корисничко искуство.
Постављање пројекта
Знајући чињеницу да је Гутенберг изграђен на врху Реацт-а, неки програмери су забринути да ће преграда је превисока за почетнике у развоју за развој Гутенберга.
Подешавање Реацт.јс може бити прилично дуготрајно и збуњујуће ако сте тек почели са њим. Требаће вам барем ЈСКС трансформатор, Бабел, у зависности од вашег кода можда ће вам требати Бабел плугинс, и Бундлер као што је Вебпацк, Роллуп или Парцел.
срећом, неки људи унутар ВордПресс заједнице су се појачали и покушавају да учине да Гутенберг буде што лакши за свакога. Данас имамо алат који ће тако генерисати Гутенбергов предложак можемо одмах почети писати код уместо да се збуњују алатима и конфигурацијама.
Направите блок Гутен
Тхе цреате-гутен-блоцк је иницирани пројекат Ахмада Аваиса. То је Сет алата нулте конфигурације (# 0ЦЈС) који ће вам омогућити да развијете Гутенберг блок са неким модерним стацковима, укључујући Реацт, Вебпацк, ЕСНект, Бабел, ЕСЛинт и Сасс. Пратите упутства да бисте започели са Цреате Гутен Блоцк.
Коришћење ЕС5 (ЕЦМАСцрипт 5)
Користећи све ове алате за креирање једноставног “Здраво Свете” блок може изгледати превише. Ако волите да држите своје гомиле на леђима, заправо можете да развијете Гутенберг блок користећи обичан добар ЕЦМАСцрипт 5 с којим сте можда већ упознати. Ако имате ВП-ЦЛИ 1.5.0 инсталиран на вашем рачунару, можете једноставно да покренете ...
вп сцаффолд блоцк[--титле = ] [--дасхицон =<dashicon>] [--цатегори =<category>] [--тхеме] [--плугин =<plugin>] [--сила]</pre> <p>… до <strong>генеришете Гутенберг блок блока за ваш плугин или тему</strong>. Овај приступ је разумнији, посебно за постојеће додатке и теме које сте развили прије Гутенберг ере.</p> <p>Уместо креирања новог додатка за смештај Гутенберг блокова, можда ћете желети да интегришете блокове у ваше додатке или теме. И како би овај водич био лак за свакога, <strong>користићемо ЕЦМАСцрипт 5 са ВП-ЦЛИ</strong>.</p> <h4>Регистровање новог блока</h4> <p>Гутенберг је тренутно развијен као додатак и биће спојен са ВордПресс 5.0 кад год тим буде мислио да је спреман. Дакле, за сада ћете морати да га инсталирате <strong>Страница додатака у <code>вп-админ</code></strong>. Када га инсталирате и активирате, покрените следећу команду у терминалу или командној линији ако сте на Виндовс машини.</p> <pre name="code"> вп сцаффолд блоцк сериес --титле = "ХТМЛ5 Сериес" - теми</pre> <p>Ова команда ће генерисати блок на тренутно активну тему. Наш блок ће се састојати од следећих датотека:</p> <pre name="code"> . А¢А ?? А ?? А¢А ?? А ?? А¢А ?? А ?? сериес А¢А ?? А'А'А А'А А¢А ?? А ?? А¢А ?? А ?? А¢А ?? А ?? блоцк.јс А¢А ?? А'А'А А'А А¢А ?? А ?? А¢А ?? А ?? А¢А ?? А ?? едитор.цсс А¢А ?? А'А'А А'А А¢А ?? А ?? А¢А ?? А ?? А¢А ?? А ?? стиле.цсс А¢А ?? А ?? А¢А ?? А ?? А¢А ?? А ?? сериес.пхп </pre> <p>Учитајмо главни фајл наших блокова у <code>фунцтионс.пхп</code> наше теме:</p> <pre name="code"> иф (фунцтион_екистс ('регистер_блоцк_типе')) захтијевает гет_темплате_дирецтори (). '/блоцкс/сериес.пхп'; </pre> <p>Обратите пажњу да смо учитали фајл са условним. То осигурава <strong>компатибилност са претходном верзијом ВордПресс-а да је наш блок учитан само када је Гутенберг присутан</strong>. Наш блок би сада требао бити доступан унутар Гутенберг интерфејса.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Овако изгледа када убацимо блок.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Гутенберг АПИ</h3> <p>Гутенберг уводи два сета АПИ-ја за регистрацију новог блока. Ако погледамо <code>сериес.пхп</code>, наћи ћемо следећи код који региструје наш нови блок. Такође <strong>учитава стилове и ЈаваСцрипт на фронт-енд и едитор</strong>.</p> <pre name="code">регистер_блоцк_типе ('твентисевентеен / сериес', арраи ('едитор_сцрипт' => 'сериес-блоцк-едитор', 'едитор_стиле' => 'сериес-блоцк-едитор', 'стиле' => 'сериес-блоцк',));</pre> <p>Као што можемо видети горе, наш блок је именован <code>твентисевентеен / сериес</code>, Име блока мора бити јединствено и просторно да би се избегао судар са другим блоковима које доносе други додаци.</p> <p>у наставку, <strong>Гутенберг обезбеђује скуп нових ЈаваСцрипт АПИ-ја за интеракцију са “Блокирати” интерфејс</strong> у едитору. Пошто је АПИ прилично обилан, фокусират ћемо се на неке специфичности за које мислим да бисте требали знати да бисте добили једноставан, али функционалан Гутенберг блок.</p> <h4><code>вп.блоцкс.регистерБлоцкТипе</code></h4> <p>Прво ћемо истражити <code>вп.блоцкс.регистерБлоцкТипе</code>. Ова функција се користи <strong>региструјте ново “Блокирати” Гутенберговом уреднику</strong>. Потребна су два аргумента. Први аргумент је име блока које треба пратити име регистровано у <code>регистер_блоцк_типе</code> функција у ПХП страни. Други аргумент је <strong>Објецт дефинира својства блока</strong> као што су наслов, категорија и неколико функција за приказивање Блоцк интерфејса.</p> <pre name="code"> вар регистерБлоцкТипе = вп.блоцкс.регистерБлоцкТипе; регистерБлоцкТипе ('твентисевентеен / сериес', титле: __ ('ХТМЛ5 Сериес'), категорија: 'видгетс', кеивордс: ['хтмл'], едит: фунцтион (пропс) , саве: фунцтион (пропс) ); </pre> <h4><code>вп.елемент.цреатеЕлемент</code></h4> <p>Ова функција вам омогућава да креирате елемент унутар “Блокирати” у уређивачу поста. Тхе <code>вп.елемент.цреатеЕлемент</code> Функција је у суштини апстракција Реакције <code>цреатеЕлемент ()</code> тако да прихвата исти скуп аргумената. Први аргумент узима тип елемента, на пример, пасус, а <code>спан</code>, или а <code>див</code> како је приказано испод:</p> <pre name="code">вп.елемент.цреатеЕлемент ('див');</pre> <p>Ми Можемо <strong>алиас функцију у варијаблу</strong> тако да је краће писати. На пример:</p> <pre name="code"> вар ел = вп.елемент.цреатеЕлемент; ел ('див');</pre> <p>ако ти <strong>преферирају нову ЕС6 синтаксу</strong>, можете то урадити и на овај начин:</p> <pre name="code"> цонст цреатеЕлемент: ел = вп.елемент; ел ('див');</pre> <p>Можемо и ми <strong>додајте атрибуте елемената</strong> као што је <code>класа</code> име или <code>ид</code> на другом параметру као што следи:</p> <pre name="code"> вар ел = вп.елемент.цреатеЕлемент; ел ('див', 'цласс': 'сериес-хтмл5', 'ид': 'сериес-хтмл-пост-ид-001');</pre> <p>Тхе <code>див</code> које смо створили не би имало смисла без садржаја. Ми Можемо <strong>додајте садржај на аргумент трећег параметра</strong>:</p> <pre name="code"> вар ел = вп.елемент.цреатеЕлемент; ел ('п', 'цласс': 'сериес-хтмл5', 'ид': 'сериес-хтмл-пост-ид-001', 'Овај чланак је део наше "ХТМЛ5 / ЦСС3 Туториалс серије" - посвећен да би вам помогао да будете бољи дизајнер и / или програмер. Кликните овде да бисте видели више чланака из исте серије ');</pre> <h4><code>вп.цомпонентс</code></h4> <p>Тхе <code>вп.цомпонентс</code> садржи збирку Гутенбергових компоненти, као што и само име имплицира. Те компоненте су технички Реацт прилагођене компоненте које укључују Буттон, Поповер, Спиннер, Тоолтип и гомилу других. Ми Можемо <strong>поново искористити ове компоненте у наш властити блок</strong>. У следећем примеру додајемо компоненту дугмета.</p> <pre name="code"> вар Буттон = вп.цомпонентс.Буттон; ел (Буттон, 'цласс': 'довнлоад-буттон',, 'Довнлоад');</pre> <h4>Атрибути</h4> <p>Атрибути су начин за похрањивање података у наш Блок, ови подаци могу бити попут садржаја, боја, поравнања, УРЛ-а итд. Можемо добити атрибуте из Пропертиес прослијеђених на <code>Уредити()</code> функција, као што следи:</p> <pre name="code"> едит: фунцтион (пропс) вар цонтент = пропс.аттрибутес.сериесЦонтент; ретурн ел ('див', 'цласс': 'сериес-хтмл5', 'ид': 'сериес-хтмл-пост-ид-001', садржај); </pre> <p>Да бисмо ажурирали атрибуте, користићемо <code>сетАттрибутес ()</code> функције. Обично бисмо променили садржај на одређеној радњи, као што је када се кликне на дугме, унесе се попуњава, изабере опција, итд. У следећем примеру, користићемо га да додамо <strong>повући се</strong> садржај нашег блока у случају да се нешто неочекивано деси нашем <code>сериесЦонтент</code> Атрибут.</p> <pre name="code"> едит: фунцтион (пропс) иф (типеоф пропс.аттрибутес.сериесЦонтент === 'ундефинед' ||! пропс.аттрибутес.сериесЦонтент) пропс.сетАттрибуте (сериесЦонтент: 'Хелло Ворлд! ) вар цонтент = пропс.аттрибутес.сериесЦонтент; повратак [ел ('див', 'цласс': 'сериес-хтмл5', 'ид': 'сериес-хтмл-пост-ид-001', садржај),]; </pre> <h4>Савинг тхе Блоцк</h4> <p>Тхе <code>сачувати()</code> функција ради слично као <code>Уредити()</code>, осим што дефинира садржај нашег блока за спремање у базу података поста. Чување садржаја блока је прилично једноставно, као што можемо видети испод:</p> <pre name="code"> саве: фунцтион (пропс) иф (! пропс ||! пропс.аттрибутес.сериесЦонтент) ретурн; вар цонтент = пропс.аттрибутес.сериесЦонтент; повратак [ел ('див', 'цласс': 'сериес-хтмл5', 'ид': 'сериес-хтмл-пост-ид-001', садржај),]; </pre> <h3>Шта је следеће?</h3> <p>Гутенберг ће променити ВордПресс екосистем на боље (или можда још горе). То омогућава програмерима да <strong>усвојити нови начин развоја ВордПресс додатака и тема</strong>. Гутенберг је само почетак. Ускоро “Блокирати” парадигма ће бити проширена на друге области ВордПресс-а, као што су АПИ-ји за подешавања и Видгети.</p> <p>Научите ЈаваСцрипт дубоко; то је једини начин да уђете у Гутенберг и останете релевантни за будућност у ВордПресс индустрији. Ако сте већ упознати са основама ЈаваСцрипта, функцијама, алатима, робом и оштрицама, заиста сам сигуран да ћете успети са Гутенбергом.</p> <p>Као што је поменуто, Гутенберг излаже обиље АПИ-ја, довољно да уради скоро све што је у вашем Блоку. Можете одабрати да ли желите <strong>кодирајте свој блок обичним старим ЈаваСцрипт-ом, ЈаваСцрипт-ом са ЕС6 синтаксом, Реацт-ом, или чак Вуе-ом</strong>.</p> <h4>Идеје и инспирације</h4> <p>Направио сам веома (веома) једноставан Гутенберг блок који можете пронаћи у спремишту нашег Гитхуб рачуна. Поред тога, саставио сам и неколико складишта одакле можете инспирисати изградњу сложенијег блока.</p> <ul><li>Гутенблоцкс - Збирка блокова по Матхиеу Виет-у написана у ЈаваСцрипт-у са ЕС5 синтаксом</li> <li>Јетпацк Гутенблоцкс Пројецт - колекција блокова у Јетпацку</li> <li>Списак примера имплементације Гутенберга, укључујући и Вуе.јс</li> </ul><h3>Аддитионал Референце</h3> <ul><li>Гутенберг Оффициал Репоситори</li> <li>Гутенберг Хандбоок</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">Хакните ИКЕА Лацк Табле у Рацк компоненту</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">Хацк Апарт Олд Кеибоард то Цреате Цустом Цонтрол Интерфаце</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">Водич за Виндовс 10 Таск Манагер - Дио ИИ</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">Следећи чланак</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">Хацк $ 10 Фласхлигхт у Ултра-Бригхт Премиум Оне</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Превиоус артицле</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">Водич за Виндовс 10 Таск Манагер - Дио ИИИ</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"> Корисни савети и савети за развој веба. Програмирање, веб дизајн, ЦСС, ХТМЛ, ЈАВАСЦРИПТ. Конфигуришите и поново инсталирајте ВИНДОВС. Израда сајтова и апликација од почетка. </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>