ธีมตามคอมโพเนนต์ด้วย Single Directory Component ของ Drupal

เผยแพร่แล้ว: 2023-06-13

ธีม Drupal เป็นพื้นที่ที่ไม่ถูกแตะต้องมานานโดยการอัปเดตที่รุนแรง แน่นอนว่ามีโมดูลที่สนับสนุนมากมายสำหรับการทำให้เวิร์กโฟลว์ง่ายขึ้นเล็กน้อย แต่วิธีการนอกกรอบสำหรับการสร้างธีมแบบกำหนดเองยังคงเหมือนเดิมไม่มากก็น้อย มีการพูดคุยกันเกี่ยวกับการมีกลไกการกำหนดธีมตามส่วนประกอบภายในคอร์ของ Drupal มาเป็นเวลานาน เข้าสู่ Single Directory Components (SDC) ซึ่งมีการพูดคุยกันมาระยะหนึ่งแล้วผ่านโมดูลที่สนับสนุนซึ่งจัดการโดยผู้สนับสนุน Drupal ที่โดดเด่น ได้แก่ Mateu Aguilo Bosch, Mike Herchel, Lauri Eskola และ Dave Reid แต่ตอนนี้ได้เข้าสู่แกนหลักของ Drupal (ปัจจุบันเป็นคุณลักษณะทดลอง) ในเวอร์ชัน 10.1

วิธีการสร้างแอปพลิเคชัน Drupal ตามส่วนประกอบนี้ไม่ใช่เรื่องใหม่ แต่ในที่สุดก็ทำให้เป็นแกนหลัก มันให้ขอบเขตใหม่ทั้งหมดสำหรับนักพัฒนาส่วนหน้าในการจัดระเบียบรหัสของพวกเขาในลักษณะที่สามารถบำรุงรักษาได้มากขึ้นด้วยเส้นโค้งการเรียนรู้ที่น้อยที่สุด ภายใน SDC ไฟล์ทั้งหมดที่จำเป็นในการเรนเดอร์คอมโพเนนต์ (Twig, CSS, JS ฯลฯ) จะถูกจัดกลุ่มเข้าด้วยกันในไดเร็กทอรีเดียว SDC มีศักยภาพในการปฏิวัติการพัฒนาฟรอนต์เอนด์ใน Drupal โดยช่วยให้นักพัฒนาสามารถใช้ประโยชน์จากเทคนิคฟรอนต์เอนด์ล่าสุด เสริมความแข็งแกร่งให้กับตำแหน่งของ Drupal ในฐานะ CMS ที่มีประสิทธิภาพและคาดการณ์ล่วงหน้าได้

วิธีการกำหนดธีมปัจจุบันของ Drupal

วิธีที่ง่ายที่สุดในการทำงานกับธีม Drupal คือการเพิ่มมาร์กอัปไปยังไฟล์ html.twig ภายในโฟลเดอร์เทมเพลต สำหรับสไตล์และลักษณะการทำงาน เราสร้างไฟล์ CSS และ JS ตามความต้องการของเอนทิตี และวางไว้ในโฟลเดอร์ CSS และ JS ตามลำดับ ซึ่งรวมถึงเมนูส่วนหัวของธีม เมนูส่วนท้าย บล็อก ภูมิภาค เนื้อหาแต่ละประเภทและโหมดมุมมองที่แตกต่างกัน มุมมองที่แตกต่างกัน ฯลฯ จากนั้นไฟล์เหล่านี้จะถูกประกาศในไฟล์ libraries.yml ซึ่งสามารถกล่าวถึงการอ้างอิง (ถ้ามี) ได้เช่นกัน ด้วยวิธีนี้พวกเขาสามารถโหลดได้ตามต้องการหรือทำให้ใช้ได้ทั่วโลก นอกเหนือจากนี้ ตรรกะการประมวลผลล่วงหน้าใดๆ จะเข้าไปในไฟล์ .theme เรามี breakpoints.yml เพื่อช่วยในการออกแบบที่ตอบสนอง และแน่นอน ไฟล์ .info.yml โดยไม่ต้องเสียแรงทั้งหมด

แม้ว่าสิ่งนี้ดูเหมือนจะเป็นงานที่ต้องทำอีกมากก่อนที่เราจะทำงานส่วนหน้าที่มีประโยชน์จริง ๆ แต่ก็มีตัวสร้างรหัสสำเร็จรูปบางตัวเช่น drush theme create ซึ่งตั้งใจจะสร้างโครงสร้างโฟลเดอร์ของธีมในลักษณะโต้ตอบและสร้าง โครงสร้างโฟลเดอร์ drupal มาตรฐาน

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

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

แนวทางของเราในการกำหนดธีมใน Specbee

ที่ Specbee เราได้กำหนดมาตรฐานวิธีการสร้างธีมของเราโดยใช้เครื่องมือ NPM ที่เรียกว่า Drupal Theme Init ที่เราพัฒนาตั้งแต่เริ่มต้นซึ่งเป็นแบบโอเพ่นซอร์ส ในฐานะที่เป็นตัวสร้าง Yeoman สามารถติดตั้งได้อย่างง่ายดายด้วย NPM/Yarn ซึ่งจะช่วยในการสร้างธีมที่กำหนดเองแบบโต้ตอบได้ แนวคิดของ Drupal Theme init คือมีแนวทางที่สอดคล้องกันในการที่ไฟล์ธีมถูกสร้างโดยปฏิบัติตามแนวทางปฏิบัติของ Drupal และเพื่อช่วยให้นักพัฒนาสามารถเริ่มทำงานกับธีมได้โดยไม่ต้องวุ่นวายกับการตั้งค่าไฟล์ทุกครั้งที่เริ่มโครงการใหม่ แนวคิดพื้นฐานของโครงสร้างคือการแบ่ง SASS ออกเป็นส่วนประกอบโดยใช้แบบแผน BEM ไฟล์ CSS แต่ละไฟล์ที่เกี่ยวข้องกับเอนทิตี เช่น บล็อก มุมมอง ประเภทเนื้อหา ฯลฯ มี CSS ของตัวเองที่สร้างขึ้นและแนบไปกับเอนทิตีนั้นไม่ว่าจะผ่านเทมเพลต twig หรือการประมวลผลล่วงหน้า เช่นเดียวกับไฟล์ JS การใช้ libraries.yml อย่างกว้างขวางช่วยให้เราจำกัดจำนวน CSS และ JS ที่เราแสดงผลบนหน้าเว็บ

ข้อดีของการตั้งค่าธีมด้วยวิธีนี้คือ เรามีระบบสำหรับการกำหนดธีมตามคอมโพเนนต์โดยไม่ต้องพึ่งไลบรารีหรือปลั๊กอินภายนอกใดๆ ช่วยเราแยกไลบรารี CSS/JS ตามคอมโพเนนต์ที่จะโหลดบนเพจ ซึ่งช่วยในเรื่องประสิทธิภาพ อย่างไรก็ตาม แนวทางนี้ยังคงมีข้อจำกัด โดยเฉพาะอย่างยิ่งเมื่อโครงการมีขนาดใหญ่ขึ้น การแยกส่วนประกอบออกเป็นระดับอะตอมกลายเป็นภาระเล็กน้อยเนื่องจากเราต้องดูแลรักษาไฟล์ libraries.yml ด้วยการอ้างอิงที่จำเป็น นอกจากนี้ ไม่มีวิธีง่ายๆ ที่เราจะสามารถรวมระบบการออกแบบเข้ากับโครงสร้างปัจจุบันได้อย่างเหมาะสม เนื่องจากเราจะต้องกำหนดพาธส่วนประกอบแต่ละรายการและการพึ่งพาด้วยตนเองในระบบการออกแบบด้วย เพื่อโหลดส่วนประกอบในนั้น

ธีมตามคอมโพเนนต์คืออะไร

แม้ว่าแนวทางวานิลลาจะดูค่อนข้างธรรมดา แต่ก็มีความก้าวหน้ามากมายในช่วงที่ผ่านมาผ่านโมดูลที่สนับสนุนเพื่อให้มีแนวทางที่ดีขึ้น หนึ่งในแนวทางที่ได้รับความนิยมคือการจินตนาการว่า UI เป็นคอลเล็กชันของหน่วยที่ใช้ซ้ำได้และสอดคล้องกันซึ่งเรียกว่า ส่วนประกอบ ในกรณีส่วนใหญ่ จะเป็นไปตาม Atomic Design ซึ่งแต่ละส่วนประกอบจะถูกแยกออกเป็นส่วนย่อยๆ โมดูลต่างๆ เช่น UI Patterns, Components! หรือไลบรารีคอมโพเนนต์เช่น PatternLab, Fractal และ Storybook ได้นำเสนอวิธีการใหม่ๆ ซึ่งทำให้การพัฒนาธีมมีความคล่องตัวและมีประสิทธิภาพมากขึ้น ธีมตามคอมโพเนนต์มีความได้เปรียบเหนือธีมแบบดั้งเดิม:

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

วิธีสร้างธีมตามส่วนประกอบใน Drupal

หนึ่งในวิธีที่โดดเด่นในการติดตามการพัฒนาตามคอมโพเนนต์คือการใช้ PatternLab ซึ่งได้รับการแนะนำมาระยะหนึ่งแล้ว เริ่มแรกมาพร้อมกับรุ่น Drupal ซึ่งถูกเก็บถาวรในขณะนี้และแทนที่ด้วยแพ็คเกจแบบโหนด การตั้งค่า PatternLab จำเป็นต้องติดตั้งโมดูล Components ซึ่งจะช่วยในการรับมาร์กอัปจากไฟล์ Twig นอกโฟลเดอร์เทมเพลตสำหรับ Drupal ตามด้วยการติดตั้งแพ็คเกจ patternlab ผ่าน npm ซึ่งให้ตัวเลือกในการสร้างเทมเพลตที่ใช้กิ่งไม้หรือหนวด (เห็นได้ชัดว่าเป็นกิ่งไม้สำหรับเรา) เมื่อดำเนินการเสร็จแล้ว เราก็มีคู่มือสไตล์ผู้คำนวณพร้อม รหัสสำเร็จรูปบางส่วนที่ช่วยในการสร้างคู่มือสไตล์ และโฟลเดอร์รูปแบบที่เราสร้างส่วนประกอบตามข้อกำหนด ส่วนประกอบเหล่านี้จะรวมอยู่ในไฟล์ html.twig ที่อยู่ภายในโฟลเดอร์เทมเพลต

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

วิธีสร้างธีมตามส่วนประกอบด้วย SDC

ด้วยเวอร์ชันเริ่มต้นของ SDC ที่เข้าสู่แกนกลางในฐานะโมดูลทดลอง จึงมีความตื่นเต้นมากมายรอบตัว SDC ได้รับการขนานนามว่าเป็นการเปลี่ยนแปลงครั้งใหญ่ที่สุดของ Drupal นับตั้งแต่มีการเปิดตัว Twig SDC อีกครั้งไม่ใช่โซลูชันที่สมบูรณ์สำหรับทีมพัฒนาส่วนหน้า แต่เป็นแนวทางที่ขับเคลื่อนด้วยส่วนประกอบในการกำหนดโครงสร้างพื้นฐานที่นอกกรอบ สิ่งนี้ยังสามารถขยายได้ด้วยโมดูลจำนวนหนึ่งสำหรับเวิร์กโฟลว์บางประเภท แนวคิดพื้นฐานคือทุกอย่างที่เกี่ยวข้องกับคอมโพเนนต์จะอยู่ภายในไดเร็กทอรีเดียว ซึ่งรวมถึงไฟล์ Component Twig, JS, CSS, เนื้อหาอื่นๆ และไฟล์ YAML ของสคีมาเดียวที่ประกาศคุณสมบัติของส่วนประกอบ

ประโยชน์บางประการของการใช้ SDC:

รหัสทั้งหมดที่เกี่ยวข้องกับส่วนประกอบอยู่ในไดเร็กทอรีเดียว (ตามชื่อที่แนะนำ!)
ไลบรารีสำหรับคอมโพเนนต์นั้นสร้างขึ้นโดยอัตโนมัติซึ่งนำไปสู่การบอบช้ำน้อยกว่าหากไม่ประกาศในไฟล์ libraries.yml แม้ว่าเรายังอาจต้องเพิ่มการพึ่งพาไปยังไฟล์ component.yml แต่การดำเนินการนี้ทำในที่เดียวแทนที่จะกระโดดไปที่ไฟล์ libraries.yml
มีช่วงการเรียนรู้ที่เล็กกว่ามากในการนำ SDC ไปใช้ หากคุณรู้พื้นฐานของธีม Drupal สิ่งที่คุณต้องทำคือเปิดใช้งานโมดูลนี้และเริ่มเขียนส่วนประกอบ
พลังของกิ่งไม้ (รวม / ขยาย / ฝัง) ยังคงมีอยู่ซึ่งช่วยในการนำโค้ดกลับมาใช้ใหม่
เนื่องจากส่วนประกอบเป็นปลั๊กอิน YML ซึ่ง Drupal สามารถค้นพบได้ง่ายและสามารถสลับได้ง่ายโดยส่วนประกอบที่มีโครงสร้าง API เดียวกัน
คอมโพเนนต์สามารถแสดงผลผ่านอาร์เรย์เรนเดอร์ได้ด้วย!
จัดเตรียมกลไกที่ดีในการรวมไลบรารีภายนอกเพื่ออำนวยความสะดวกให้กับระบบการออกแบบ
เมื่อมีการจัดระเบียบส่วนประกอบ ผลลัพธ์ที่ได้คือรูปลักษณ์และความรู้สึกที่สอดคล้องกันของผลิตภัณฑ์ขั้นสุดท้าย
รหัสสามารถทดสอบได้มากขึ้นเนื่องจากเรามีหน่วย (อ่านส่วนประกอบ) ที่สามารถทดสอบได้อย่างอิสระ
เนื่องจากเรากำหนดสคีมาภายในข้อกำหนด YAML ของคอมโพเนนต์ โมดูลจึงสามารถสร้างฟอร์มโดยอัตโนมัติเพื่อเติมข้อมูล

แม้ว่าปัจจุบันจะรวมอยู่ในฟีเจอร์ทดลองในแกนกลาง แต่การตั้งค่า SDC นั้นค่อนข้างง่าย สมมติว่ามีการติดตั้ง Drupal 10.1.x:

1. เปิดใช้งานโมดูลหลัก SDC รุ่นทดลอง

2. สร้างหรือใช้ธีมแบบกำหนดเองเพื่อเพิ่ม SDC เพื่อจุดประสงค์ของเรา เราได้สร้างธีมแบบกำหนดเองที่ชื่อว่า Ice Cream โดยมี Olivero เป็นธีมพื้นฐาน

3. เพื่อจุดประสงค์ของเรา ให้ใช้หน้าพื้นฐานที่แกะกล่องออกมา ฉันได้นำมันกลับมาใช้ใหม่โดยเพิ่มฟิลด์ชื่อเรื่องที่กำหนดเองและทำการปรับเปลี่ยนบางอย่างกับการแสดงผลซึ่งจะมีลักษณะดังนี้:

4. ไฟล์เทมเพลต twig ประกอบด้วยโค้ดพื้นฐาน:

5. สร้างโฟลเดอร์ชื่อ ส่วนประกอบ ภายในธีมที่คุณกำหนดเอง ซึ่งคล้ายกับการที่เรามีโฟลเดอร์ เทมเพลต สำหรับเทมเพลตของ Drupal

6. สำหรับตอนนี้ แนวคิดพื้นฐานคือการจัดรูปแบบชื่อเรื่องและคำอธิบาย ซึ่งจะใช้ซ้ำได้ตามธรรมชาติ มาสร้างส่วนประกอบที่เรียกว่าบทความง่ายๆ จะมีไฟล์ simple-article.component.yml และ simple-article.twig ที่เราต้องการ นอกเหนือจากนั้น เราจะเพิ่ม simple-article.css เพื่อจัดรูปแบบ

7. มาสร้างไฟล์ simple-article.twig กัน เราจะมีมาร์กอัปพื้นฐานสำหรับสิ่งนั้น

8. เพิ่มไฟล์ simple-article.component.yml ด้วย schema ที่กล่าวถึงใน https://www.drupal.org/node/3352951 แนวคิดคือการกำหนดสิ่งที่จะเป็นอินพุตไปยังไฟล์ทวิก มันจะมีลักษณะดังนี้สำหรับเรา:

9. มาเพิ่มสไตล์พื้นฐานให้กับคอมโพเนนต์ใน simple-article.css กัน

10. ล้างแคช

11. อะบราคาดาบร้า! คอมโพเนนต์พร้อมใช้งานแล้ว แต่ก็ยังต้อง ใช้ หากไม่มีสิ่งนั้น คอมโพเนนต์จะไม่ได้ใช้งานในโฟลเดอร์คอมโพเนนต์

12. รวมคอมโพเนนต์นี้ในไฟล์เทมเพลตที่ต้องการ (ไฟล์ html.twig ใต้โฟลเดอร์เทมเพลตในธีมที่กำหนดเอง) ด้วยรูปแบบ [ชื่อธีม:ชื่อคอมโพเนนต์] สังเกตคำสั่ง include ที่เรากำลังเพิ่มตัวแปร twig ที่จะใช้ในส่วนประกอบ

13. ตอนนี้ส่วนประกอบได้รับการเรนเดอร์ด้วยมาร์กอัปใหม่และสไตล์ที่ดีขึ้น

14. สังเกตมาร์กอัป หากเปิดใช้การดีบัก twig เราจะได้รับไอคอนพิเศษบางอย่างพร้อมกับการแสดงผลส่วนประกอบ SDC ของเรา

และนั่นแหล่ะ!

อ้างอิง

https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components
https://www.drupal.org/project/sdc
https://herchel.com/articles/creating-your-first-single-directory-component-within-drupal

ความคิดสุดท้าย

ด้วยวิธีการสร้าง SDC จะมีการพัฒนาอย่างเข้มข้นรอบด้าน หนึ่งในแทร็กยอดนิยมคือโมดูลจะตรวจจับส่วนประกอบโดยอัตโนมัติและแทรกฟอร์มที่เกี่ยวข้องลงใน Layout Builder, CKEditor, Paragraphs, Blocks, Fields ฯลฯ! นอกจากนี้ SDC ยังเล่นกับ Storybook ได้ดีผ่านโมดูลสนับสนุนที่เรียกว่า CL Server (ซึ่งดูแลโดยผู้ดูแลโครงการ SDC) มีโมดูลอื่น ๆ เช่น CL Devel, CL Generator และแม้แต่รูปแบบ UI ที่สร้างขึ้นรอบ ๆ SDC แล้ว

สิ่งนี้จะช่วยเราในการอัปเกรดตัวสร้างธีมของเราเอง (Drupal Theme Init) ซึ่งเราได้กล่าวถึงก่อนหน้านี้เพื่อให้ตัวเลือกในการใช้ SDC ร่วมกับระบบการออกแบบที่มีอยู่ โดยเฉพาะอย่างยิ่ง Storybook สิ่งนี้จะช่วยให้ทุกคนเริ่มใช้งาน SDC ได้ทันที ซึ่งปูทางไปสู่การพัฒนาธีมที่ดีขึ้น

หากคุณต้องการอ่านเนื้อหาที่น่าสนใจเพิ่มเติมบน Drupal สมัครรับจดหมายข่าวรายสัปดาห์ของเราวันนี้!