Gutenberg Anda Perlu Tahu Mengenai Editor Terkini WordPress
Gutenberg adalah editor baru untuk WordPress yang akan sama sekali menggantikan editor berkuasa TinyMCE semasa. Ia merupakan projek yang bercita-cita tinggi yang boleh dikatakan mengubah WordPress dalam pelbagai cara dan akan memberi kesan kepada kedua pengguna dan pemaju akhir biasa, khususnya, mereka yang bergantung pada skrin editor untuk bekerja di WordPress. Inilah caranya.
Gutenberg juga memperkenalkan paradigma baru dalam WordPress yang dipanggil “Blok”.
“Blok” adalah istilah abstrak yang digunakan untuk menggambarkan unit markup yang terdiri daripada bentuk kandungan atau susun atur laman web. Idea ini menggabungkan konsep-konsep dalam WordPress hari ini kod pendek, HTML tersuai, dan menanamkan penemuan ke API konsisten tunggal dan pengalaman pengguna.
Menyediakan Projek
Mengetahui fakta bahawa Gutenberg dibina di atas React, sesetengah pemaju bimbang bahawa halangan terlalu tinggi untuk pemaju peringkat kemasukan untuk membangunkan Gutenberg.
Menyediakan React.js boleh agak memakan masa dan membingungkan jika anda baru memulakannya. Anda perlu sekurang-kurangnya, pengubah JSX, Babel, bergantung kepada kod anda, anda mungkin memerlukan beberapa plugin Babel, dan Bundler seperti Webpack, Rollup, atau Parcel.
Mujurlah, sesetengah orang dalam komuniti WordPress melangkah dan cuba membuat Gutenberg berkembang semudah mungkin untuk semua orang mengikutinya. Hari ini, kami mempunyai alat yang akan menghasilkan satu boilerplate Gutenberg kita boleh mula menulis kod dengan serta-merta bukannya dengan alat dan konfigurasi.
Buat Blok Guten
The buat-guten-block adalah projek inisiatif oleh Ahmad Awais. Ianya adalah kit alat konfigurasi sifar (# 0CJS) yang membolehkan anda membangunkan blok Gutenberg dengan beberapa pratetap moden termasuk React, Webpack, ESNext, Babel, ESLint, dan Sass. Ikut arahan untuk bermula dengan Membuat Guten Block.
Menggunakan ES5 (ECMAScript 5)
Menggunakan semua alat ini untuk membuat mudah “Hai dunia” blok mungkin kelihatan terlalu banyak. Sekiranya anda ingin mengekalkan susunan anda, anda sebenarnya dapat mengembangkan blok Gutenberg dengan menggunakan 'ECMAScript 5' biasa yang mungkin sudah anda kenal dengannya. Jika anda mempunyai WP-CLI 1.5.0 dipasang pada komputer anda, anda hanya boleh menjalankan ...
blok perancah wp[--title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>... kepada <strong>menjanakan boilerplate blok Gutenberg pada plugin atau tema anda</strong>. Pendekatan ini lebih masuk akal, terutamanya, untuk plugin dan tema sedia ada yang telah anda usahakan sebelum era Gutenberg.</p> <p>Daripada membuat plugin baru untuk menampung blok Gutenberg, anda mungkin mahu mengintegrasikan blok ke plugin atau tema anda. Dan untuk membuat tutorial ini mudah diikuti untuk semua orang, <strong>kami akan menggunakan ECMAScript 5 dengan WP-CLI</strong>.</p> <h4>Mendaftarkan Blok Baru</h4> <p>Gutenberg kini dibangunkan sebagai plugin dan akan digabungkan kepada WordPress 5.0 setiap kali pasukan merasakan ia siap. Oleh itu, pada masa ini, anda perlu memasangnya dari <strong>Halaman pemalam dalam <code>wp-admin</code></strong>. Sebaik sahaja anda memasang dan mengaktifkannya, jalankan arahan berikut di Terminal atau Prompt Perintah jika anda berada di mesin Windows.</p> <pre name="code"> wp scaffold block series --title = "HTML5 Series" --theme</pre> <p>Perintah ini akan menghasilkan Blok ke tema yang sedang aktif. Blok kami akan mengandungi fail berikut:</p> <pre name="code"> . â ??  ?? â ??  ?? â ??  ?? siri â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? block.js â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? editor.css â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? siri.php </pre> <p>Mari kita muatkan fail utama blok kami di dalam <code>functions.php</code> tema kami:</p> <pre name="code"> jika (function_exists ('register_block_type')) memerlukan get_template_directory (). '/blocks/series.php'; </pre> <p>Perhatikan bahawa kami menyertakan pemuatan fail dengan bersyarat. Ini memastikan <strong>keserasian dengan versi WordPress sebelumnya bahawa blok kami hanya dimuatkan apabila Gutenberg hadir</strong>. Blok kami kini boleh didapati di antara muka Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Ini bagaimana rupanya apabila kita memasukkan blok tersebut.</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>siri.php</code>, kami akan mencari kod berikut yang mendaftarkan Blok baru kami. Ia juga <strong>memuatkan stylesheet dan JavaScript di bahagian depan dan editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / siri', array ('editor_script' => 'siri-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'block-series',));</pre> <p>Seperti yang dapat kita lihat di atas, Blok kami dinamakan <code>twentyseventeen / siri</code>, Nama Blok mesti unik dan nama-nama untuk mengelakkan perlanggaran dengan Blok lain yang dibawa oleh plugin lain.</p> <p>Tambahan pula, <strong>Gutenberg menyediakan satu set API JavaScript yang baru untuk berinteraksi dengan “Blok” antara muka</strong> dalam editor. Oleh kerana API cukup banyak, kami akan memberi tumpuan kepada beberapa spesifik yang saya fikir perlu tahu untuk mendapatkan Blok Gutenberg yang mudah tetapi berfungsi.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Pertama, kita akan melihat <code>wp.blocks.registerBlockType</code>. Fungsi ini digunakan untuk <strong>daftar baru “Blok” kepada editor Gutenberg</strong>. Ia memerlukan dua hujah. Hujah pertama ialah nama Blok yang harus mengikut nama yang didaftarkan di <code>register_block_type</code> berfungsi di sisi PHP. Hujah kedua adalah <strong>Objek menentukan sifat Blok</strong> seperti tajuk, kategori, dan beberapa fungsi untuk menjadikan antara muka Blok.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; [] html '], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Fungsi ini membolehkan anda membuat elemen dalam “Blok” dalam editor pos. The <code>wp.element.createElement</code> Fungsi pada dasarnya adalah abstraksi React <code>createElement ()</code> berfungsi dengan demikian ia menerima set argumen yang sama. Argumen pertama mengambil jenis elemen sebagai contoh perenggan, a <code>span</code>, atau a <code>div</code> seperti yang ditunjukkan di bawah:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Kita boleh <strong>alias fungsi menjadi pemboleh ubah</strong> jadi lebih pendek untuk menulis. Sebagai contoh:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Jika awak <strong>lebih suka menggunakan sintaks ES6 baru</strong>, anda juga boleh melakukannya dengan cara ini:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Kita boleh juga <strong>tambah sifat unsur</strong> seperti <code>kelas</code> nama atau <code>ID</code> pada parameter kedua seperti berikut:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'siri-html5', 'id': 'siri-html-post-id-001');</pre> <p>The <code>div</code> yang kami buat tidak masuk akal tanpa kandungan. Kita boleh <strong>tambah kandungan pada hujah parameter ketiga</strong>:</p> <pre name="code"> var el = wp.element.createElement; Artikel ini adalah sebahagian daripada "Tutorial HTML5 / CSS3 tutorial" kami - khusus untuk membantu anda membuat pereka dan / atau pemaju yang lebih baik. Klik di sini untuk melihat lebih banyak rencana dari siri yang sama ');</pre> <h4><code>wp.components</code></h4> <p>The <code>wp.components</code> mengandungi koleksi, seperti namanya, komponen Gutenberg. Komponen-komponen ini secara teknis adalah komponen Custom React yang termasuk Button, Popover, Spinner, Tooltip, dan sekumpulan orang lain. Kita boleh <strong>gunakan semula komponen ini ke Blok kami sendiri</strong>. Dalam contoh berikut, kami menambah komponen butang.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Muat turun');</pre> <h4>Atribut</h4> <p>Atribut adalah cara untuk menyimpan data dalam Blok kami, data ini mungkin seperti kandungan, warna, penjajaran, URL, dll. Kita boleh mendapatkan sifat-sifat dari Properties yang diluluskan pada <code>edit ()</code> fungsi, seperti berikut:</p> <pre name="code"> edit: fungsi (props) var content = props.attributes.seriesContent; kembali el ('div', 'class': 'siri-html5', 'id': 'siri-html-post-id-001', kandungan); </pre> <p>Untuk mengemas kini Atribut, kami menggunakan <code>setAttributes ()</code> fungsi. Biasanya kami akan menukar kandungan pada tindakan tertentu seperti apabila butang diklik, input diisi, pilihan dipilih, dan lain-lain. Dalam contoh berikut, kami menggunakannya untuk menambah <strong>belakang</strong> kandungan Blok kami sekiranya sesuatu yang tidak dijangka berlaku kepada kami <code>siri kandungan</code> Atribut.</p> <pre name="code"> edit: fungsi (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Here is the fallback content.' ) var content = props.attributes.seriesContent; kembali [el ('div', 'class': 'siri-html5', 'id': 'siri-html-post-id-001', kandungan),]; </pre> <h4>Menyimpan Blok</h4> <p>The <code>simpan ()</code> fungsi berfungsi sama dengan <code>edit ()</code>, kecuali ia mentakrifkan kandungan Blok kami untuk disimpan ke pangkalan data pos. Menyimpan kandungan Blok agak mudah seperti yang dapat kita lihat di bawah:</p> <pre name="code"> simpan: fungsi (props) if (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; kembali [el ('div', 'class': 'siri-html5', 'id': 'siri-html-post-id-001', kandungan),]; </pre> <h3>Apa yang akan datang?</h3> <p>Gutenberg akan mengubah ekosistem WordPress untuk lebih baik (atau mungkin lebih buruk). Ia membolehkan pemaju untuk <strong>mengguna pakai cara baharu untuk membangunkan plugin dan tema WordPress</strong>. Gutenberg hanya permulaan. Tidak lama kemudian “Blok” paradigma akan diperluas ke kawasan WordPress lain seperti API Tetapan dan Widget.</p> <p>Belajar JavaScript secara mendalam; ini satu-satunya cara untuk masuk ke Gutenberg dan kekal relevan dengan masa hadapan dalam industri WordPress. Sekiranya anda sudah terbiasa dengan asas JavaScript, kebiasaan, fungsi, alat, barangan dan buruk, saya yakin anda akan mendapat kelajuan dengan Gutenberg.</p> <p>Seperti yang dinyatakan, Gutenberg mendedahkan banyak API, cukup untuk melakukan apa sahaja untuk Blok anda. Anda boleh memilih sama ada <strong>kod Blok anda dengan JavaScript lama biasa, JavaScript dengan sintaks ES6, React, atau bahkan Vue</strong>.</p> <h4>Idea dan Inspirasi</h4> <p>Saya telah membuat Blok Gutenberg yang sangat (sangat) mudah yang anda dapati dalam repositori akaun Github kami. Selain itu, saya juga mengumpulkan beberapa repositori dari mana anda boleh mendorong inspirasi untuk membina Blok yang lebih kompleks.</p> <ul><li>Gutenblocks - Koleksi Blok oleh Mathieu Viet yang ditulis dalam JavaScript dengan Sintaks ES5</li> <li>Projek Jetpack Gutenblocks - koleksi Blok dibundel di Jetpack</li> <li>Senarai Senarai Pelaksanaan Gutenberg termasuk dengan Vue.js</li> </ul><h3>Rujukan lanjut</h3> <ul><li>Repositori Rasmi Gutenberg</li> <li>Buku Panduan 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">Hentikan Jadual Kekurangan IKEA menjadi 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">Hack Selain Keyboard Lama Buat Antara Muka Kawalan Tersuai</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 Pengurus Tugas Windows 10 - Bahagian 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 seterusnya</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">Hentikan lampu suluh $ 10 ke dalam Satu Premium Premium yang cerah</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 Pengurus Tugas Windows 10 - Bahagian 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"> Maklumat berguna dan tips pembangunan web. Pengaturcaraan, reka bentuk web, CSS, HTML, JAVASCRIPT. Konfigurasi dan pasang semula WINDOWS. Penciptaan tapak 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>