Bootstrap 4 ใน Drupal 8/9 พร้อม Bootstrap Barrio

เราจะใช้ Bootstrap 4 ใน Drupal 8/9 กับ Bootstrap Barrio ธีม Bootstrap Barrio สำหรับ Drupal 8/9 รวม Bootstrap 4 (หรือ Bootstrap 5 หากคุณต้องการ) เข้ากับไซต์ Drupal ของคุณ

Bootstrap เป็นเฟรมเวิร์กยอดนิยมสำหรับการสร้างเว็บไซต์ ช่วยให้นักออกแบบและนักพัฒนาสามารถใช้ภาษาร่วมกันในการสื่อสาร ทำให้ขั้นตอนการพัฒนาง่ายขึ้นมาก

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

อ่านต่อเพื่อเรียนรู้วิธี!

ขั้นตอนที่ # 1.- ติดตั้งธีม

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

• เปิด แอปพลิเคชันเทอร์มินัลของระบบปฏิบัติการของคุณ
• วาง เคอร์เซอร์ไว้ที่รูทของการติดตั้ง Drupal ของคุณ
• ประเภท : นักแต่งเพลงต้องการ drupal/bootstrap_barrio

การดำเนินการนี้จะดาวน์โหลดธีมเวอร์ชันเสถียรล่าสุดไปที่: /web/themes/contrib/bootstrap_barrio

ขั้นตอนที่ # 2.- สร้างธีมย่อย

• วาง เคอร์เซอร์บนไดเร็กทอรีธีม bootstrap_barrio
• ประเภท :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

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

สคริปต์จะถามชื่อเครื่องและชื่อที่สื่อความหมายสำหรับธีมย่อยที่คุณกำหนดเอง

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

ขั้นตอนนี้เป็นทางเลือก:

• เปิด ไดเร็กทอรีของธีมย่อยของคุณ (/web/themes/custom/mytheme) ในตัวแก้ไขโค้ด
• แทนที่ อินสแตนซ์ทั้งหมดของ 'Bootstrap Barrio' ด้วย 'ชื่อธีมของคุณ'
• บันทึก ไฟล์ทั้งหมด

ที่นี่ เราแค่เปลี่ยนข้อความอธิบายเท่านั้น ดังนั้นจะไม่มีปัญหาเลยหากคุณปล่อยให้สิ่งนี้เป็นอยู่

ขั้นตอนที่ # 3.- การตั้งค่า Bootstrap Barrio

• คลิก ลักษณะ ที่ปรากฏ ที่ส่วนหลังของไซต์ Drupal ของคุณ
• เลื่อน ลงไปที่ธีมที่คุณกำหนดเอง
• คลิก ติดตั้ง และ ตั้ง เป็นค่าเริ่มต้น

เมื่อติดตั้งธีมแล้ว

• คลิก ลิงก์การตั้งค่าธีม

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

1. เค้าโครง (แท็บที่ใช้งานอยู่)
2. ส่วนประกอบ
3. ติด
4. เลื่อน Spy
5. แบบอักษรและไอคอน
6. สี

เค้าโครง

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

ภายในส่วน "ภูมิภาค" คุณสามารถกำหนดคลาส CSS ที่กำหนดเองให้กับภูมิภาคของไซต์ได้

• เพิ่ม คลาสที่คุณกำหนดเองไปยังภูมิภาคใดภูมิภาคหนึ่ง

• ปิด ส่วน `ภูมิภาค'
• เปิด `ตำแหน่งแถบด้านข้าง`
• เปลี่ยน ค่าของ `ตำแหน่งแถบด้านข้าง' เป็นซ้าย
• เปิด `Sidebar first layout` และ `Sidebar first layout`
• เปลี่ยน ค่าเป็น 3 cols และ 2 cols ตามลำดับ

ส่วนประกอบ

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

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

ส่วน "โครงสร้างแถบนำทาง" เกี่ยวข้องกับขนาดของคอนเทนเนอร์แถบนำทาง คุณต้องแยกความแตกต่างระหว่างสองแถบนำทาง (navbar-top และ navbar) Navbar คือเมนูนำทางหลักของไซต์ของคุณ

• เปลี่ยน ตำแหน่ง Navbar เป็น Fixed bottom และ Navbar link color เป็น Dark
• ตรวจสอบ แถบนำทางแบบ เลื่อน ในส่วน 'พฤติกรรมของแถบนำทาง' เพื่อแสดงเมนูหลักแบบเลื่อนบนหน้าจอขนาดเล็ก

3 ส่วนสุดท้ายของตัวเลือกการกำหนดค่า "ส่วนประกอบ" หมายถึงตำแหน่งของข้อความที่ส่งโดยระบบข้อความภายในของ Drupal แท็บสำหรับงานในพื้นที่ (เช่น แท็บแก้ไขเนื้อหา) และลักษณะที่ปรากฏขององค์ประกอบแบบฟอร์ม ปล่อยให้ตัวเลือกเหล่านี้ไม่ถูกแตะต้อง

ติด

ด้วย affix คุณสามารถแก้ไของค์ประกอบได้ เช่น ตั้งค่าคุณสมบัติตำแหน่ง CSS เป็นคงที่

Scrollspy

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

แบบอักษรและไอคอน

ที่นี่คุณมีตัวเลือกให้เลือกระหว่างชุดแบบอักษร Google Fonts ต่างๆ สำหรับข้อความในไซต์ของคุณ นอกจากนี้ คุณสามารถเลือกระหว่างชุดไอคอนที่กำหนดไว้ล่วงหน้าเพื่อใช้กับโพสต์ของคุณ

• เลือก ชุดแบบอักษรและชุดไอคอนที่คุณชอบ

สี

คุณมีตัวเลือกในการปรับแต่งสีของข้อความภายในของ Drupal มีตัวเลือกในการปรับแต่งตารางของไซต์ ตัวอย่างเช่น ตารางที่สร้างด้วยโมดูล Views

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

คุณสามารถปรับแต่งสีของแต่ละองค์ประกอบตามความชอบและบล็อกได้โดยใช้ไอคอนแม่กุญแจ

การแสดงองค์ประกอบของหน้า ภาพโลโก้ และไอคอน Favicon

นี่เป็นตัวเลือกเริ่มต้นในธีม Drupal ทั้งหมด

โหลดไลบรารี

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

คุณสามารถเลือกได้ที่นี่ หากคุณต้องการโหลด Bootstrap (Bootstrap CSS และ JS) ในเครื่องหรือผ่าน CDN การกำหนดค่านี้ไม่ควรเปลี่ยนแปลงที่นี่ การเปลี่ยนรหัสในไฟล์ . info.yml จะดีกว่ามาก

• คลิก บันทึกการกำหนดค่า

ลองดูที่เว็บไซต์ของคุณ บทช่วยสอนนี้ไม่ได้ตั้งใจจะสอนการออกแบบ UI ให้คุณ แต่อธิบายความเป็นไปได้ที่มีในธีม Barrio

อย่างไรก็ตาม ตอนนี้คุณสามารถเริ่มจากการออกแบบและพยายามปรับธีมให้เข้ากับมัน

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