เจาะลึกลงไปในตัวสร้างไซต์คงที่สิบเอ็ดสิบ

แต่ก่อนอื่น มาทบทวนกันอย่างรวดเร็วว่า "ไซต์คงที่" หมายถึงอะไร และจากนั้นเครื่องกำเนิดไฟฟ้ามีให้อะไร ไซต์แบบคงที่ประกอบด้วยเนื้อหาแบบคงที่ เช่นเดียวกับใน HTML, CSS, เนื้อหา และเนื้อหาทั้งหมดได้รับการรวบรวมไว้ด้วยกันก่อนที่จะส่งไปยังโฮสต์ของเว็บไซต์ ซึ่งแตกต่างจากไซต์แบบไดนามิกที่รวบรวมสิ่งเหล่านั้นจากการสืบค้นฐานข้อมูลในขณะใช้งาน (เช่น WordPress) หรือที่ดึงเนื้อหาจากฝั่งไคลเอ็นต์ API (เช่นเฟรมเวิร์ก JavaScript ที่ไม่มีการแสดงผลฝั่งเซิร์ฟเวอร์)

ตัวสร้างไซต์แบบคงที่คือสภาพแวดล้อมและสร้างตัวประมวลผลเพื่อรวบรวมเนื้อหาของคุณให้เป็น HTML แบบคงที่ พวกเขามักจะเสนอตัวช่วยเพื่อให้มีความยืดหยุ่นในการเขียนเนื้อหาของคุณ (เช่น สนับสนุน Markdown) และรวมถึงวิธีการสำหรับการสร้างแม่แบบ ดังนั้นแทนที่จะเขียนหน้า HTML ทีละหน้าและต้องคัดลอกและวางส่วนที่ซ้ำกัน ตัวสร้างจะสนับสนุนการแบ่งสิ่งเหล่านั้นออกเป็นส่วนประกอบผ่านภาษาเทมเพลตบางตัว จากนั้น กระบวนการสร้างของเครื่องกำเนิดไฟฟ้าจะนำทุกอย่างมารวมกันและส่งออก HTML สุดท้ายที่สามารถอัปโหลดไปยังโฮสต์เว็บเพื่อใช้เป็นเว็บไซต์ของคุณได้ ขึ้นอยู่กับโฮสต์เว็บที่คุณใช้ กระบวนการสร้างนี้สามารถทำได้โดยโฮสต์

มีเครื่องกำเนิดไซต์แบบคงที่จำนวนมาก คุณอาจเคยได้ยินหรือเคยใช้ของอย่าง Jekyll, Hugo, Gatsby, Next และ Nuxt Jamstack.org จัดทำรายการที่ครอบคลุม

อะไรทำให้ Eleventy แตกต่างจากเครื่องกำเนิดไซต์แบบคงที่อื่น ๆ

Eleventy นั้นเร็วเป็นพิเศษทั้งระหว่างบิลด์และในเบราว์เซอร์ ส่วนใหญ่ต้องขอบคุณที่ไม่ต้องการโหลดกลุ่ม JavaScript ฝั่งไคลเอ็นต์เพื่อให้บริการเนื้อหา (เทียบกับบางอย่างเช่น Gatsby) การเรนเดอร์ฝั่งเซิร์ฟเวอร์ไม่ใช่เรื่องที่ต้องกังวล เนื่องจากการสร้างหน้าระบบไฟล์มีค่าเริ่มต้นเป็น HTML แบบคงที่

สิ่งที่ทำให้ Eleventy ไม่เหมือนใครจริงๆ คือความสามารถในการเลือกและผสมภาษาเทมเพลตต่างๆ ได้มากถึง สิบ ภาษา:

การผสมผสานภาษาสามารถเกิดขึ้นได้ในไฟล์เดียวกันหรือระหว่างเลย์เอาต์ ตัวอย่างเช่น ฉันมักจะเขียนเนื้อหาหลักด้วย Markdown ที่ป้อนลงในเลย์เอาต์ของ Nunjucks ในบางโปรเจ็กต์ ฉันพบว่าการวนซ้ำข้อมูลโดยใช้ Nunjucks ขณะอยู่ในไฟล์ Markdown นั้นมีประโยชน์ ความสามารถในการรวมภาษานี้มีประสิทธิภาพมาก และช่วยให้คุณสามารถออกแบบเวิร์กโฟลว์การเขียนและสร้างที่เหมาะกับคุณและโครงการของคุณได้ดีที่สุด

Eleventy มีแฟล็ก --serve ที่ใช้ BrowserSync เพื่อเปิดใช้งานการให้บริการไซต์ในเครื่องและมีการโหลดซ้ำเมื่อมีการเปลี่ยนแปลงไฟล์ นี่เป็นความสะดวกอย่างยิ่ง และควรจำไว้เสมอหากคุณไม่ได้มองหาตัวสร้างไซต์แบบสแตติก แต่บางทีอาจอัปเกรดจากเครื่องมือสร้างอย่างอึก

ส่วนหนึ่งของการกำหนดค่าเป็นศูนย์ ไฟล์ไซต์ทั้งหมดของคุณอาจอยู่ในรูทของโปรเจ็กต์ของคุณ หากต้องการแก้ไขไดเร็กทอรีอินพุตและเอาต์พุต คุณสามารถสร้างการกำหนดค่า Eleventy ซึ่งคาดว่าจะเป็นไฟล์รูทชื่อ . .eleventy.js ต่อไปนี้คือข้อมูลโค้ดสั้นๆ ที่แสดงวิธีการแก้ไขนี้:

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

ตามที่ระบุไว้ก่อนหน้านี้ ลักษณะการทำงานเริ่มต้นคือการสร้างหน้าระบบไฟล์ ซึ่งโดยทั่วไปแล้วจะเป็นประโยชน์อย่างยิ่งโดยเฉพาะอย่างยิ่งสำหรับการเริ่มต้นอย่างรวดเร็ว สิ่งนี้สามารถแทนที่ได้อย่างง่ายดายโดยการกำหนด permalink ที่กำหนดเอง และสามารถทำได้ต่อไฟล์ สำหรับทั้งไดเร็กทอรี หรือไดนามิกสำหรับชุดข้อมูล Permalinks ยังมีมหาอำนาจอื่นที่เราจะสำรวจในอีกสักครู่!

ในระหว่างการสร้าง คุณสามารถเตรียมเนื้อหา ข้อมูล และการแปลงเนื้อหาและข้อมูลนั้นได้โดยใช้ JavaScript และใช้ประโยชน์จากตัวกรองและรหัสย่อ (เราจะพูดถึงในภายหลัง) อีกครั้ง ทั้งหมดนี้เกิดขึ้นโดยไม่ต้องเพิ่มกลุ่มฝั่งไคลเอ็นต์ JavaScript ในขณะที่ยังคงเปิดใช้งานการใช้ JavaScript เป็นภาษาเทมเพลต

หมายเหตุสำคัญ : คุณสามารถใช้ Eleventy ได้สำเร็จโดยมีความรู้ด้าน JavaScript ไม่มากหรือน้อย

ไม่เหมือนกับ SSG อื่น ๆ เช่น Gatsby หรือสภาพแวดล้อมเช่น WordPress ไซต์ Eleventy ส่วนใหญ่ไม่ต้องการปลั๊กอินใด ๆ มีปลั๊กอินบางตัว แต่ไม่จำเป็นสำหรับฟังก์ชันที่จำเป็น

เมื่อสร้างด้วย Eleventy คุณสามารถเพิ่มคุณสมบัติได้ตามต้องการ อันที่จริง คุณสามารถใช้ HTML ได้และไม่เคยทำงานกับภาษาเทมเพลตอื่นๆ เลย Eleventy นั้นซับซ้อนเท่าที่โครงการของคุณต้องการเท่านั้น!

การทำความเข้าใจแนวคิดสิบเอ็ดที่สำคัญ

มาดูคำศัพท์และแนวคิดสองสามข้อที่จะช่วยให้คุณประสบความสำเร็จในการสร้างโครงการ Eleventy ของคุณกันดีกว่า

เลย์เอาต์และเทมเพลต

คุณอาจคิดว่าคำศัพท์เหล่านี้ใช้แทนกันได้ แต่ในบริบทของ Eleventy คำเหล่านี้มีความหมายตามบริบท:

• เทมเพลตเป็นคำทั่วไปสำหรับไฟล์เนื้อหาทั้งหมด
• เลย์เอาต์คือเทมเพลตพิเศษที่รวมเนื้อหาอื่นๆ

ตัวอย่างเช่น เทมเพลต อ้างอิงถึงไฟล์ Markdown ทั้งหมดของคุณ ในขณะที่ เล ย์เอาต์อาจเป็นไฟล์ Nunjucks ที่มีต้นแบบ HTML5 และช่องสำหรับเนื้อหาเทมเพลต เราจะเรียนรู้วิธีใช้งานในส่วนการเริ่มต้นใช้งาน

ตัวกรองและรหัสย่อ

นี่เป็นวิธีเพิ่มเติมในการแก้ไขผลลัพธ์ของเนื้อหา และสร้างส่วนเทมเพลตที่นำกลับมาใช้ใหม่ได้ ใช้ได้กับการสร้างเทมเพลต Nunjucks, Liquid, Handlebars และ JavaScript ตัวกรองและรหัสย่อถูกกำหนดไว้ใน . .eleventy.js

นอกเหนือจากตัวแปรและโอเปอเรเตอร์ในภาษาเทมเพลตที่คุณเลือกแล้ว Eleventy ยังได้รวมแนวคิดของตัวกรองในภาษาที่แสดงไว้ก่อนหน้านี้เป็นอันหนึ่งอันเดียวกัน ตัวกรองจะแปลงเนื้อหาในลักษณะเฉพาะสำหรับประเภทเนื้อหา ตัวอย่างเช่น คุณอาจสร้างตัวกรองสำหรับสตริงเพื่อเป็นตัวพิมพ์ใหญ่ หรือคุณอาจมีตัวกรองที่ใช้กับอาร์เรย์เพื่อแก้ไขสิ่งที่ส่งคืน เช่น การเลือกรายการแบบสุ่ม ตัวกรองบางตัวมีให้โดย Eleventy ซึ่งบางส่วนเราจะใช้ในบทแนะนำการเริ่มต้นใช้งาน

รหัสย่ออนุญาตให้สร้างส่วนเทมเพลตที่นำกลับมาใช้ใหม่ได้และสามารถยอมรับอาร์กิวเมนต์ได้ พวกเขาสามารถเป็นแบบสแตนด์อโลนหรือจับคู่ได้ หมายความว่าพวกเขาห่อเนื้อหาด้วยแท็กเริ่มต้นและสิ้นสุด

หนึ่งในรหัสย่อที่ฉันชอบคือการแสดงปีปัจจุบัน — หมายถึงปีที่ลิขสิทธิ์ไม่ล้าสมัยอีกต่อไปในส่วนท้ายของคุณ! ต่อไปนี้เป็นวิธีสร้างรหัสย่อ year :

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

หากต้องการใช้ในเทมเพลต Nunjucks หรือ Liquid จะมีลักษณะดังนี้: {% year %}

คุณสามารถตรวจสอบเอกสาร Eleventy เพื่อดูตัวอย่างรหัสย่อที่จับคู่

ของสะสม

คอลเล็กชันคือกลุ่มของเนื้อหาที่เกี่ยวข้อง และโดยทั่วไปจะถูกสร้างขึ้นภายใน frontmatter โดยการกำหนด tags ตัวเลือกไวยากรณ์แท็กประกอบด้วยสตริงเดี่ยว อาร์เรย์บรรทัดเดียว — ["tagA", "tagB"] - สำหรับรายการแบบทวีคูณ หรือรายการสไตล์ YAML เพื่อกำหนดแท็กหลายรายการ ตัวอย่างเช่น ฉันสามารถสร้างคอลเลกชัน "หน้า" โดยเพิ่ม frontmatter ต่อไปนี้ในเนื้อหาทั้งหมดที่ฉันต้องการให้รวมอยู่ในคอลเลกชันนั้น:

 --- tags: pages ---

เมื่อคุณกำหนดคอลเล็กชันแล้ว คุณสามารถเข้าถึงได้ผ่านภาษาเทมเพลตที่คุณเลือกภายในออบเจ็กต์ collections ส่วนกลาง ในการเข้าถึงคอลเล็กชัน "หน้า" ของเราจะมีลักษณะเหมือน collections.pages ซึ่งจะส่งคืนอาร์เรย์ของข้อมูลของคอลเลกชันนั้น และเพื่อให้คุณสามารถดำเนินการกับอาร์เรย์ได้ เช่น การวนซ้ำ เช่น เพื่อสร้างรายการลิงก์หรือการ์ดทีเซอร์ของบทความ คุณยังสามารถระงับเอาต์พุตไฟล์ปกติและใช้เฉพาะคอลเลกชันเพื่อจัดการการแสดงข้อมูล ซึ่งมีประโยชน์สำหรับการจัดการเนื้อหาไซต์แบบหน้าเดียว

ข้อมูลที่กำหนดเอง

จนถึงตอนนี้ เราได้พูดคุยเกี่ยวกับการสร้างเนื้อหาเป็นไฟล์ แต่ Eleventy ยังทำให้ง่ายต่อการดูแลรักษาแหล่งข้อมูลต่างๆ สิ่งนี้เรียกว่า "ข้อมูลที่กำหนดเอง" และใช้งานได้เหมือนการส่งออกโมดูล JavaScript หรือไฟล์ JSON ในไดเร็กทอรี _data

ข้อมูลที่กำหนดเองสามารถใช้เพื่อ:

• กำหนดอาร์เรย์ JSON พื้นฐาน
• ส่งกลับผลลัพธ์ของการดำเนินการดึงข้อมูล
• ดึงและจัดรูปแบบเนื้อหาใหม่จาก CMS ที่ไม่มีส่วนหัว

Eleventy ทำให้ข้อมูลทั้งหมดจากภายใน _data พร้อมใช้งานภายใต้ตัวแปรที่ตรงกับชื่อไฟล์ ตัวอย่างเช่น ถ้าฉันสร้าง posts.json ฉันสามารถเข้าถึงสิ่งนั้นได้ในเทมเพลตของฉันเป็น posts เมื่อใช้ Nunjucks นี่คือตัวอย่างของการวนซ้ำข้อมูล posts :

 {% for post in posts %} {{ post.title }} {% endfor %}

การแบ่งหน้าและการสร้างหน้าจากข้อมูล

ในแง่สิบเอ็ด การแบ่งหน้าหมายถึงการวนซ้ำชุดข้อมูลและกำหนดเทมเพลตสำหรับผลลัพธ์ของ "กลุ่ม" ของข้อมูลนั้น สิ่งนี้ทำได้ด้วยไฟล์เฉพาะที่กำหนดการแบ่งหน้าภายใน frontmatter ไฟล์นี้ยังรวมถึงการตั้งค่าเอาต์พุตที่คุณต้องการสำหรับข้อมูล ซึ่งหมายความว่าไฟล์จะกลายเป็นเทมเพลตของตัวเองเช่นกัน เราสามารถกำหนดรูปแบบเพื่อส่งเนื้อหาไปและเพิ่มแท็กเพื่อสร้างคอลเลกชันเพื่อความสะดวกในการอ้างอิงและความยืดหยุ่นสำหรับผลลัพธ์

หมายเหตุ : หากคุณใช้ข้อมูลที่กำหนดเองเพื่อดึงเนื้อหาจาก CMS การแบ่งหน้าเป็นวิธี Eleventy ที่คุณกำลังมองหาเพื่อเปลี่ยนข้อมูลนั้นเป็นหน้าเว็บแบบไดนามิก

ต่อไปนี้คือตัวอย่างการอ้างอิงข้อมูลที่กำหนดเองของ posts ซึ่งเราจะถือว่าเรากำลังดึงข้อมูลจากการดึงข้อมูลจาก CMS ที่ไม่มีส่วนหัว ที่สำคัญ size ถูกตั้งค่าเป็น 1 ซึ่งหมายความว่า "ส่วนการแบ่งหน้า" แต่ละอันควรสร้างเอาต์พุตหน้าเดียว จากนั้นเราใช้ alias เพื่อสร้างการอ้างอิงไปยังรายการปัจจุบันในลูปการแบ่งหน้า จากนั้นใช้การอ้างอิงนั้นในคำจำกัดความของ permalink และเนื้อหาเทมเพลต

ไฟล์ที่กำหนดการแบ่งหน้าสามารถอยู่ได้ทุกที่ที่คุณต้องการภายในไดเร็กทอรีอินพุตของคุณ การกำหนดลักษณะองค์กรของฉันคือการ generate ไดเร็กทอรีที่สร้าง จากนั้นตั้งชื่อให้เหมือนกับคอลเล็กชันที่จะสร้าง พิจารณาสิ่งต่อไปนี้เพื่อ src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

ในกรณีนี้ permalink จะกำหนดหน้าที่ให้ส่งออกโดยตรงจากรากของไซต์ คุณสามารถเปลี่ยนเพื่อเพิ่มคำนำหน้าเช่น /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} ตัวอย่างเช่น

นอกจากนี้ หากคุณต้องการให้หน้าที่สร้างขึ้นทั้งหมดพร้อมใช้งานในคอลเลกชันที่สร้างโดยแท็ก คุณต้องตั้งค่า addAllPagesToCollections true เพื่อรวมมากกว่ารายการแรก

สุดท้ายนี้ หากเนื้อหาของคุณเข้ามาในรูปแบบ Markdown แทนที่จะเป็น HTML ที่คอมไพล์ล่วงหน้า คุณจะต้องใช้ templateEngineOverride ในตัวอย่างข้อมูลโค้ด ฉันได้ตั้งค่าเป็น njk, md ซึ่งหมายความว่าเนื้อหาเทมเพลตจะต้องได้รับการประมวลผลเป็น Nunjucks เพื่อแปลงตัวแปร จากนั้น Markdown เพื่อคอมไพล์เนื้อหาที่ส่งคืนในตัวแปร

หากคุณสงสัยว่าความ safe หมายถึงอะไร เราจะมาเรียนรู้กันต่อไป!

วิธีเริ่มต้นกับ Eleventy

เอาล่ะ คุณพร้อมแล้วที่จะเริ่มต้นกับโปรเจ็กต์ Eleventy แรกของคุณ! บทช่วยสอนสั้น ๆ นี้จะช่วยให้คุณมีโครงสร้างเริ่มต้นสำหรับสร้างต่อ เราจะใช้แนวคิดที่เราได้เรียนรู้ไปแล้วและเพิ่มแนวคิดใหม่ๆ ด้วยเช่นกัน

หมายเหตุสำคัญประการแรกที่นี่คือ Eleventy เป็นแพ็คเกจที่มีขอบเขต ดังนั้นนี่คือคำสั่งติดตั้ง:

 npm install @11ty/eleventy

ต่อไป ความสะดวกที่ฉันชอบทำคือเพิ่มสคริปต์ต่อไปนี้ใน package.json ของฉัน:

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

ดังที่ได้กล่าวไว้ก่อนหน้านี้ แฟ --serve จะเปิดใช้งานเซิร์ฟเวอร์ภายในเครื่องผ่าน BrowserSync

ฉันชอบที่จะอัปเดตไดเร็กทอรีอินพุต/เอาต์พุตตามที่เราได้ดูไปแล้ว ดังนั้นตอนนี้ก็ถึงเวลาสร้างเนื้อหาบางส่วนภายใน src หรือไดเร็กทอรีอินพุตที่คุณเลือก

เพื่อเตรียมโครงการของเราให้มีความยืดหยุ่นและปรับขนาดได้ตั้งแต่เริ่มต้น ขอแนะนำให้สร้างอย่างน้อยหนึ่งรูปแบบที่มีต้นแบบ HTML5 จำเป็นต้องกำหนดเลย์เอาต์ภายใน _includes ที่เรียกว่าโดยตรง ซึ่งเป็นหนึ่งในไดเร็กทอรีที่คาดไว้จำนวนหนึ่ง

แบบแผนที่คุณมักจะพบในการเริ่มต้นคือการเรียกรูปแบบ base นี้ ฉันชอบทำให้เป็นไฟล์ Nunjucks

นี่คือตัวอย่าง base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

วงเล็บปีกกาคู่คือไวยากรณ์ Nunjucks สำหรับตัวแปร ที่นี่ เราได้เตรียมไว้สำหรับตัวแปร title ที่เข้ามา ซึ่งจะส่งผ่านทางส่วนหน้าในไม่ช้า ตัวแปร content จัดทำโดย Eleventy และทำเครื่องหมายช่องที่เนื้อหาที่ไม่ใช่ส่วนหน้าที่เข้ามาทั้งหมดควรไป ที่สำคัญ ค่านี้ใช้ร่วมกับตัวกรองที่ safe ที่ให้มา ซึ่งป้องกันไม่ให้ HTML ที่คอมไพล์แล้วถูก Escape และแสดงผล

ตอนนี้ได้เวลาสร้างดัชนีเว็บไซต์ของเรา ซึ่งเราจะเพิ่มเป็น index.md :

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

สังเกตว่าในส่วนหน้าเราได้เพิ่มชื่อของเราและกำหนดรูปแบบด้วย

ณ จุดนี้ เราสามารถเรียกใช้โครงการของเราด้วยสคริปต์ที่เราเพิ่ม: npm start การดำเนินการนี้จะทริกเกอร์ BrowserSync เพื่อตั้งค่า localhost:8080 (หากมี) แต่คุณจะต้องเปิดด้วยตนเองในเบราว์เซอร์ ดูเคล็ดลับด่วนนี้หากต้องการให้เปิดเบราว์เซอร์โดยอัตโนมัติ

ขั้นตอนสุดท้ายที่สำคัญคือการเพิ่มสไตล์ชีต ขณะนี้ CSS ไม่เป็นที่รู้จักว่าเป็นประเภทไฟล์ที่รวมโดยอัตโนมัติ ดังนั้นเราจะมีขั้นตอนการกำหนดค่าเพิ่มเติมหนึ่งขั้นตอนหลังจากที่เราสร้างสไตล์ชีตของเรา

คุณสามารถเพิ่มไฟล์ CSS ได้ทุกที่ที่ต้องการในไดเร็กทอรีอินพุต เช่น css/style.css จากนั้นเปิด .eleventy.js (หรือสร้างในรูทโปรเจ็กต์หากคุณไม่ได้ปรับแต่งอินพุต/เอาต์พุต) และเพิ่มสิ่งต่อไปนี้

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

ขั้นแรก เราเพิ่มไดเร็กทอรี css เป็น "passthrough copy" ซึ่งหมายความว่า Eleventy ควรรวมไว้ในไดเร็กทอรีพุชไปยังไดเร็กทอรีเอาต์พุต จากนั้นเรายังเพิ่มเป็น "เป้าหมายการดู" เพื่อที่เมื่อเราเปลี่ยนแปลงสไตล์ของเราในขณะที่เรียกใช้คำสั่ง start Eleventy จะทริกเกอร์การสร้างใหม่เพื่ออัปเดตไซต์ในพื้นที่ของเรา

สุดท้ายนี้ เราต้องไม่ลืมที่จะเพิ่มลิงก์ไปยังสไตล์ชีตของเราภายในรูปแบบ base ของเรา:

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

เมื่อเรากำหนดตำแหน่งของสไตล์ชีต เราจะส่งต่อผ่านตัวกรอง url ของ Eleventy ซึ่งจะปรับเส้นทางของไฟล์ที่เกี่ยวข้องตามความจำเป็นในบิลด์

ต่อไป มาสร้างประเภทโพสต์ "หน้า" เพื่อสำรวจโดยใช้คอลเล็กชันและเลย์เอาต์เพิ่มเติมอีกเล็กน้อย ในการดำเนินการนี้ ให้เพิ่มไดเร็กทอรีของ pages และสร้างไฟล์ Markdown หนึ่งหรือสองไฟล์ รวมถึงปุ่ม front-matter key แต่ ไม่ใช่ เล title เอาต์

เราจะใช้วิธีการที่แตกต่างออกไปเล็กน้อยเพื่อกำหนดเลย์เอาต์ในครั้งนี้ — ไฟล์ไดเร็กทอรีข้อมูล ไฟล์นี้มีรูปแบบโดยทั่วไปเป็น JSON และทำให้เราสามารถเพิ่มข้อมูลที่ควรใช้กับไฟล์ทั้งหมดภายในไดเร็กทอรี ซึ่งช่วยป้องกันไม่ให้ต้องทำซ้ำในไฟล์ต่างๆ ไฟล์ต้องมีชื่อเหมือนกับไดเร็กทอรีที่จะใช้ ดังนั้นให้สร้างไฟล์ pages.json และเพิ่มเนื้อหาต่อไปนี้:

 { "layout": "page.njk", "tags": "pages" }

เรายังดำเนินการกำหนดแท็กเพื่อสร้างคอลเลกชัน "หน้า" แต่เลย์เอาต์ที่เรากำหนดยังไม่มีอยู่จริง ดังนั้นให้สร้าง _includes/page.njk แล้วเพิ่มสิ่งต่อไปนี้:

 --- layout: base.njk --- <article> {{ content | safe }} </article>

เราใช้แนวคิด Eleventy ของ การโยงเค้าโครง เพื่อให้สามารถใช้เทมเพลต base ของเราซ้ำได้ แต่ยังเพิ่มองค์ประกอบเฉพาะสำหรับการจัดวาง page ของเรา ซึ่งก็คือ <article> ซึ่งหมายความว่าเนื้อหาทั้งหมดในหน้าของเราจะใช้ทั้งเค้าโครง page และเค้าโครง base

การโยงโครงร่างช่วยลดความซ้ำซ้อนโดยอนุญาตให้นำต้นแบบและโครงสร้างเลย์เอาต์ของไซต์ฐานกลับมาใช้ใหม่ได้

ตอนนี้เราได้สร้างเนื้อหาสำหรับประเภทเนื้อหาของ pages และกำหนดให้เป็นคอลเล็กชัน "หน้า" ผ่านแท็กแล้ว มาดูกันว่าเราสามารถเข้าถึงคอลเล็กชันนั้นได้อย่างไร ในที่นี้ เราจะใช้ Nunjucks เพื่อวนรอบคอลเล็กชันและแสดงรายการลิงก์ไปยังแต่ละหน้า ลูปนี้จะถูกเพิ่มเข้าไปในไฟล์ index.md ของเรา

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

เราได้ทำสิ่งที่ไม่เหมือนใครซึ่งก็คือ ด้านใน ของลูปจะสลับกลับไปที่ Markdown เพื่อแสดงลิงก์ นี่ไม่ใช่วิธีที่จำเป็นในการจัดการสถานการณ์นี้ แต่มีประโยชน์มาก! บางครั้งอาจใช้ไม่ได้ผล ทั้งนี้ขึ้นอยู่กับความซับซ้อน เหตุผลที่แท้จริงก็คือตัวแสดงภาพ Markdown ตั้งค่าเริ่มต้นเป็นภาษาเทมเพลต Liquid ดังนั้นหากคุณใช้ฟีเจอร์ Nunjucks ที่นอกเหนือไปจากลูปพื้นฐาน คุณจะต้องแจ้งให้ Eleventy ทราบวิธีดำเนินการกับไฟล์

ในส่วนก่อนหน้าของการแบ่งหน้า เราได้พิจารณาวิธีแก้ปัญหานี้แล้ว และนั่นคือการใช้ประโยชน์จาก templateEngineOverride เพื่อระบุว่าไฟล์ควรได้รับการประมวลผลเป็นทั้ง Nunjucks และ Markdown ควรวางโซลูชันแบบเต็มต่อไปนี้ไว้ในส่วนหน้าของเทมเพลต: templateEngineOverride: njk, md

ณ จุดนี้ คุณได้สร้างไซต์พื้นฐานหลายหน้าแล้ว! หากคุณต้องการใช้ข้อมูลภายนอก ให้ข้ามกลับไปที่ส่วน การแบ่งหน้า

วิธีอื่นในการเริ่มโครงการที่สิบเอ็ด

ในขณะที่เครื่องมือสร้างไซต์และสภาพแวดล้อมแบบสแตติกอื่นๆ เช่น WordPress มีแนวคิดของ "ธีม" แต่ Eleventy ใช้คำว่า "starter" มีคอลเลกชั่นเพิ่มขึ้นเรื่อยๆ ให้เลือก และหลายคอลเล็กชันสามารถพบได้ในรายการภายใน Eleventy docs

ความชอบของฉันคือการใช้ Sass กับโปรเจ็กต์ Eleventy ของฉัน และฉันมี Sass starter ที่พร้อมใช้งานหากคุณต้องการดูวิธีเพิ่มสิ่งนั้นลงในกระบวนการสร้างของคุณ คนอื่นอาจเลือกที่จะเพิ่มในอึกหากพวกเขาคุ้นเคยกับการสร้างไปป์ไลน์สำหรับสินทรัพย์และการประมวลผล

ฉันยังได้สร้างเครื่องมือเริ่มต้นขั้นต่ำที่มีคุณลักษณะต่างๆ ที่กล่าวถึงในบทความนี้ และแชร์ความคล้ายคลึงกันกับผลการสอน นอกจากนี้ยังมีตัวอย่างเล็กๆ ในการดึงข้อมูลภายนอก และแสดงวิธีการเพิ่มบางส่วนเพื่อแสดงการนำทางไซต์ตามคอลเลกชัน

การขยายพื้นฐาน

เมื่อคุณได้ทดลองสร้างไซต์แรกของคุณด้วยเนื้อหาพื้นฐานและอาจมีข้อมูลที่กำหนดเองแล้ว การทราบวิธีเพิ่มเติมในการทำงานกับเนื้อหานั้นมีประโยชน์ นี่คือภาพรวมโดยย่อของแนวคิดอื่นๆ ที่ควรทราบ

การแก้ไขประเภทเอาต์พุตของไฟล์ด้วยลิงก์ถาวร

ฉันได้กล่าวไว้ก่อนหน้านี้ว่าลิงก์ถาวรมีพลังพิเศษ และนั่นคือคุณสามารถใช้มันเพื่อส่งออกประเภทไฟล์ที่ไม่ใช่ HTML

ตัวอย่างที่มีประโยชน์สองตัวอย่างคือการสร้างฟีด RSS และแผนผังเว็บไซต์ ซึ่งทั้งสองอย่างนี้มักเป็นไฟล์ XML สิ่งที่มีประสิทธิภาพจริงๆ คือ คุณสามารถใช้ภาษาเทมเพลตที่คุณเลือกต่อไปเพื่อช่วยสร้างไฟล์เหล่านั้นได้ ดังนั้นคุณจึงสามารถวนซ้ำข้อมูลหน้าด้วย Nunjucks เพื่อให้ฟีด RSS ของคุณสดใหม่อยู่เสมอ เป็นต้น

การปรับแต่งคอลเลกชั่น

บางครั้งการใช้แท็กเพื่อสร้างคอลเลกชันอาจไม่เพียงพอ หรือคุณอาจต้องการสร้างรูปแบบที่กรองแล้วของคอลเลกชันที่มีอยู่ เราสามารถแก้ไขหรือสร้างคอลเลกชันโดยใช้ชุดของฟังก์ชันที่มีให้ สิ่งเหล่านี้จะอยู่ในไฟล์กำหนดค่า . .eleventy.js

ในตัวอย่างนี้ เรากำลังใช้ฟังก์ชัน addCollection เพื่อกรองรายการในคอลเลกชันที่มีอยู่ คอลเลกชั่นใหม่จะขึ้นอยู่กับการมีอยู่ของ customKey ในส่วนหน้า คีย์นี้ส่งคืนจากอ็อบเจ็กต์ data ซึ่งแนบกับเนื้อหา Eleventy ที่สร้างขึ้นทั้งหมด

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

คุณสามารถตรวจสอบวิธีอื่นๆ ในการสร้าง แก้ไข และใช้คอลเลกชั่นได้ในเอกสาร Eleventy

การทำงานกับ Data Cascade

Eleventy มีแนวคิดที่สมบูรณ์มากขึ้นเกี่ยวกับวิธีการรวบรวมข้อมูลสำหรับเทมเพลตที่เรียกว่า data cascade ซึ่งเราเพิ่งเริ่มสำรวจในคู่มือนี้ คุณจะได้รับประโยชน์สูงสุดจาก Eleventy หากคุณทบทวนวิธีการทำงานโดยเริ่มในเอกสาร เบ็น ไมเยอร์สยังมีคำแนะนำที่ดีในการทำความเข้าใจการเรียงซ้อนข้อมูล

ปลั๊กอินสิบเอ็ดที่แนะนำ

ในบทนำ ฉันได้กล่าวถึงสั้น ๆ ว่ามีปลั๊กอิน แต่ไม่จำเป็นเสมอไป อย่างไรก็ตาม มีบางส่วนที่ฉันมักจะใช้ในโครงการส่วนใหญ่ ซึ่งรวมถึง:

• @11ty/eleventy-plugin-rss หากคุณต้องการฟีด RSS ปลั๊กอินอย่างเป็นทางการนี้มีตัวกรองเพื่อช่วยคุณสร้างฟีด repo ที่เชื่อมโยงมีฟีดตัวอย่าง ซึ่งคุณอาจพบว่ามีการใช้งานอยู่ภายในตัวเริ่มต้นบางตัว
• @ 11ty/eleventy-plugin-syntaxhighlight แทนที่จะโหลด Prism เป็นสคริปต์สำหรับการเน้นโค้ด ปลั๊กอินนี้อนุญาตให้ใช้การประมวลผลเป็นส่วนหนึ่งของกระบวนการสร้าง Eleventy ซึ่งหมายความว่าบล็อกโค้ดจะถูกแปลงเพื่อรวมคลาสสำหรับการใช้ธีม Prism ล่วงหน้า ดังนั้นคุณจะต้องเพิ่มธีม Prism CSS ที่คุณเลือกเท่านั้น
• @ 11tyrocks/eleventy-plugin-social-images คุณลักษณะที่ฉันค้นหาในช่วงต้นของการสำรวจ Eleventy ของฉันคือความสามารถในการสร้างภาพแชร์บนโซเชียลมีเดีย สิ่งนี้ทำให้ฉันสร้างปลั๊กอินที่ใช้ Puppeteer อยู่เบื้องหลังเพื่อถ่ายภาพ ปลั๊กอินมาพร้อมกับเทมเพลตที่สร้างไว้ล่วงหน้ารวมถึงตัวเลือกการกำหนดค่าเพื่อกำหนดไฟล์เทมเพลตของคุณเอง

ฉันยังแนะนำให้ทำความคุ้นเคยกับปลั๊กอินอย่างเป็นทางการของ Eleventy ที่เหลือ เนื่องจากพวกมันตอบสนองความต้องการทั่วไปอื่น ๆ รวมถึงการนำทางและการจัดการรูปภาพ

ตัดสินใจว่า Eleventy เหมาะสมกับโครงการของคุณหรือไม่

เช่นเดียวกับไซต์สแตติกส่วนใหญ่ ไซต์ 11 แห่งเหมาะที่สุดสำหรับเนื้อหาที่ไม่จำเป็นต้องแสดงแบบไดนามิกหรือแบบออนดีมานด์ตามปกติ นี่ไม่ได้หมายความว่าเว็บไซต์ ทั้งหมด จะต้องเป็นแบบคงที่ หรือไม่มีทางที่จะทำให้เนื้อหาเป็นไดนามิกได้ คุณยังคงสามารถโหลด JavaScript เพื่อเปิดใช้งานเนื้อหาแบบไดนามิก เช่น การดึงข้อมูลจาก API หรือการสร้างวิดเจ็ตแบบโต้ตอบ คุณยังสามารถใช้บริการต่างๆ เช่น IFTTT หรือ Zapier เพื่ออำนวยความสะดวกในการสร้างไซต์ของคุณใหม่ได้ หากโฮสต์ของคุณสนับสนุนการสร้างเว็บฮุค และคุณมีส่วนที่คุณต้องการรีเฟรชตามกำหนดเวลา

ต้องขอบคุณข้อมูลที่กำหนดเองและการแบ่งหน้า เราพบว่าการรวมข้อมูลภายนอกเป็นเรื่องง่าย เช่น จาก CMS ที่ไม่มีส่วนหัวหรือ API อื่นๆ ดังนั้นแม้ว่าจะให้บริการแบบคงที่ แต่คุณยังคงมีความยืดหยุ่นมากในการดึงเนื้อหาและวิธีจัดการ

สิ่งที่ฉันชอบเกี่ยวกับ Eleventy ก็คือ มันไม่ได้กำหนดความคิดเห็นมากมายเกี่ยวกับวิธีที่ฉันควรจัดโครงสร้างไซต์ของฉัน นอกเหนือจากไดเร็กทอรีที่เราพูดถึงสำหรับ _includes และ _data (และคุณสามารถอัปเดตรูปแบบการตั้งชื่อของไดเร็กทอรีเหล่านั้นได้ด้วย) นอกจากนี้ยังมีประโยชน์หากคุณต้องการย้ายไซต์และอาจย้ายโครงสร้างไฟล์ที่มีอยู่บางส่วนได้เช่นกัน อย่างไรก็ตาม หากคุณต้องการสถาปัตยกรรมที่มีความคิดเห็นมากกว่า คุณอาจจะมองหาทางเลือกอื่น

ฉันยังสนุกกับวิธีที่ฉันสามารถปั้น Eleventy ให้เข้ากับโมเดลจิตของฉันสำหรับโปรเจ็กต์ที่กำหนดโดยใช้ประโยชน์จากภาษาเทมเพลตหลายภาษา รวมถึงตัวกรอง รหัสย่อ และเลย์เอาต์ ผู้เริ่มต้นยังช่วยส่งเสริมเพื่อให้คุณสามารถจดจ่อกับสิ่งที่สำคัญจริงๆ นั่นคือเนื้อหาของคุณ และประสิทธิภาพสูงของเอาต์พุตแบบคงที่ล้วนก็เป็นประโยชน์อย่างยิ่งเช่นกัน

หากคุณต้องการกระบวนการสร้างเพิ่มอีกเล็กน้อย คุณสามารถเพิ่มเครื่องมืออื่นๆ ที่คุ้นเคย เช่น Webpack, Gulp หรือ Parcel คุณอาจสามารถหาสตาร์ทเตอร์ที่มีสิ่งเหล่านี้อยู่แล้ว โปรดทราบว่าคุณยังสามารถใช้ประโยชน์จากสคริปต์โหนดซึ่งมีอยู่ในกระบวนการบิลด์ Eleventy อยู่แล้ว

Eleventy มีความสามารถในการจัดการการสร้างเพจจำนวนมาก มันถูกใช้สำหรับไซต์ขนาดใหญ่และซับซ้อนเช่น web.dev ของ Google และไซต์การตลาดของ Netlify ฉันยังใช้ Eleventy เพื่อจุดประสงค์ที่แปลกใหม่ เช่น เครื่องมือสร้างอีเมลและส่วนประกอบเว็บ ร่วมกับสิ่งอื่นๆ ที่อธิบายไว้ในภาพรวมนี้

แหล่งข้อมูลเพิ่มเติม

ฉันหวังว่าคู่มือนี้จะดึงดูดความสนใจของคุณและเตรียมคุณให้พร้อมสำหรับการเริ่มต้นใช้งาน Eleventy! มันรวมประเด็นมากมายที่ฉันพบว่ายากที่จะค้นพบเมื่อฉันสร้างโครงการแรกของฉันด้วย ตั้งแต่ฉันพบ Eleventy ครั้งแรกในเดือนเมษายน 2020 ฉันได้สร้างโครงการ Eleventy ไปแล้วกว่า 20 โปรเจ็กต์ โดยนับการเริ่มต้น ปลั๊กอิน โปรเจ็กต์เสริม และเนื้อหาหลักสูตร สิ่งเหล่านี้สามารถพบได้บนเว็บไซต์ของฉัน 11ty.Rocks ซึ่งมีบทแนะนำและเคล็ดลับด้วย สิบเอ็ดสิบเป็นสิ่งที่ฉันสนุกกับการพูดคุยมาก ดังนั้นอย่าลังเลที่จะติดต่อบน Twitter!

ต่อไปนี้เป็นแหล่งข้อมูลเพิ่มเติมเพื่อช่วยคุณในการเดินทางเพื่อเรียนรู้และรับประโยชน์สูงสุดจาก Eleventy:

• Andy Bell เสนอหลักสูตรแบบชำระเงินที่ครอบคลุมมาก - “เรียนรู้สิบเอ็ดสิบตั้งแต่เริ่มต้น”
• ชุดบทช่วยสอนของ Tatiana Mac ที่เริ่มต้นด้วย “คู่มือสำหรับผู้เริ่มต้นใช้งานจนถึงอายุ Eleventy” ให้คำอธิบายอย่างละเอียดซึ่งถือว่าไม่มีประสบการณ์กับตัวสร้างไซต์แบบคงที่มาก่อน
• Bryan Robinson เสนอหลักสูตร YouTube สำหรับการแปลงธีม HTML ฟรีเป็นไซต์ Eleventy

สุดท้ายนี้ ฉันต้องการทราบว่าชุมชน Eleventy มีขนาดเล็กแต่มีความกระตือรือร้น! หากคุณประสบปัญหาในการค้นหาข้อมูล คุณสามารถทวีตคำถามของคุณไปที่บัญชี @eleven_ty อย่างเป็นทางการ Zach Leatherman ผู้สร้างของ Eleventy ตอบคำถามอย่างรวดเร็วหรือ RT คำถามเพื่อช่วยให้คุณกลับมาเหมือนเดิม!