การเรียนรู้เครื่องมือสร้างเลย์เอาต์ Drupal 9: คำแนะนำที่ครอบคลุมเพื่อปรับแต่งการออกแบบเว็บไซต์ของคุณอย่างง่ายดาย

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

Drupal Layout Builder ที่โดดเด่นนำเสนอเครื่องมือออกแบบภาพที่มีศักยภาพเพื่อให้ผู้เขียนเนื้อหาปรับเปลี่ยนวิธีการนำเสนอเนื้อหาได้ Layout Builder ซึ่งถูกเพิ่มเข้าไปใน Drupal core ในเวอร์ชันล่าสุด Drupal 9 ช่วยให้คุณสามารถเพิ่ม/ลบส่วนต่างๆ เพื่อแสดงเนื้อหาโดยใช้เลย์เอาต์ต่างๆ และปรับแต่งหน้าของคุณตามที่คุณต้องการ ด้วย Layout Builder Module ของ Drupal 9 คุณสามารถผสมส่วนเหล่านี้เพื่อสร้างเพจที่ไม่เหมือนใคร

มีสองวิธีที่แตกต่างกันในการใช้ Drupal 9 Layout Builder: Layout Defaults (เพื่อออกแบบเลย์เอาต์สำหรับเนื้อหาทั้งหมดของประเภทเนื้อหา) และ Layout Overrides (เพื่อออกแบบเลย์เอาต์สำหรับรายการเนื้อหาเฉพาะ) คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับและเริ่มต้นใช้งานโมดูล Drupal 9 Layout Builder ด้วยความช่วยเหลือจากบล็อกนี้

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

แนะนำตัวสร้างเลย์เอาต์

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

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

ตัวสร้างโครงร่างมีสองโมดูล:

การค้นหาเลย์เอาต์ - ให้โมดูลหรือธีมในการลงทะเบียนเลย์เอาต์

Layout Builder - ช่วยให้ผู้ใช้สามารถเพิ่มและจัดระเบียบบล็อกและฟิลด์เนื้อหาในเนื้อหาได้โดยตรง

เมื่อออกแบบเลย์เอาต์ Layout Builder ใช้แนวคิดหลักสองประการ:

ส่วน - คอลัมน์หรือคอนเทนเนอร์ที่สามารถวางบล็อกได้ ตัวอย่างเช่น อาจเป็นเค้าโครง 2 คอลัมน์หรือเค้าโครง 3 คอลัมน์ เป็นต้น

บล็อก - องค์ประกอบเนื้อหาที่สามารถวางไว้ในส่วนต่างๆ

การติดตั้งและกำหนดค่าโมดูล Layout Builder

ไปที่ขยายและเปิดใช้งานโมดูล Layout Builder และ Layout Discovery เพื่อติดตั้งและกำหนดค่าโมดูล Drupal 9 layout builder

แก้ไขประเภทเนื้อหาและอนุกรมวิธาน

เมื่อติดตั้งโมดูลแล้ว ให้ไปที่ โครงสร้าง ประเภทเนื้อหา และเลือก "จัดการการแสดงผล" สำหรับเนื้อหาประเภทใดก็ได้ สำหรับตัวอย่างนี้ เราจะใช้ประเภทเนื้อหา "บทความ"

คลิกเมนูแบบเลื่อนลงตัวเลือกเค้าโครงที่ด้านล่างเพื่อเลือก "ใช้ตัวสร้างเค้าโครง" จากนั้นคลิกบันทึก

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

คุณจะเข้าสู่เค้าโครงประเภทเนื้อหาของบทความเมื่อคุณคลิก "จัดการเค้าโครง"

แทรกส่วนต่างๆ ลงในเค้าโครง

ลบส่วนเริ่มต้นออกก่อนที่จะเพิ่มส่วนอื่นๆ ลงในตัวสร้างเลย์เอาต์ เลือกปุ่ม "ปิด" (ตามที่ปรากฎในภาพหน้าจอด้านล่าง) นอกจากนี้ ปุ่มสำหรับลบส่วนเริ่มต้นจะพร้อมใช้งานสำหรับคุณทางด้านขวาของหน้าจอ จากนั้นเลือก "ลบ"

โดยการเลือกตัวเลือก "เพิ่มส่วน" มาเพิ่มส่วนสองสามส่วนในการจัดวางของเรา ทางด้านขวาของหน้าจอ จะมีตัวเลือกต่างๆ เสนอให้คุณเลือกเค้าโครงสำหรับส่วนของคุณ สำหรับตอนนี้ ให้เลือก "ส่วนสองคอลัมน์"

คุณจะได้รับตัวเลือกให้เลือกความกว้าง "เค้าโครงสองคอลัมน์" สำหรับตอนนี้ ให้เลือก "67%/33%" ถัดไป เลือก "เพิ่มส่วน"

หลังจากเพิ่มแล้ว พื้นที่แต่ละส่วนควรแสดงลิงก์ "เพิ่มบล็อก"

แทรกบล็อกลงในพื้นที่ของส่วน

คุณสามารถเพิ่มบล็อกลงในพื้นที่ของคุณหลังจากเลือกสำหรับเค้าโครง เพียงคลิก "เพิ่มบล็อก" จากนั้นตัวเลือก "เลือกบล็อก" จะเลื่อนออกมาจากด้านขวาเมื่อคุณต้องการเพิ่มบล็อก

การเลือกบล็อก

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

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

ทางด้านซ้ายของบล็อกจะมีพื้นที่เนื้อหา "เนื้อหา"

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

หากต้องการปรับแต่งเครื่องมือสร้างเลย์เอาต์ให้เป็นส่วนตัวยิ่งขึ้น มาลองเพิ่มฟิลด์อีกสองสามฟิลด์ในการออกแบบของเรา

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

การแทนที่เค้าโครง:

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

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

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

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

ในที่สุด เมื่อเรารวมบล็อกบทความล่าสุดแล้ว หน้าของเราจะปรากฏในลักษณะนี้

สิ่งสำคัญ: หากคุณเปลี่ยนเค้าโครงของเอนทิตีเดียว คุณจะไม่สามารถปิดใช้งานตัวสร้างเค้าโครงได้

คุณสามารถอัปเดตตัวเลือกเลย์เอาต์ได้ก็ต่อเมื่อคุณรีเซ็ตเลย์เอาต์ที่แก้ไขทั้งหมดเป็นการตั้งค่าดั้งเดิมแล้ว

ตัวสร้างเค้าโครงจากรหัส

เมื่อพูดถึงการจัดการ GUI Drupal Layout Builder นั้นยอดเยี่ยมอย่างไม่ต้องสงสัย ปัญหาการเขียนโปรแกรมที่คุณเผชิญในขณะที่ใช้เครื่องมือเป็นประจำนั้นอาจยากขึ้นเล็กน้อย ตอนนี้คุณอาจถามถึงวิธีการใช้ Layout Builder โดยใช้รหัส

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

เพียงโหลดหน้าจอโดยใช้รหัสต่อไปนี้:

 $entityViewDisplay = \Drupal::entityTypeManager- >getStorage('entity_view_display')- >load('ENTITY_TYPE.ENTITY_BUNDLE.VIEW_MODE');

จากนั้นจะส่งคืนวัตถุประเภท LayoutBuilderEntityViewDisplay ซึ่งคุณต้องเปลี่ยนดังนี้:

 $entityViewDisplay->enableLayoutBuilder();

หากคุณต้องการตั้งค่าสถานะเพิ่มเติมหรือเปิดใช้งานตัวสร้างเค้าโครงสำหรับโหมดมุมมองเฉพาะ:

 $entityViewDisplay->setOverridable(TRUE);

เพื่อเปิดใช้งานการสร้างเลย์เอาต์เฉพาะสำหรับเอนทิตีเดียว

หลังจากนั้นคุณต้องบันทึกทุกอย่าง

 $entityViewDisplay->save();

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

ฟิลด์เอนทิตีใหม่ที่ชื่อว่า layout_builder__layout ถูกสร้างขึ้นและใช้เพื่อเก็บเค้าโครงที่อัปเดตสำหรับเอนทิตีเฉพาะนี้ หากตั้งค่าตัวเลือก setOverridable เป็น TRUE

ในทางตรงกันข้าม การสร้างส่วนโดยใช้โค้ดและเติมเนื้อหาที่เกี่ยวข้องนั้นต้องใช้เวลาอีกเล็กน้อย

เริ่มต้นเรามาเพิ่มส่วนใหม่ ต้องรวมพารามิเตอร์ layout_id ซึ่งทำหน้าที่เป็นตัวระบุโครงร่างเมื่อสร้างอินสแตนซ์ใหม่ของคลาส \Drupal\layout_builder\Section เพื่อให้บรรลุผลสำเร็จ

เคล็ดลับจากผู้เชี่ยวชาญ: โมดูลการค้นหาเลย์เอาต์ประกอบด้วยเทมเพลตเริ่มต้น เลย์เอาต์ถูกกำหนดไว้ในไฟล์ *.layouts.yml สำหรับข้อมูลรายละเอียดเพิ่มเติม โปรดดูบทความต่อไปนี้เกี่ยวกับวิธีสร้างเค้าโครงแบบกำหนดเองใน drupal

จากนั้น การเพิ่มองค์ประกอบใหม่ลงในส่วนโดยตรงจะเป็นการดำเนินการที่ง่ายที่สุด ในการทำเช่นนี้ ให้ใช้วิธี appendComponent ซึ่งยอมรับอินสแตนซ์ของคลาส \Drupal\layout_builder\SectionComponent เป็นอาร์กิวเมนต์ อย่างไรก็ตาม ก่อนที่คุณจะสามารถพัฒนาส่วนประกอบของส่วนดังกล่าวได้ คุณต้องจัดการบางสิ่งก่อน ในการเริ่มต้น คุณจะต้อง:

• uid ขององค์ประกอบที่ฝังตัว
• ชื่อของภูมิภาคในส่วน
• การกำหนดค่าปลั๊กอิน

ในบทช่วยสอนนี้ เราจะฝังโหนดตัวอย่างในส่วนคอลัมน์เดียวโดยใช้ปลั๊กอินที่จัดทำโดย Entity Blocks :

 $section = new Section('layout_onecol'); $uuid = $node->uuid(); $region = 'content'; $pluginConfiguration = [ 'id' => 'entity_block:node', 'provider' => 'entity_block', 'label_display' => FALSE, 'view_mode' => 'default', 'entity' => $node->id(), ]; $component = new SectionComponent($uuid, $region, $pluginConfiguration); $section->appendComponent($component);

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

ในกรณีของเรา มีการใช้ฟิลด์ ดังนั้น:

 $entity->layout_builder__layout->setValue($section); $entity->save();

ขณะนี้ คุณได้เพิ่มส่วนคอลัมน์เดียวให้กับเอนทิตีและแสดงโหนดตัวอย่างในนั้นโดยทำตามขั้นตอนเหล่านี้ทั้งหมด

คุณอาจสนใจการปรับปรุงประสบการณ์ Layout Builder ของ Drupal

ข้อดีและข้อเสียของตัวสร้างเลย์เอาต์

เราได้รวบรวมข้อดีและข้อเสียบางประการของ Layout Builder ไว้ด้านล่าง:

ข้อดี:

• การปรับใช้ทำได้ง่ายเนื่องจากไม่จำเป็นต้องเพิ่มประเภทเอนทิตีใหม่ เนื่องจากโมดูลรวมอยู่ในแกนกลางแล้ว
• UI ที่ใช้งานง่ายพร้อมความสามารถในการลากและวาง
• ตัวเลือกสำหรับการปรับแต่งเอนทิตีแต่ละรายการ
• วิธีง่ายๆ ในการรวมฟิลด์กับเอนทิตีอื่นๆ โดยไม่จำเป็นต้องเพิ่มฟิลด์อ้างอิง
• วิธีง่ายๆ ในการใช้ประโยชน์จากการบล็อกเอนทิตีเพื่อฝังเอนทิตีที่มีอยู่

จุดด้อย:

• ประเภทเอนทิตีใหม่และองค์ประกอบที่ฝังได้จะเพิ่มขนาดของเว็บไซต์ ซึ่งช่วยยืดเวลาที่ใช้ในการโหลดรายการทั้งหมดให้นานขึ้นอย่างมาก
• โมดูลนี้เน้น UI ดังนั้นการสร้างเลย์เอาต์ใหม่อาจง่ายกว่า ตอนนี้เราต้องเขียนโค้ดสำหรับไฟล์ Generate.yml และเทมเพลต
• การลากองค์ประกอบระหว่างส่วนอาจทำได้ยากเล็กน้อยเมื่อมีหลายส่วนในเค้าโครง
• ชื่อของ Twig ต่อท้ายด้วย uuid ทำให้ยากต่อการแสดงส่วนที่ระบุและจำกัดการเข้าถึงส่วนต่างๆ

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

Drupal Layout Builder เปิดโอกาสให้เราพบกับความเป็นไปได้ที่หลากหลายสำหรับการจัดการเลย์เอาต์ผ่านทั้งอินเทอร์เฟซผู้ใช้และโค้ด จะแทนที่โซลูชันปัจจุบันทั้งหมดหรือไม่
ในความคิดของฉันเป็นเครื่องมือที่เหมาะสำหรับการจัดการกับปัญหาเค้าโครงในขนาดใหญ่ ดูเหมือนว่าแนวทางปฏิบัติที่ดีที่สุดคือการใช้โมดูลที่ใช้กันอย่างแพร่หลาย เช่น Paragraphs และ Field Group เพื่อสร้างส่วนประกอบแบบปิด จากนั้นใช้ Layout Builder เพื่อสร้างเค้าโครงที่สร้างไว้ล่วงหน้าซึ่งประกอบด้วยส่วนประกอบเหล่านี้

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

หากคุณกำลังมองหาผู้เชี่ยวชาญที่จะช่วยเหลือคุณเกี่ยวกับ Drupal เราส่งอีเมลถึงคุณ!