วิธีใช้โมดูลรายการเมนูพิเศษสำหรับ Drupal 8

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

โมดูลรายการเมนูพิเศษสำหรับ Drupal 8 ปรับปรุงระบบเมนูเริ่มต้นใน Drupal โดยอนุญาตให้ผู้สร้างไซต์เพิ่มฟิลด์ลงในรายการเมนู ด้วยวิธีนี้ คุณสามารถสร้างเมนูเด่นได้ด้วยขั้นตอนง่ายๆ สองสามขั้นตอน

ปฏิบัติตามเพื่อเรียนรู้วิธีใช้โมดูลนี้ เริ่มกันเลย!

ขั้นตอนที่ #1: ติดตั้งโมดูลที่จำเป็น

นอกเหนือจากโมดูลรายการเมนูพิเศษ คุณจะต้องติดตั้ง Viewfield Viewfield จัดเตรียมฟิลด์ที่มีการอ้างอิงไปยัง View และแสดงผลเมื่อใดก็ตามที่เอนทิตีที่มีฟิลด์แสดงขึ้น

• เปิด แอปพลิเคชันเทอร์มินัลของพีซีของคุณ
• ประเภท :
  • นักแต่งเพลงต้องการ drupal/viewfield
  • นักแต่งเพลงต้องการ drupal/menu_item_extras

เปิดใช้งานทั้งสองโมดูลหลังจากดาวน์โหลด

• คลิก ขยาย
• ตรวจสอบ ทั้งสองโมดูล
• คลิก ติดตั้ง

ขั้นตอนที่ #2: สร้างระบบอนุกรมวิธาน

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

• คลิก โครงสร้าง > อนุกรมวิธาน > เพิ่มคำศัพท์
• ป้อน ชื่อ "หัวข้อ" แล้ว คลิก บันทึก
• คลิก เพิ่มคำศัพท์ และเพิ่มข้อกำหนดทั้งหมดที่มีรายละเอียดด้านล่างทีละรายการ
  • หัวข้อ
    • D8
    • ซิมโฟนี
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Python
    • DevOps

ขั้นตอนที่ #3: สร้างประเภทเนื้อหา

สำหรับจุดประสงค์ของบทช่วยสอนนี้ เราจะใช้เนื้อหา 2 ประเภทโดยมีฟิลด์ต่อไปนี้:

• บริการ
  • ภาพบริการ / ภาพ / จำนวนค่าที่อนุญาต: 1
  • ข้อความแนะนำ / ข้อความ (จัดรูปแบบ) / จำนวนค่าที่อนุญาต: 1
  • คำอธิบาย / ฟิลด์เริ่มต้น

• บล็อก
  • หมวดหมู่ / ระยะอนุกรมวิธาน / จำนวนค่าที่อนุญาต: ไม่จำกัด
  • คำอธิบาย / ฟิลด์เริ่มต้น

ตรวจสอบให้แน่ใจว่าคุณได้เลือกประเภทการอ้างอิง (หัวข้อ) เมื่อสร้างฟิลด์อนุกรมวิธาน

ขั้นตอนที่ #4: สร้างเนื้อหา

เราจะสร้าง 3 โหนดประเภทบริการ:

• บทช่วยสอน
• วิดีโอ
• หนังสือ

แต่ละโหนดเหล่านี้จะเชื่อมโยงกับองค์ประกอบระดับที่สองในเมนูเมกะ ในอีกทางหนึ่ง เราจะสร้างโหนดประเภท Blog ประมาณ 10 โหนด โดยมีเงื่อนไขต่างกันที่เกี่ยวข้อง ตรวจสอบให้แน่ใจว่าคุณรวม 2 คำ (เช่น D8, WP) ที่มีความถี่มากกว่าคำอื่นๆ

หน้าจอเนื้อหาควรดูที่จุดสิ้นสุดของกระบวนการนี้ไม่มากก็น้อยเหมือนภาพด้านล่าง

ขั้นตอนที่ #5: สร้างรายการเมนู

ระดับแรกของเมนูหลักจะมีรายการเมนูต่อไปนี้:

• บ้าน
• เกี่ยวกับ
• ทรัพยากร
• ติดต่อ

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

• คลิก โครงสร้าง > เมนู
• คลิก เมนู แก้ไข เพื่อแก้ไขการนำทางหลัก

• คลิก เพิ่มลิงก์ 3 ครั้งเพื่อเพิ่มรายการเมนูระดับแรกที่ขาดหายไป
• คลิก บันทึกทุกครั้งที่คุณป้อนชื่อรายการเมนู

ใช้แท็กพิเศษเพื่อแสดงเฉพาะข้อความลิงก์

เมื่อคุณสร้างและจัดเรียงลิงก์ของเมนูใหม่แล้ว

• คลิก จัดการฟิลด์ > เพิ่มฟิลด์ เพื่อเพิ่มฟิลด์ให้กับรายการเมนู
• เลือก ฟิลด์ประเภท Viewfield
• ตั้ง ชื่อและป้ายกำกับที่เหมาะสม
• คลิก บันทึกและดำเนินการต่อ

• ตั้งค่า จำนวนที่อนุญาตเป็นไม่จำกัด
• คลิก บันทึกการตั้งค่าฟิลด์

คุณจะมีตัวเลือกในการเชื่อมโยงมุมมองเริ่มต้นกับฟิลด์นี้โดยเฉพาะ ปล่อยให้ฟิลด์เหล่านี้ว่างเปล่า

• เลื่อน ลงแล้วคลิกบันทึกการตั้งค่า
• คลิก จัดการการแสดงผล

• ซ่อน ฉลากการ์ดเมนู
• คลิก บันทึก

ขั้นตอนที่ #6: สร้างมุมมอง

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

• เพิ่ม ช่องรูปภาพบริการ
• ตั้งค่า รูปแบบรูปภาพเป็น Thumbnail และเชื่อมโยงรูปภาพกับเนื้อหา
• คลิก สมัคร

• เพิ่ม ช่องข้อความแนะนำด้วย
• จัดเรียง ฟิลด์ใหม่
• คลิก บันทึก

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

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

• ลบ เกณฑ์การเรียงลำดับ
• คลิก สมัคร
• คลิก บันทึกเพื่อบันทึกมุมมอง

ขั้นตอนที่ #7: เพิ่ม View Blocks ให้กับรายการเมนู

• คลิก โครงสร้าง > เมนู
• แก้ไข การนำทางหลัก
• แก้ไข รายการเมนูทรัพยากร
• เพิ่ม 2 บล็อกที่คุณสร้างในขั้นตอน # 5
• คลิก บันทึก

ขั้นตอนที่ #8: สไตล์ CSS

ฉันจะไม่อธิบายโค้ดนี้โดยละเอียดเนื่องจากอยู่นอกขอบเขตของบทช่วยสอนนี้ อย่างไรก็ตาม คุณสามารถศึกษาข้อมูลเพิ่มเติมเกี่ยวกับ Drupal Views และ CSS Grid ได้ในบทความนี้ หากคุณต้องการฝึกฝนเพิ่มเติมด้วยเมนูเมก้า ให้ดูที่บทความนี้ด้วย

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

ฉันหวังว่าคุณจะชอบบทช่วยสอนนี้ ขอบคุณที่อ่าน!