วิธีสร้างตัวสร้างเค้าโครงแบบกำหนดเองใน Drupal 8

เผยแพร่แล้ว: 2019-10-15

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

ในบทความที่แล้ว ฉันเขียนเกี่ยวกับวิธีเริ่มต้นการติดตั้งและใช้งาน Layout builder ของ Drupal 8 ที่นี่ ฉันต้องการแบ่งปันความรู้ของฉันเกี่ยวกับการปรับแต่งตัวสร้างเลย์เอาต์สำหรับความต้องการเฉพาะ

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

เริ่มต้นใช้งานตัวสร้างเค้าโครง:

ก่อนอื่นเราจะสร้างโมดูลตัวสร้างเค้าโครงแบบกำหนดเองสำหรับตัวสร้างเค้าโครงแบบกำหนดเองของเรา เราจะตั้งชื่อโฟลเดอร์เป็น custom_layout ต่อไปเราจะสร้างไฟล์ info.yml เราควรระบุคีย์พื้นฐานสำหรับมัน ตัวสร้างเลย์เอาต์แบบกำหนดเองใน drupal 8 จะมีการพึ่งพาโมดูลตัวสร้างเลย์เอาต์ ให้เราระบุตรงนี้

เค้าโครงที่กำหนดเอง
 รหัส:
ชื่อ: 'เค้าโครงที่กำหนดเอง'
ประเภท: โมดูล
คำอธิบาย: 'ให้วิธีการสำหรับรูปแบบอาคาร'
แกนหลัก: 8.x
แพคเกจ: 'กำหนดเอง'
การพึ่งพา:
 - layout_builder:layout_builder

ต่อไปเราจะสร้างไฟล์ layouts.yml เพื่อระบุขอบเขตสำหรับเลย์เอาต์แบบกำหนดเองของเรา

  • custom_layout: คีย์สำหรับเลย์เอาต์ของตัวสร้างเลย์เอาต์แบบกำหนดเองของเรา
  • ป้ายกำกับ: ป้ายกำกับสำหรับเลย์เอาต์ของตัวสร้างเลย์เอาต์แบบกำหนดเองของเรา
  • หมวดหมู่: หมวดหมู่สำหรับเลย์เอาต์ของตัวสร้างเลย์เอาต์แบบกำหนดเองของเรา
  • default_region: ภูมิภาคเริ่มต้นคือภูมิภาคที่เป็นค่าเริ่มต้นในเค้าโครงทุกประเภท
  • icon_map: ไอคอนที่จะปรากฏขึ้นในขณะที่เราเลือกเค้าโครงของเรา

เช่น:

รูปแบบที่กำหนดเอง

ในการสร้างแผนที่ไอคอนด้านบนเราต้องทำตามขั้นตอนด้านล่าง

1. แถวแรกคือ "ส่วนหัวด้านซ้าย" และ "ส่วนหัวด้านขวา"
เราได้ระบุ - [ header_left, header_left, header_right ] - header_left is
กำหนดไว้ 2 ครั้ง ดังนั้นจะใช้เวลา 2 ส่วนของความกว้างทั้งหมดของหน้าจอ จากนั้น header_right จะใช้ส่วนที่เหลือของส่วนนั้น ดังนั้นอัตราส่วนจะเป็น "75%/25%"
2. แถวที่ 2 คือ “Content” และ “Sidebar”
เราได้ระบุ - [ เนื้อหา เนื้อหา แถบด้านข้าง ] เหนือตรรกะที่ใช้ที่นี่
3. แถวที่ 3 คือ “ท้ายซ้าย” และ “ท้ายขวา”
เราได้ระบุ - [ footer_left, footer_right] - เนื่องจากมีเพียง 2 ภูมิภาคเท่านั้น โดยจะใช้เวลาแต่ละส่วน 50%

  • ภูมิภาค: ภูมิภาคที่เราต้องการสำหรับเลย์เอาต์ของเรา เรามี header_left, header_right, sidebar, content, footer_left, footer_right
ตัวสร้างเลย์เอาต์แบบกำหนดเอง

รหัส:

 custom_layout:
 ป้ายกำกับ: 'เค้าโครงที่กำหนดเอง'
 หมวดหมู่: 'เค้าโครงที่กำหนดเอง'
 default_region: เนื้อหา
 icon_map:
   - [header_left, header_left, header_right]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [footer_left, footer_right]

 ภูมิภาค:
   header_left:
     ป้ายกำกับ: ส่วนหัวด้านซ้าย
   ส่วนหัว_ขวา:
     ป้ายกำกับ: ส่วนหัวขวา
   แถบด้านข้าง:
     ป้ายกำกับ: แถบด้านข้าง
   เนื้อหา:
     ป้ายกำกับ: เนื้อหา
   footer_left:
     ป้ายกำกับ: ส่วนท้ายซ้าย
   ส่วนท้าย_ขวา:
     ป้ายกำกับ: ส่วนท้ายขวา

ต่อไป ให้เราสร้างโครงสร้าง html สำหรับเลย์เอาต์ของเรา เราจะสร้างโฟลเดอร์ชื่อ "เลย์เอาต์" ภายในโมดูลของเรา ในโฟลเดอร์ เราจะสร้างอีกโฟลเดอร์หนึ่งชื่อ “custom_layout”

และภายในโฟลเดอร์นั้น เราจะสร้างไฟล์ทวิกชื่อ “custom-layout.html.twig”

ตัวสร้างเลย์เอาต์แบบกำหนดเอง


เราต้องระบุไฟล์ทวิกใน layouts.yml

  • เส้นทาง: ระบุโฟลเดอร์ที่โครงสร้าง html ของคุณจะถูกเขียน
  • เทมเพลต: ระบุว่าเทมเพลตทวิกใดที่จะใช้สำหรับเลย์เอาต์นี้ภายใต้พาธ

เค้าโครงที่กำหนดเอง
 รหัส:

custom_layout:
 ป้ายกำกับ: 'เค้าโครงที่กำหนดเอง'
 เส้นทาง: เลย์เอาต์/custom_layout
 หมวดหมู่: 'เค้าโครงที่กำหนดเอง'
 แม่แบบ: custom-layout
 default_region: เนื้อหา
 icon_map:
   - [header_left, header_left, header_right]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [footer_left, footer_right]

 ภูมิภาค:
   header_left:
     ป้ายกำกับ: ส่วนหัวด้านซ้าย
   ส่วนหัว_ขวา:
     ป้ายกำกับ: ส่วนหัวขวา
   แถบด้านข้าง:
     ป้ายกำกับ: แถบด้านข้าง
   เนื้อหา:
     ป้ายกำกับ: เนื้อหา
   footer_left:
     ป้ายกำกับ: ส่วนท้ายซ้าย
   ส่วนท้าย_ขวา:
     ป้ายกำกับ: ส่วนท้ายขวา

ต่อไปเราจะเขียนโครงสร้าง html สำหรับภูมิภาคของเราในไฟล์ “custom-layout.html.twig”
เราจะตั้งค่าคลาสที่มี "เลย์เอาต์" และ "เลย์เอาต์--กำหนดเอง-เลย์เอาต์" และเราจะห่อเนื้อหาทั้งหมดไว้ข้างใน
เราจะระบุขอบเขตที่กำหนดไว้ใน layouts.yml เราสามารถเข้าถึงภูมิภาคเหล่านั้นได้ เช่น “{{ content.header_left }}”

ตัวสร้างเลย์เอาต์

รหัส:

{% ชุดคลาส = [
'เค้าโครง'
'เลย์เอาต์--กำหนดเอง-เลย์เอาต์'
] %}
{% ถ้าเนื้อหา %}
<div{{ attributes.addClass(classes) }}>
{% ถ้า content.header_left %}
<div {{ region_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{% สิ้นสุด %}
{% ถ้า content.header_right %}
<div {{ region_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{% สิ้นสุด %}
{% ถ้า content.content %}
<div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ content.content }}
</div>
{% สิ้นสุด %}
{% ถ้า content.sidebar %}
<div {{ region_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{ แถบเนื้อหา }}
</div>
{% สิ้นสุด %}
{% ถ้า content.footer_left %}
<div {{ region_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{% สิ้นสุด %}
{% ถ้า content.footer_right %}
<div {{ region_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{% สิ้นสุด %}
</div>
{% สิ้นสุด %}

หลังจากเขียนโครงสร้าง html แล้ว เราจะต้องเขียน css สำหรับแต่ละภูมิภาค ตอนนี้เราจะสร้าง library.yml ในโมดูลที่กำหนดเองของเรา

ตัวสร้างเลย์เอาต์

รหัส:

 custom_layout:
รุ่น: VERSION
ซีเอสเอส:
   ธีม:
     css/custom_layout.css: {}

เราจะกำหนดไลบรารีนั้นใน layouts.yml

ตัวสร้างเลย์เอาต์

รหัส:

 custom_layout:
 ป้ายกำกับ: 'เค้าโครงที่กำหนดเอง'
 เส้นทาง: เลย์เอาต์/custom_layout
 หมวดหมู่: 'เค้าโครงที่กำหนดเอง'
 แม่แบบ: custom-layout
 ไลบรารี: custom_layout/custom_layout
 default_region: เนื้อหา
 icon_map:
   - [header_left, header_left, header_right]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [เนื้อหา เนื้อหา แถบด้านข้าง]
   - [footer_left, footer_right]

 ภูมิภาค:
   header_left:
     ป้ายกำกับ: ส่วนหัวด้านซ้าย
   ส่วนหัว_ขวา:
     ป้ายกำกับ: ส่วนหัวขวา
   แถบด้านข้าง:
     ป้ายกำกับ: แถบด้านข้าง
   เนื้อหา:
     ป้ายกำกับ: เนื้อหา
   footer_left:
     ป้ายกำกับ: ส่วนท้ายซ้าย
   ส่วนท้าย_ขวา:
     ป้ายกำกับ: ส่วนท้ายขวา

มาเริ่มกันที่การจัดสไตล์ภูมิภาคของเรากันก่อน เราจะระบุโครงสร้างของแต่ละภูมิภาคดังนี้

ตัวสร้างเลย์เอาต์

รหัส:

 .layout--กำหนดเอง-เลย์เอาต์ {
 แสดง: -webkit-กล่อง;
 จอแสดงผล: -ms-flexbox;
 จอแสดงผล: ดิ้น;
 -ms-flex-wrap: ห่อ;
 flex-wrap: ห่อ;
}

หน้าจอ @media และ (ความกว้างขั้นต่ำ: 40em) {
 .layout--custom-layout .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   ดิ้น: 0 1 70%;
 }

 .layout--custom-layout .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   ดิ้น: 0 1 30%;
 }

 .layout--custom-layout .layout__region--เนื้อหา {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   ดิ้น: 0 1 70%;
 }

 .layout--custom-layout .layout__region--แถบด้านข้าง {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   ดิ้น: 0 1 30%;
 }

 .layout--custom-layout .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   ดิ้น: 0 1 50%;
 }

 .layout--custom-layout .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   ดิ้น: 0 1 50%;
 }
}

ต่อไป ให้เราเปิดใช้งานโมดูลที่กำหนดเองของเรา

Layout-builder-โมดูล

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

แก้ไขเลย์เอาต์ผู้สร้าง

หลังจากที่เราเลือกเลย์เอาต์ที่กำหนดเองแล้ว-

รูปแบบที่กำหนดเอง