สัปดาห์กว่า ๆ กับ Barrio

Submitted by ezybzy on Sun, 2021-01-17 - 10:31

จะว่าไปเว็บไซต์นี้ก็ไม่ได้มีการเปลี่ยนแปลงธีมมานานมากแล้ว ประกอบกับผมค่อนข้างจะเริ่มรำคาญธีมเดิม (Bootstrap) ที่ดูไม่มีท่าทีจะอัพเกรดตัว CSS, Javascript ของ Bootstrap ที่ใช้งานเสียที (และจุดจุกจิกที่ยังมีพังอยู่) ในช่วงปีใหม่นี้ก็เป็นโอกาสอันดีที่จะได้ขุดเอาธีมอีกตัวที่เคยทดลองใช้ก่อนหน้านี้คือ Barrio มาปรับแต่งต่อ

พื้นฐานการปรับแต่งธีม

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

ข้อแตกต่างระหว่างธีม Bootstrap และ Barrio

ธีม 2 ตัวนี้ ถูกสร้างโดยเอา CSS ของ Bootstrap มาใช้เป็นตัวกำหนดรูปแบบ Layout ของหน้าเว็บ แต่จุดที่แตกต่างคือปรัชญาเบื้องหลังของทั้ง 2 ตัวนี้แตกต่าง กล่าวคือ

  • ธีม Bootstrap นั้นจะพยายามแปลงทุกส่วนประกอบใน Drupal ให้มีความเป็น ​Bootstrap ให้ถึงที่สุด จึงมีการรื้อ Class และ Template การแสดงผลของส่วนประกอบใน Drupal เยอะมาก และได้มีการโหลด Javascript ของ Bootstrap ทำให้ผลลัพธ์ที่ได้คือ Drupal ที่มี Component แบบ Bootstrap
  • ธีม Barrio ที่ยืนพื้นการใช้ CSS ของ Bootstrap ทำให้ยังคงได้ HTML ของสิ่งต่าง ๆ ใน Drupal ตามเดิม

จากข้อแตกต่างข้างต้นนี้ อาจจะเห็นว่าธีม ​Bootstrap ดูจะเท่ห์กว่า แต่เนื่องจากความที่โปรเจคนี้ไม่ค่อยได้รับการดูแลอย่างต่อเนื่อง อันได้แก่การไม่อัพเดตตัว Framework ของ Bootstrap เองรวมถึงไม่มีการปรับปรุงให้รองรับ Drupal 8/9 อย่างจริงจัง (มันเกิดมาในยุค Drupal 7) ทำให้ยังมีหลาย ๆ ส่วนที่ยังไม่ถูกแปลงเป็น Bootstrap อย่างสมบูรณ์ รวมถึงมีบาง Core module ใน Drupal เอง เช่น หน้าแก้ไขของ Views UI ที่ไม่คิดเผื่อสำหรับการทำธีมไว้ด้วย (มีการโหลด CSS เฉพาะของตัวมันเองซึ่งขัดขวางการทำงานเมื่อถูกแปลงด้วย Bootstrap) ทำให้ยังพบปัญหาในการใช้งานอยู่บ้าง

เปลี่ยนมาใช้ Barrio

สิ่งที่แตกต่างใน Barrio ซึ่งต่างจากธีม Bootstrap นั่นคือ จำนวน Region ที่ให้เลือกหยอด Block ของ Drupal ที่เยอะกว่ามาก ๆ ทำให้ต้องมีการทดลองหยอด Block ต่าง ๆ ลงใน Region ระบบใหม่นี้

เมื่อหยอด Region เป็นที่เรียบร้อยเลย บนหน้าแรกที่อาจจะใช้การวาง View ที่แสดงรายการข้อมูลล่าสุด ก็จะพบปัญหาว่ามีการแสดงผลประหลาด ๆ อยู่ ซึ่งเป็นผลจากตัว Template แสดงผล View ที่ได้มีการแทรก Class ชื่อ row ในกรอบด้วย ทำให้ต้องมีการคัดลอก Template ดังกล่าวมาใส่ใน Subtheme เพื่อแก้ไขให้เหมาะสมกับการใช้งาน

นอกจากนี้ก็ยังมีจุดที่อาจจะดูขัดใจนั่นคือการแสดงผลปุ่ม Check box และ Radio button ที่มีป้าย label นำหน้า ในช่องตาราง (ทั้งช่องตารางมีปุ่มอันเดียว) ซึ่งตัว Template แสดงผลไม่ได้มีการเช็คเงื่อนไขการแสดงผล Label ไว้ว่าควรหรือไม่ควรแสดงผล ซึ่งสามารถแก้ไขด้วย CSS (เนื่องจากมันมี Class ชื่อ form-no-label ซึ่งใช้ระบุว่าไม่ต้องการให้แสดง Label) หรือจะแก้ไขตัว Template เพื่อให้เช็คค่านี้และทำการเพิ่ม Class เช่น sr-only ที่ label ก็ได้

ส่วน Template การแสดงผลใหญ่ ๆ ที่ต้องแก้คือ ส่วนการแสดงรายการความคิดเห็น (Comment) ซึ่งเหมือนจะลืมทำการจัดการหน้าตาแบบปรกติ (สร้าง Column แต่ไม่อยู่ใน row) และหน้าฟอร์มใส่เนื้อหาที่แบ่ง 2 คอลัมน์ (สิ้นเปลืองพื้นที่ด้านขวาของหน้าจอโดยเปล่าประโยชน์)

เก็บบั้ก

มีบั้กที่ต้องแก้ 2 อันได้แก่

หน้าแก้ไข Views ของโมดูล Views UI ซึ่งมีจุดที่พังคือ ปุ่ม Add (ที่ใช้เพิ่มประเภทของ View) ซึ่งไม่ได้มีการรวบปุ่มของประเภท View ต่าง ๆ ได้เข้าไปอยู่ภายใต้ปุ่ม Add นี้ ซึ่งเกิดจากการที่ธีมพยายามเขียนปุ่ม input type=submit เป็น button ซึ่ง Javascript ต้นฉบับ (Drupal.behaviors.viewsUiRenderAddViewButton) ไม่ได้เผื่อให้รองรับ (ซึ่งเราก็ไม่ควรไปแก้ไขมัน) ทางแก้ไขที่พอจะทำได้มี 2 แนวทางคือ

  • นิยามฟังก์ชั่น Javascript กลุ่ม Drupal.behaviors ซึ่งอันนี้ไปขโมยเอาจากไฟล์ views-admin.js ของ views_ui ฟังก์ชั่นชื่อ Drupal.behaviors.viewsUiRenderAddViewButton และอีกอันที่เกี่ยวข้อง (ฟังก์ชั่นถัดไป) บนไฟล์ views-ui-contrainer.html.twig (อันนี้เอามาจาก templates ของ view_ui)
  • แก้ไข Template ของการเขียนปุ่ม Submit ใหม่ (input--submit-button.html.twig) โดยตรวจสอบหา Class ชื่อ add-display และ btn-primary แล้วสั่งให้ยังคงเขียนออกมาเป็น input ตามเดิม (กรณีอื่นให้เขียน button)

และหน้าจัดการการแสดงผลของ Content Type ซึ่งไม่สามารถจัดการเปลี่ยนรูปแบบการแสดง Field ข้อมูลต่าง ๆ ได้ (กดไปแล้ว มันจะล็อกตัว ​select ข้อมูล) ทำให้ไม่สามารถบันทึกค่าที่ได้แก้ไขได้ สาเหตุเกิดจาก Javascript ของ Drupal เองมองหา input[data-drupal-selector="edit-refresh"] ซึ่งถูก template เปลี่ยนเป็น button ทำให้ใช้งานไม่ได้ อันนี้ใช้วิธีแก้ไข Template ของการเขียนปุ่ม Submit แบบเดียวกับข้างต้น โดยตรวจเงื่อนไข attributes.data-drupal-selector เป็น edit-refresh และมี Class ชื่อ visually-hidden และ button โดยสั่งให้เขียนเป็น input ตามเดิม

โดยรวม ๆ ที่แก้ไปในส่วนของ Templates มีดังภาพนี้

Barrio Template Files

และนอกจากรายละเอียดข้างต้นนี้ ทางผมก็ได้มีการปรับแต่งการแสดงผลของ Tag ให้ดูแตกต่างจากส่วนอื่น ๆ บนหน้าเว็บ โดยการนำ badge-pill มาใช้งาน จึงได้มีการปรับแก้ Template เพิ่มเติม ซึ่งเป็น Template ที่มีการตั้งชื่อเฉพาะเจาะจงกับการตั้งระบบนี้เนื่องจากมีการอ้างถึงชื่อฟิลด์

การใช้ธีม Barrio นี้ ยังมีข้อดีอื่นอีกมากมายอาทิเช่นการสามารถปรับแต่ง CSS รอบ Region ต่าง ๆ ที่สามารถทำผ่านบนหน้าจอตั้งค่าเลย ไม่ต้องมาแก้ไข Template เอง รวมถึงการเลือกชุดแบบอักษร/สีที่ใช้แสดงผล ซึ่งเรื่องแรกนี้เป็นสิ่งที่ตัวธีม Bootstrap ไม่มี ส่วนอีก 2 เรื่องหลังนั้นในธีม Bootstrap จะเป็นชุดสีแบบสำเร็จรูป ไม่สามารถปรับแต่งได้อิสระ เน้นการแก้ไขไปทางไฟล์ CSS เสียมากกว่า

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

Blog Tags

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.