Gutenberg ทั้งหมดที่คุณต้องรู้เกี่ยวกับตัวแก้ไขล่าสุดของ WordPress
Gutenberg เป็นเครื่องมือแก้ไขใหม่สำหรับ WordPress ที่จะทั้งหมด แทนที่โปรแกรมแก้ไขที่ขับเคลื่อนโดย TinyMCE ปัจจุบัน. มันเป็นโครงการที่มีความทะเยอทะยานที่จะเปลี่ยน WordPress ในหลาย ๆ ทางและจะส่งผลกระทบต่อทั้งผู้ใช้ทั่วไปและนักพัฒนาโดยเฉพาะผู้ที่อาศัยหน้าจอแก้ไขสำหรับการทำงานกับ WordPress นี่คือลักษณะที่ปรากฏ.
Gutenberg ยังแนะนำกระบวนทัศน์ใหม่ใน WordPress ที่เรียกว่า “กลุ่ม”.
“กลุ่ม” เป็นศัพท์นามธรรมที่ใช้อธิบาย หน่วยของมาร์กอัป ที่ประกอบด้วยรูปแบบเนื้อหาหรือเค้าโครงของหน้าเว็บ แนวคิดนี้รวมแนวความคิดเกี่ยวกับสิ่งที่อยู่ใน WordPress วันนี้ที่เราจะประสบความสำเร็จ รหัสย่อ HTML ที่กำหนดเองและการค้นหาฝังลงใน API ที่สอดคล้องกันเดียว และประสบการณ์ผู้ใช้.
การตั้งค่าโครงการ
เมื่อทราบถึงความจริงที่ว่า Gutenberg นั้นถูกสร้างขึ้นจาก React นักพัฒนาบางคนก็กังวลว่า สิ่งกีดขวางนั้นสูงเกินไปสำหรับผู้พัฒนาระดับเริ่มต้นสำหรับการพัฒนากูเทนแบร์ก.
การตั้งค่า React.js อาจใช้เวลานานและสับสนหากคุณเพิ่งเริ่มต้นใช้งาน อย่างน้อยคุณจะต้องมีหม้อแปลง JSX, Babel ขึ้นอยู่กับรหัสของคุณคุณอาจต้องใช้ปลั๊กอิน Babel และ Bundler เช่น Webpack, Rollup หรือพัสดุ.
โชคดี, บางคนในชุมชน WordPress เริ่มก้าวขึ้น และกำลังพยายามทำให้การพัฒนากูเทนแบร์กง่ายที่สุดเท่าที่จะเป็นไปได้สำหรับทุกคนที่จะติดตาม วันนี้เรามีเครื่องมือที่จะสร้างหม้อไอน้ำ Gutenberg เราสามารถเริ่มเขียนโค้ดได้ทันที แทนที่จะสับสนกับเครื่องมือและการกำหนดค่า.
สร้าง Guten Block
สร้าง-Guten บล็อก เป็นโครงการเริ่มต้นโดย Ahmad Awais มันคือ ชุดเครื่องมือ zero-configuration (# 0CJS) ที่จะช่วยให้คุณพัฒนา Gutenberg block ด้วยค่าที่ตั้งไว้ล่วงหน้าอันทันสมัยเช่น React, Webpack, ESNext, Babel, ESLint และ Sass ทำตามคำแนะนำเพื่อเริ่มต้นกับ Create Guten Block.
ใช้ ES5 (ECMAScript 5)
ใช้เครื่องมือทั้งหมดเหล่านี้เพื่อสร้างง่าย “สวัสดีชาวโลก” บล็อกอาจดูเหมือนมากเกินไป หากคุณต้องการเก็บสแต็คของคุณไว้ให้ดีคุณสามารถพัฒนาบล็อกกูเทนเบิร์กโดยใช้ ECMAScript 5 แบบเรียบง่ายซึ่งคุณอาจคุ้นเคยอยู่แล้ว ถ้าคุณมี WP-CLI 1.5.0 ติดตั้งบนคอมพิวเตอร์ของคุณ, คุณสามารถเรียกใช้ ...
บล็อกนั่งร้าน wp[--title = ] [--dashicon =<dashicon>] [- หมวดหมู่ =<category>] [- ธีม] [--plugin =<plugin>] [- บังคับ]</pre> <p>…ถึง <strong>สร้าง Gutenberg block สำเร็จรูปสำหรับปลั๊กอินหรือธีมของคุณ</strong>. วิธีการนี้มีความสมเหตุสมผลมากขึ้นโดยเฉพาะอย่างยิ่งสำหรับปลั๊กอินและธีมที่มีอยู่ซึ่งคุณได้พัฒนาขึ้นก่อนยุค Gutenberg.</p> <p>แทนที่จะสร้างปลั๊กอินใหม่เพื่อรองรับบล็อก Gutenberg คุณอาจต้องการรวมบล็อกเข้ากับปลั๊กอินหรือธีมของคุณ และเพื่อให้การสอนนี้ง่ายต่อการติดตามสำหรับทุกคน, <strong>เราจะใช้ ECMAScript 5 กับ WP-CLI</strong>.</p> <h4>การลงทะเบียนบล็อกใหม่</h4> <p>ปัจจุบันกูเทนแบร์กได้รับการพัฒนาเป็นปลั๊กอินและจะถูกรวมเข้ากับ WordPress 5.0 ทุกครั้งที่ทีมรู้สึกว่ามันพร้อม ดังนั้นในขณะนี้คุณจะต้องติดตั้งจาก <strong>หน้าปลั๊กอินใน <code>WP-ผู้ดูแลระบบ</code></strong>. เมื่อคุณติดตั้งและเปิดใช้งานแล้วให้เรียกใช้คำสั่งต่อไปนี้ใน Terminal หรือพรอมต์คำสั่งหากคุณใช้เครื่อง Windows.</p> <pre name="code"> ชุดบล็อกนั่งร้าน wp --title = "ชุด HTML5" - ชุดรูปแบบ</pre> <p>คำสั่งนี้จะสร้างบล็อกให้กับธีมที่ใช้งานในปัจจุบัน บล็อกของเราจะประกอบด้วยไฟล์ต่อไปนี้:</p> <pre name="code"> . â ?? ?? â ?? ?? â ?? ?? ชุดâÂ'Ã'ÂÃ'Ââ ?? ?? â ?? ?? â ?? ?? block.js âÂ'Ã'ÂÃ'Ââ ?? ?? â ?? ?? â ?? ?? editor.css âÂ'Ã'ÂÃ'Ââ ?? ?? â ?? ?? â ?? ?? สไตล์. cs â ?? ?? â ?? ?? â ?? ?? series.php </pre> <p>ลองโหลดไฟล์หลักของบล็อกของเราใน <code>functions.php</code> ในธีมของเรา:</p> <pre name="code"> if (function_exists ('register_block_type')) ต้องการ get_template_directory () '/blocks/series.php'; </pre> <p>โปรดสังเกตว่าเราใส่ไฟล์ที่มีเงื่อนไข สิ่งนี้ทำให้มั่นใจ <strong>ความเข้ากันได้กับเวิร์ดเพรสรุ่นก่อนหน้านั้นบล็อกของเราจะโหลดเมื่อ Gutenberg ปรากฏเท่านั้น</strong>. บล็อกของเราควรจะพร้อมใช้งานในอินเทอร์เฟซ Gutenberg.</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>Gutenberg API</h3> <p>Gutenberg แนะนำ API สองชุดเพื่อลงทะเบียนบล็อกใหม่ ถ้าเราดูที่ <code>series.php</code>, เราจะพบรหัสต่อไปนี้ที่ลงทะเบียน Block ใหม่ของเรา มันยัง <strong>โหลดสไตล์ชีทและจาวาสคริปต์ในส่วนหน้าและแก้ไข</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', อาร์เรย์ ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>ดังที่เราเห็นด้านบนบล็อกของเรามีชื่อ <code>twentyseventeen / ชุด</code>, ชื่อบล็อกจะต้องไม่ซ้ำกันและเนมสเปซเพื่อหลีกเลี่ยงการชนกับบล็อกอื่นที่นำโดยปลั๊กอินอื่น.</p> <p>นอกจากนี้, <strong>Gutenberg มีชุด JavaScript API ใหม่เพื่อโต้ตอบกับ “กลุ่ม” อินเตอร์เฟซ</strong> ในตัวแก้ไข เนื่องจาก API มีอยู่มากมายเราจะเน้นเฉพาะบางอย่างที่ฉันคิดว่าคุณควรรู้เพื่อให้ได้ Gutenberg Block ที่เรียบง่าย แต่ใช้งานได้.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>ก่อนอื่นเราจะทำการตรวจสอบ <code>wp.blocks.registerBlockType</code>. ฟังก์ชั่นนี้ใช้เพื่อ <strong>ลงทะเบียนใหม่ “กลุ่ม” ถึงบรรณาธิการกูเทนแบร์ก</strong>. มันต้องมีสองข้อโต้แย้ง อาร์กิวเมนต์แรกคือชื่อบล็อกซึ่งควรตามด้วยชื่อที่ลงทะเบียนใน <code>register_block_type</code> ฟังก์ชั่นในด้าน PHP อาร์กิวเมนต์ที่สองคือ <strong>วัตถุที่กำหนดคุณสมบัติบล็อก</strong> เช่นชื่อเรื่องหมวดหมู่และฟังก์ชั่นสองสามอย่างในการสร้างหน้าจอ Block Interface.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), หมวดหมู่: 'วิดเจ็ต', คำหลัก: ['html'], แก้ไข: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) , บันทึก: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>ฟังก์ชั่นนี้ช่วยให้คุณสร้างองค์ประกอบภายใน “กลุ่ม” ในเครื่องมือแก้ไขบทความ <code>wp.element.createElement</code> ฟังก์ชั่นนั้นเป็นนามธรรมของปฏิกิริยา <code>createElement ()</code> ฟังก์ชั่นจึงยอมรับชุดของข้อโต้แย้งที่เหมือนกัน อาร์กิวเมนต์แรกใช้ประเภทขององค์ประกอบเช่นย่อหน้า a <code>ระยะ</code>, หรือ <code>div</code> ที่แสดงด้านล่าง:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>เราทำได้ <strong>นามแฝงฟังก์ชั่นเป็นตัวแปร</strong> ดังนั้นจึงสั้นกว่าที่จะเขียน ตัวอย่างเช่น:</p> <pre name="code"> var el = wp.element.createElement; เอล ( 'div');</pre> <p>ถ้าคุณ <strong>ต้องการใช้ไวยากรณ์ ES6 ใหม่</strong>, คุณสามารถทำได้ด้วยวิธีนี้:</p> <pre name="code"> const createElement: el = wp.element; เอล ( 'div');</pre> <p>เรายังสามารถ <strong>เพิ่มองค์ประกอบองค์ประกอบ</strong> เช่น <code>ชั้น</code> ชื่อหรือ <code>รหัส</code> บนพารามิเตอร์ที่สองดังนี้:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p> <code>div</code> ที่เราสร้างขึ้นจะไม่สมเหตุสมผลหากไม่มีเนื้อหา เราทำได้ <strong>เพิ่มเนื้อหาในอาร์กิวเมนต์ของพารามิเตอร์ที่สาม</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'บทความนี้เป็นส่วนหนึ่งของ "ชุดบทเรียน HTML5 / CSS3" ของเรา - เฉพาะ เพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้นคลิกที่นี่เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน ');</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> มีคอลเลกชันซึ่งเป็นชื่อที่บ่งบอกถึงองค์ประกอบของกูเทนแบร์ก ในทางเทคนิคส่วนประกอบเหล่านี้คือทำปฏิกิริยาองค์ประกอบที่กำหนดเองซึ่งรวมถึงปุ่ม, Popover, Spinner, Tooltip และกลุ่มอื่น ๆ เราทำได้ <strong>นำส่วนประกอบเหล่านี้กลับมาใช้ใหม่ในบล็อกของเราเอง</strong>. ในตัวอย่างต่อไปนี้เราเพิ่มองค์ประกอบปุ่ม.</p> <pre name="code"> ปุ่ม var = wp.components.Button; el (ปุ่ม, 'class': 'download-button',, 'ดาวน์โหลด');</pre> <h4>แอตทริบิวต์</h4> <p>แอตทริบิวต์เป็นวิธีการจัดเก็บข้อมูลในบล็อกของเราข้อมูลนี้อาจเหมือนกับเนื้อหาสีการจัดตำแหน่ง URL ฯลฯ เราสามารถรับแอตทริบิวต์จากคุณสมบัติที่ส่งผ่านไปยัง <code>แก้ไข ()</code> ฟังก์ชั่นดังต่อไปนี้:</p> <pre name="code"> แก้ไข: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'เนื้อหา -html-post-id-001' เนื้อหา); </pre> <p>ในการอัปเดตแอตทริบิวต์เราใช้ <code>setAttributes ()</code> ฟังก์ชัน โดยทั่วไปแล้วเราจะเปลี่ยนเนื้อหาของการกระทำบางอย่างเช่นเมื่อมีการคลิกปุ่มการป้อนข้อมูลจะเต็มไปด้วยตัวเลือกที่ถูกเลือก ฯลฯ ในตัวอย่างต่อไปนี้เราใช้เพื่อเพิ่ม <strong>รั้งท้าย</strong> เนื้อหาของบล็อกของเราในกรณีที่มีบางสิ่งที่ไม่คาดคิดเกิดขึ้นกับเรา <code>seriesContent</code> คุณลักษณะ.</p> <pre name="code"> แก้ไข: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) ถ้า (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'สวัสดีชาวโลกนี่คือเนื้อหาทางเลือก' ) var content = props.attributes.seriesContent; ส่งคืน [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', เนื้อหา),]; </pre> <h4>บันทึกบล็อก</h4> <p> <code>บันทึก ()</code> ฟังก์ชั่นการทำงานคล้ายกับ <code>แก้ไข ()</code>, ยกเว้นจะกำหนดเนื้อหาของบล็อกของเราเพื่อบันทึกลงในฐานข้อมูลโพสต์ การบันทึกเนื้อหาของบล็อกค่อนข้างตรงไปตรงมาตามที่เราเห็นด้านล่าง:</p> <pre name="code"> บันทึก: ฟังก์ชั่น (อุปกรณ์ประกอบฉาก) ถ้า (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; ส่งคืน [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', เนื้อหา),]; </pre> <h3>อะไรต่อไป?</h3> <p>Gutenberg จะเปลี่ยนระบบนิเวศของ WordPress ให้ดีขึ้น (หรืออาจแย่กว่านั้น) มันช่วยให้นักพัฒนา <strong>ใช้วิธีการใหม่ในการพัฒนาปลั๊กอินและธีม WordPress</strong>. กูเทนแบร์กเป็นเพียงการเริ่มต้น ในไม่ช้า “กลุ่ม” กระบวนทัศน์จะถูกขยายไปยังพื้นที่อื่น ๆ ของ WordPress เช่น API การตั้งค่าและวิดเจ็ต.</p> <p>เรียนรู้ JavaScript อย่างลึกซึ้ง; มันเป็นวิธีเดียวที่จะเข้า Gutenberg และเกี่ยวข้องกับอนาคตในอุตสาหกรรม WordPress หากคุณคุ้นเคยกับพื้นฐาน JavaScript, นิสัยใจคอ, ฟังก์ชั่น, เครื่องมือ, สินค้าและ bads ฉันแน่ใจว่าคุณจะได้รับความเร็วที่สูงขึ้นด้วย Gutenberg.</p> <p>ดังที่กล่าวไว้ Gutenberg มี API จำนวนมากเพียงพอที่จะทำเกือบทุกอย่างกับบล็อกของคุณ คุณสามารถเลือกได้ว่าจะ <strong>รหัส Block ของคุณด้วย JavaScript เก่าธรรมดา, JavaScript พร้อมไวยากรณ์ ES6, React หรือแม้แต่ Vue</strong>.</p> <h4>ความคิดและแรงบันดาลใจ</h4> <p>ฉันได้สร้าง Gutenberg แบบธรรมดามาก ๆ ซึ่งคุณสามารถหาได้จากที่เก็บของบัญชี Github ของเรา นอกจากนี้ฉันยังรวบรวมที่เก็บข้อมูลจำนวนหนึ่งจากที่ซึ่งคุณสามารถขับเคลื่อนแรงบันดาลใจในการสร้างบล็อกที่ซับซ้อนมากขึ้น.</p> <ul><li>Gutenblocks - กลุ่มของ Blocks by Mathieu Viet เขียนใน JavaScript พร้อมด้วย ES5 Syntax</li> <li>โครงการ Jetpack Gutenblocks - กลุ่มของบล็อกที่รวมอยู่ใน Jetpack</li> <li>รายชื่อตัวอย่างของการดำเนินงานกูเทนแบร์กรวมถึงกับ Vue.js</li> </ul><h3>อ้างอิงเพิ่มเติม</h3> <ul><li>พื้นที่เก็บข้อมูลอย่างเป็นทางการของ Gutenberg</li> <li>คู่มือกูเทนเบิร์ก</li> </ul> <div class="rek-block ads-block" data-ads-size="netboard"> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block ads-block" data-ads-size="square"> </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">แฮ็กโต๊ะ IKEA ขาดลงในชั้นวางอุปกรณ์</a> </div> </div> <div class="rek-block ads-block" data-ads-size="vertical"> </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">คำแนะนำเกี่ยวกับ Windows 10 Task Manager - Part II</a> </div> </div> <div class="rek-block ads-block" data-ads-size="vertical"> </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">คำแนะนำเกี่ยวกับ Windows 10 Task Manager - ส่วนที่สาม</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.phhsnews.com"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://lt.phhsnews.com"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://it.phhsnews.com"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://cs.phhsnews.com"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://es.phhsnews.com"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://no.phhsnews.com"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pt.phhsnews.com"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://de.phhsnews.com"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://nl.phhsnews.com"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://da.phhsnews.com"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://sv.phhsnews.com"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://th.phhsnews.com/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://tr.phhsnews.com/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.phhsnews.com/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.phhsnews.com/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="/">PHHSNEWS</a> </div> <div class="col-md-9"> ข้อมูลที่เป็นประโยชน์และเคล็ดลับในการพัฒนาเว็บ การเขียนโปรแกรม, ออกแบบเว็บไซต์, CSS, HTML, JAVASCRIPT กำหนดค่าและติดตั้ง WINDOWS อีกครั้ง การสร้างเว็บไซต์และแอปพลิเคชันตั้งแต่เริ่มต้น </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> <script src="js/ads.js"></script> </body> </html>