วิธีสร้างธีม Drupal 9 แบบกำหนดเองใน 9 ขั้นตอนง่ายๆ

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

Drupal 9 ให้ Bartik เป็นธีมส่วนหน้าสำหรับ Drupal แต่ถ้าคุณต้องการธีมที่กำหนดเองของ Drupal 9 คุณสามารถสร้างการพัฒนาธีม Drupal 9 ของคุณเองได้ ซึ่งจะช่วยเพิ่มทักษะการสร้างธีม Drupal ของคุณ วิธีที่ง่ายที่สุดในการทำความเข้าใจการพัฒนาธีมของ Drupal 9 คือการฝึกฝนและสร้างมันขึ้นมาใหม่ทั้งหมด

Drupal 8 ถึง EOL แล้ว ตอนนี้เป็นเวลาที่จะย้ายไปที่ Drupal 9 อย่างไรก็ตาม หากคุณยังคงพยายามสร้างธีมที่กำหนดเองใน Drupal 8 ขั้นตอนเหล่านี้จะใช้ได้กับการตั้งค่า Drupal 8 ด้วย

เริ่มต้นกับ Custom Drupal 9 Theme Development

มาเริ่มกันด้วยการสร้างธีม Drupal 9 สำหรับเว็บไซต์ Drupal ของเรา
ขั้นตอนที่ 1 : ขั้นแรก เราต้องสร้างธีมที่กำหนดเองภายใต้โฟลเดอร์ 'web/themes/custom' เราจะตั้งชื่อโฟลเดอร์เป็น custom_theme

ขั้นตอนที่ 2 : ต่อไป เราจะต้องสร้าง ไฟล์ info.yml เราจำเป็นต้องระบุคีย์พื้นฐานสำหรับมัน ให้เราระบุที่นี่ -

 รหัส:
ชื่อ : ธีมที่กำหนดเอง
ประเภท : ธีม
Description : 'ธีมที่กำหนดเองสำหรับเว็บไซต์ของฉัน'
แพ็คเกจ : อื่นๆ
core_version_requirement : ^8 || ^9

ขั้นตอนที่ 3 : ตอนนี้ มาสร้างกัน ไฟล์ library.yml เพื่อระบุไลบรารีทั้งหมดที่เราต้องการ (CSS และ JS) สำหรับธีม Drupal 9 ที่กำหนดเอง เราจะสร้างไดเร็กทอรี CSS และ JS และไฟล์ต่างๆ เพื่อเชื่อมโยงไว้ที่นี่ เราจะตั้งชื่อไลบรารีว่า global-styling

 รหัส:
โกลบอล สไตล์ :
รุ่น : 1.x
เจส :
js/script.js : {}
css :
ธีม :
css/style.css : {}

ขั้นตอนที่ 4 : หลังจากสร้างไฟล์ libraries.yml เราจำเป็นต้องเชื่อมโยงมันเข้ากับธีมของเรา สำหรับสิ่งนี้เราจะเพิ่มลงในไฟล์ info.yml ซึ่งจะนำไปใช้กับธีมทั้งหมด

 รหัส:
ห้องสมุด :
- custom_theme/global-styling

ดังนั้น คีย์จะเป็น ไลบรารี และพาธจะเป็นชื่อธีม - ' custom_theme ' / ชื่อไลบรารี - 'global-styling'

ขั้นตอนที่ 5 : ต่อไป เราต้องสืบทอด 'ธีมพื้นฐาน' ในกรณีของเรา เราจะสืบทอดธีม 'มี ระดับ ' ซึ่งเป็นธีมหลักของ Drupal ดังนั้น คีย์จะเป็นธีมพื้นฐานใน info.ym l

 รหัส:
ธีมหลัก : classy

ขั้นตอนที่ 6 : ตอนนี้ เราจะกำหนด 'ภูมิภาค' สำหรับธีมของเรา ใน info.yml เราต้องกำหนดไว้ภายใต้คีย์ 'regions'

 รหัส:
ภูมิภาค :
การสร้างแบรนด์ : การสร้างแบรนด์
การนำทาง : การนำทางหลัก
ค้นหา : ค้นหา
จุดเด่น : จุดเด่น
เนื้อหา : เนื้อหา
right_sidebar : แถบข้างขวา
footer_first : ส่วนท้ายก่อน
footer_second : ส่วนท้าย Second
footer_third : ส่วนท้ายที่สาม
footer_bottom : ส่วนท้ายด้านล่าง

ภายใต้คีย์ 'ภูมิภาค' คุณสามารถกำหนดภูมิภาคของคุณสำหรับธีม Drupal ที่กำหนดเองได้ ที่นี่,
การสร้างแบรนด์: เป็นรหัสของภูมิภาคที่ควรเป็นตัวพิมพ์เล็ก
การสร้างแบรนด์ : เป็นชื่อของภาคที่เป็นตัวพิมพ์ใหญ่ได้

ขั้นตอนที่ 7 : หลังจากที่เรากำหนดภูมิภาคของเราสำหรับธีม Drupal ที่กำหนดเองแล้ว เราจำเป็นต้องแทนที่ page.html.twig เพื่อดึง 'ภูมิภาค' ของเรามาแทนที่ธีมที่มีระดับ เราจะสร้าง เทมเพลต/ ไดเร็กทอรี ระบบ ซึ่งเราจะสร้าง page.html.twig

 รหัส:
< header aria-label ="Site header" class ="header" id ="header" role ="banner" >
{{ page.branding }}
{{ page.navigation }}
{{ page.search }}
</ header >
<ระดับส่วน = "จุดเด่น" id = "จุดเด่น" บทบาท = "เสริม">
{{ page.featured }}
</ ส่วน >
< คลาส ส่วน ="main" id ="main" >
< main aria-label ="Site main content" class ="content" id ="content" role ="main" >
{{ page.content }}
</ main >
< aside class ="right--sidebar" id ="sidebar" role ="complementary" >
{{ page.right_sidebar }}
</ กัน >
</ ส่วน >
< ส่วนท้าย aria-label ="ส่วนท้ายของไซต์" คลาส ="footer" id ="footer" บทบาท ="contentinfo" >
< div class ="footer--top" >
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
</ div >
< div class ="footer--bottom" >
{{ page.footer_bottom }}
</ div >
</ ส่วนท้าย >

ใน page.html.twig เราจะสร้างโครงสร้าง HTML สำหรับภูมิภาคของเรา ดังที่คุณเห็นใน {{ page.branding }} – ที่นี่

หน้า - เป็นกุญแจสำคัญในการแสดง 'ภูมิภาค' ในเพจ

การสร้างแบรนด์- คือภูมิภาคที่เรากำหนดไว้ในไฟล์ info.yml

ตอนนี้ เราได้สร้างภูมิภาคของเราและแสดงผลบนเพจแล้ว

ขั้นตอนที่ 8 : ไปที่ ลักษณะที่ปรากฏ ในเว็บไซต์ Drupal ของคุณ คุณสามารถดูธีม Drupal ที่กำหนดเองได้ในส่วน ธีมที่ถอนการติดตั้ง

คุณต้องคลิกตัวเลือก ' ติดตั้งและตั้งค่าเป็นค่าเริ่มต้น ' เพื่อติดตั้งธีม Drupal ของคุณบนเว็บไซต์

หลังจากติดตั้งแล้ว ให้ไปที่ Structure -> Block Layout ธีมที่กำหนดเองของคุณจะปรากฏภายใต้รูปแบบการบล็อก

คุณจะเห็นลิงก์สำหรับ ' สาธิตพื้นที่บล็อก (ธีมที่กำหนดเอง) ' คลิกที่ลิงก์ คุณสามารถดูภูมิภาคทั้งหมดที่คุณได้ประกาศไว้ใน info.yml และเพิ่มใน page.html.twig

ขั้นตอนที่ 9 : ตอนนี้คุณสร้างธีมใน Drupal 9 เกือบเสร็จแล้ว! ถัดไป คุณต้องใช้สไตล์ใน CSS สำหรับแต่ละภูมิภาคตามการออกแบบของคุณ เราจะใช้ CSS ในกรณีนี้ คุณสามารถใช้ SCSS ได้ หากต้องการ เพียงตรวจสอบขอบเขตการสร้างแบรนด์ - คุณควรเห็นคลาสภูมิภาคแล้วเพิ่ม CSS ลงในคลาสนั้น

 . ส่วนหัว {
 จอแสดงผล : ดิ้น ;
 justify-content : ช่องว่างระหว่าง ;
 ช่องว่างภายใน : 10 px ;
}


. ส่วนหัว ภูมิภาค {
 ช่องว่างภายใน : 5 px ;
}


. ส่วนหัว การสร้างแบรนด์ภูมิภาค {
 ดิ้น : 0 1 20 %;
}


. ส่วนหัว การนำทางภูมิภาค {
 ดิ้น : 0 1 50 %;
}


. ส่วนหัว ค้นหาภูมิภาค {
 ดิ้น : 0 1 30 %;
}


. ภูมิภาค . บล็อกภูมิภาค {
 ช่องว่างภายใน : 15 px ;
}


. โดดเด่น {
 ช่องว่างภายใน : 40 px 20 px ;
 พื้นหลัง-สี : อินเดียแดง ;
}


. หลัก {
 ช่องว่างภายใน : 50 px 0 ;
 จอแสดงผล : ดิ้น ;
 justify-content : ช่องว่างระหว่าง ;
}


. หลัก . เนื้อหา {
 ดิ้น : 0 1 65 %;
}


. หลัก . ขวา -- แถบด้านข้าง {
 ดิ้น : 0 1 30 %;
}


. ส่วนท้าย -- ด้านบน {
 จอแสดงผล : ดิ้น ;
 justify-content : ช่องว่างระหว่าง ;
 ช่องว่างภายใน : 10 px ;
}


. ส่วนท้าย--บน . ภูมิภาค {
 ช่องว่างภายใน : 5 px ;
}


. ภูมิภาค-ส่วนท้าย-ก่อน , . ภูมิภาค-ส่วนท้าย-วินาที , . ภูมิภาคส่วนท้ายที่สาม {
 ดิ้น : 0 1 30 %;
}

ผลลัพธ์:

ธีมที่กำหนดเองของ Drupal 9 พร้อมแล้ว!

หากคุณต้องการเขียน hooks หรือสร้างคำแนะนำสำหรับไฟล์ทวิก คุณสามารถเพิ่มไฟล์ .theme ในธีม Drupal ที่คุณกำหนดเองได้ (แสดงด้านล่าง)