Gutenberg Yang Perlu Anda Ketahui tentang Editor Terbaru WordPress
Gutenberg adalah editor baru untuk WordPress ganti editor yang diberdayakan TinyMCE saat ini. Ini adalah proyek ambisius yang akan mengubah WordPress dengan banyak cara dan akan memengaruhi pengguna akhir dan pengembang, khususnya, mereka yang bergantung pada layar editor untuk bekerja di WordPress. Ini tampilannya.
Gutenberg juga memperkenalkan paradigma baru di WordPress yang disebut “Blok”.
“Blok” adalah istilah abstrak yang digunakan untuk menggambarkan unit markup yang terdiri dari konten atau tata letak halaman web. Idenya menggabungkan konsep-konsep apa yang ada di WordPress hari ini yang kita capai kode pendek, HTML khusus, dan sematkan penemuan ke dalam satu API yang konsisten dan pengalaman pengguna.
Menyiapkan Proyek
Mengetahui fakta bahwa Gutenberg dibangun di atas React, beberapa pengembang khawatir bahwa penghalang terlalu tinggi untuk pengembang pemula untuk mengembangkan Gutenberg.
Menyiapkan React.js bisa sangat memakan waktu dan membingungkan jika Anda baru saja memulainya. Anda memerlukan setidaknya, transformator JSX, Babel, tergantung pada kode Anda, Anda mungkin memerlukan beberapa plugin Babel, dan Bundler seperti Webpack, Rollup, atau Parcel.
Untung, beberapa orang dalam komunitas WordPress ditingkatkan dan berusaha membuat pengembangan Gutenberg semudah mungkin bagi semua orang untuk mengikuti. Hari ini, kami memiliki alat yang akan menghasilkan boilerplate Gutenberg demikian kita dapat mulai menulis kode segera bukannya bingung dengan alat dan konfigurasi.
Buat Blok Guten
Itu buat-guten-blok adalah proyek inisiasi oleh Ahmad Awais. Itu adalah kit alat konfigurasi nol (# 0CJS) yang akan memungkinkan Anda untuk mengembangkan blok Gutenberg dengan beberapa preset tumpukan modern termasuk React, Webpack, ESNext, Babel, ESLint, dan Sass. Ikuti instruksi untuk memulai dengan Buat Blok Guten.
Menggunakan ES5 (ECMAScript 5)
Menggunakan semua alat ini untuk membuat yang sederhana “Halo Dunia” blok mungkin tampak terlalu banyak. Jika Anda ingin menjaga tumpukan Anda ramping, Anda sebenarnya dapat mengembangkan blok Gutenberg menggunakan ECMAScript 5 yang benar-benar bagus yang mungkin sudah Anda kenal. Jika Anda memiliki WP-CLI 1.5.0 diinstal di komputer Anda, Anda cukup menjalankan ...
blok perancah wp[--title = ] [--dashicon =<dashicon>] [--category =<category>] [--tema] [--plugin =<plugin>] [- memaksa]</pre> <p>... untuk <strong>menghasilkan blok pelat Gutenberg ke plugin atau tema Anda</strong>. Pendekatan ini lebih masuk akal, khususnya, untuk plugin dan tema yang sudah Anda kembangkan sebelum era Gutenberg.</p> <p>Alih-alih membuat plugin baru untuk mengakomodasi blok Gutenberg, Anda mungkin ingin mengintegrasikan blok ke plugin atau tema. Dan untuk membuat tutorial ini mudah diikuti untuk semua orang, <strong>kita akan menggunakan ECMAScript 5 dengan WP-CLI</strong>.</p> <h4>Mendaftarkan Blok Baru</h4> <p>Gutenberg saat ini dikembangkan sebagai plugin dan akan digabungkan ke WordPress 5.0 setiap kali tim merasa sudah siap. Jadi, untuk saat ini, Anda harus menginstalnya dari <strong>Halaman plugin <code>wp-admin</code></strong>. Setelah Anda menginstal dan mengaktifkannya, jalankan perintah berikut di Terminal atau Command Prompt jika Anda menggunakan mesin Windows.</p> <pre name="code"> wp scaffold block series --title = "HTML5 Series" --theme</pre> <p>Perintah ini akan menghasilkan Blokir ke tema yang sedang aktif. Blok kami akan terdiri dari file-file berikut:</p> <pre name="code"> . SEBUAH¢Â ??  ?? â ??  ?? âA A?? seri â ?? Â'Ã' Ã' â ??  ?? â ??  ?? âA A?? block.js â ?? Â'Ã' Ã' â ??  ?? â ??  ?? âA A?? editor.css â ?? Â'Ã' Ã' â ??  ?? â ??  ?? âA A?? style.css â ??  ?? â ??  ?? âA A?? series.php </pre> <p>Mari memuat file utama dari blok kami di <code>functions.php</code> dari tema kami:</p> <pre name="code"> if (function_exists ('register_block_type')) membutuhkan get_template_directory (). '/blocks/series.php'; </pre> <p>Perhatikan bahwa kami melampirkan pemuatan file dengan kondisional. Ini memastikan <strong>kompatibilitas dengan versi WordPress sebelumnya yang blok kami hanya dimuat ketika Gutenberg hadir</strong>. Blok kami sekarang harus tersedia dalam antarmuka Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Ini tampilannya ketika kita memasukkan blok.</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 memperkenalkan dua set API untuk mendaftarkan Blok baru. Jika kita melihat <code>series.php</code>, kita akan menemukan kode berikut yang mendaftarkan Blok baru kita. Juga <strong>memuat stylesheet dan JavaScripts di front-end dan editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'seri-blok-editor', 'editor_style' => 'seri-blok-editor', 'style' => 'blok-blok',));</pre> <p>Seperti yang bisa kita lihat di atas, Blok kita dinamai <code>dua puluh tujuh belas / seri</code>, nama Blok harus unik dan diberi spasi untuk menghindari tabrakan dengan Blok lain yang dibawa oleh plugin lain.</p> <p>Selanjutnya, <strong>Gutenberg menyediakan satu set API JavaScript baru untuk berinteraksi dengan “Blok” antarmuka</strong> di editor. Karena API cukup banyak, kami akan fokus pada beberapa hal spesifik yang menurut saya harus Anda ketahui untuk mendapatkan Blok Gutenberg yang sederhana namun berfungsi.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Pertama, kita akan melihat ke dalam <code>wp.blocks.registerBlockType</code>. Fungsi ini digunakan untuk <strong>daftar yang baru “Blok” kepada editor Gutenberg</strong>. Itu membutuhkan dua argumen. Argumen pertama adalah nama Blok yang harus mengikuti nama yang terdaftar di <code>register_block_type</code> berfungsi di sisi PHP. Argumen kedua adalah <strong>Objek yang mendefinisikan properti Blok</strong> seperti judul, kategori, dan beberapa fungsi untuk membuat antarmuka Blok.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategori: 'widget', kata kunci: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Fungsi ini memungkinkan Anda untuk membuat elemen di dalam “Blok” di editor pos. Itu <code>wp.element.createElement</code> fungsi pada dasarnya adalah abstraksi dari Bereaksi <code>createElement ()</code> berfungsi sehingga menerima set argumen yang sama. Argumen pertama mengambil jenis elemen misalnya paragraf, a <code>menjangkau</code>, atau a <code>div</code> seperti yang ditunjukkan di bawah ini:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Kita dapat <strong>alias fungsinya menjadi variabel</strong> jadi lebih pendek untuk menulis. Sebagai contoh:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Jika kamu <strong>lebih suka menggunakan sintaks ES6 baru</strong>, Anda juga dapat melakukannya dengan cara ini:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Kita juga bisa <strong>tambahkan atribut elemen</strong> seperti <code>kelas</code> nama atau <code>id</code> pada parameter kedua sebagai berikut:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>Itu <code>div</code> yang kami buat tidak akan masuk akal tanpa konten. Kita dapat <strong>tambahkan konten pada argumen parameter ketiga</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Artikel ini adalah bagian dari "seri Tutorial HTML5 / CSS3" kami - didedikasikan untuk membantu Anda menjadi desainer dan / atau pengembang yang lebih baik. Klik di sini untuk melihat lebih banyak artikel dari seri yang sama ');</pre> <h4><code>komponen wp.</code></h4> <p>Itu <code>komponen wp.</code> berisi koleksi, sesuai namanya, komponen Gutenberg. Komponen-komponen ini secara teknis adalah komponen kustom Bereaksi yang meliputi Tombol, Popover, Spinner, Tooltip, dan banyak lainnya. Kita dapat <strong>menggunakan kembali komponen-komponen ini ke dalam Blok kita sendiri</strong>. Pada contoh berikut, kami menambahkan komponen tombol.</p> <pre name="code"> var Button = wp.components.Button; el (Tombol, 'kelas': 'tombol unduh',, 'Unduh');</pre> <h4>Atribut</h4> <p>Atribut adalah cara untuk menyimpan data di Blok kami, data ini bisa seperti konten, warna, keberpihakan, URL, dll. Kita bisa mendapatkan atribut dari Properti yang diteruskan pada <code>edit ()</code> fungsi, sebagai berikut:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', konten); </pre> <p>Untuk memperbarui Atribut, kami menggunakan <code>setAttributes ()</code> fungsi. Biasanya kami akan mengubah konten pada tindakan tertentu seperti ketika tombol diklik, input diisi, opsi dipilih, dll. Dalam contoh berikut, kami menggunakannya untuk menambahkan <strong>mundur</strong> isi Blok kami jika terjadi sesuatu yang tidak terduga pada kami <code>seriContent</code> Atribut.</p> <pre name="code"> sunting: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Ini konten yang mundur.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', konten),]; </pre> <h4>Menyimpan Blokir</h4> <p>Itu <code>menyimpan()</code> fungsi bekerja mirip dengan <code>edit ()</code>, kecuali itu mendefinisikan konten Blok kami untuk menyimpan ke database posting. Menyimpan konten Blokir cukup mudah, seperti yang dapat kita lihat di bawah:</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', konten),]; </pre> <h3>Apa berikutnya?</h3> <p>Gutenberg akan mengubah ekosistem WordPress menjadi lebih baik (atau mungkin lebih buruk). Ini memungkinkan pengembang untuk <strong>mengadopsi cara baru mengembangkan plugin dan tema WordPress</strong>. Gutenberg hanyalah awal. Segera saja “Blok” paradigma akan diperluas ke area lain di WordPress seperti API Pengaturan dan Widget.</p> <p>Pelajari JavaScript Sangat; itu satu-satunya cara untuk masuk ke Gutenberg dan tetap relevan dengan masa depan di industri WordPress. Jika Anda sudah terbiasa dengan dasar-dasar JavaScript, keanehan, fungsi, alat, barang, dan hal-hal buruk, saya benar-benar yakin Anda akan mempercepat dengan Gutenberg.</p> <p>Seperti yang disebutkan, Gutenberg memaparkan banyak API, cukup untuk melakukan hampir semua hal untuk Blok Anda. Anda dapat memilih apakah akan <strong>kode Blokir Anda dengan JavaScript lama yang polos, JavaScript dengan sintaksis ES6, Bereaksi, atau bahkan Vue</strong>.</p> <h4>Gagasan dan Inspirasi</h4> <p>Saya telah membuat Blok Gutenberg yang sangat (sangat) sederhana yang dapat Anda temukan di repositori akun Github kami. Selain itu, saya juga telah mengumpulkan sejumlah repositori dari mana Anda dapat mendorong inspirasi untuk membangun Blok yang lebih kompleks.</p> <ul><li>Gutenblocks - Kumpulan Blok oleh Mathieu Viet yang ditulis dalam JavaScript dengan Sintaks ES5</li> <li>Proyek Jetpack Gutenblocks - koleksi Blok yang dipaketkan di Jetpack</li> <li>Daftar Contoh Implementasi Gutenberg termasuk dengan Vue.js</li> </ul><h3>Referensi Lebih Lanjut</h3> <ul><li>Repositori Resmi Gutenberg</li> <li>Buku Pegangan Gutenberg</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">Retas Meja Kekurangan IKEA ke dalam Rak Komponen</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">Retas Selain Keyboard Lama untuk Membuat Antarmuka Kontrol Kustom</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">Panduan untuk Windows 10 Task Manager - Bagian 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">Artikel selanjutnya</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">Retas senter $ 10 menjadi Premium One yang sangat terang</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artikel sebelumnya</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">Panduan untuk Windows 10 Task Manager - Bagian 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"> Informasi bermanfaat dan tip pengembangan web. Pemrograman, desain web, CSS, HTML, JAVASCRIPT. Konfigurasikan dan instal ulang WINDOWS. Pembuatan situs dan aplikasi dari awal. </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>