ข้ามไปยังเนื้อหา

เว็บไซต์ Thai Web Fonts เวอร์ชันใหม่

เผยแพร่เมื่อ
เว็บไซต์ Thai Web Fonts เวอร์ชันใหม่

เว็บไซต์ Thai Web Fonts เวอร์ชันแรกผมสร้างด้วย Hugo และใช้ธีม Geekdocs ที่นำมาปรับแต่ง เพิ่มเทมเพลตหน้าฟอนต์เข้าไป (ย้อนกลับไปดูเว็บเวอร์ชันเก่าได้ที่นี่)

แต่เนื่องจากผมต้องการเพิ่มฟีเจอร์ใหม่ ๆ เพิ่มเติม ทำให้การใช้ธีมมาปรับแต่งเทมเพลตเริ่มไม่ตอบโจทย์ เลยตัดสินใจสร้างธีมใหม่ขึ้นมาเอง

ด้วยความที่มีเวลาไม่มาก และต้องการความง่าย เลยตัดสินใจใช้ Bootstrap แบบเดิม ๆ ไม่ได้ปรับแต่งอะไร layout เว็บก็ใช้แบบเดียวกับเว็บ documentation หลาย ๆ เว็บ คือมีเมนูอยู่ใน sidebar ด้านซ้าย และเนื้อหาอยู่ด้านขวา

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

จริง ๆ มันก็แก้ได้ด้วยการแบ่งรายชื่อฟอนต์เป็นหลาย ๆ หน้า แต่ผมอยากให้เลื่อนดูรายชื่อฟอนต์ทั้งหมดได้ต่อเนื่องไปเลย ไม่ต้องกดเปลี่ยนหน้า เลยลองหาวิธีลดขนาดไฟล์ฟอนต์ โดยการ generate ฟอนต์ขึ้นมาใหม่ให้มีเฉพาะตัวอักษรไทย (ใช้เว็บ Transfonter) ซึ่งก็ช่วยลดขนาดไฟล์ฟอนต์ที่ต้องโหลดไปเยอะอยู่

จนมาเจอว่าฟีเจอร์ image processing ใน Hugo สามารถเพิ่มข้อความลงในรูปได้ด้วย เลยลองใช้ดู ซึ่งผลที่ได้คือโอเคเลย ใช้เป็นรูปภาพแทน ลดขนาดไฟล์ที่ต้องโหลดไปได้เยอะ ไฟล์รูป 1 ไฟล์ขนาดประมาณ 10-20 KB และยังทำ lazy load ง่ายมาก แต่ก็เจอปัญหาอีกนิด คือปัญหาสระลอยและการตัดคำ ผมเลยใช้ตัวอักษร ก-ฮ แทนข้อความที่เป็นประโยค จนออกมาเป็นแบบนี้

หน้ารายชื่อฟอนต์ในเว็บไซต์ Thai Web Fonts เวอร์ชันใหม่

ส่วนหน้าข้อมูลฟอนต์ถึงหน้าตาจะดูคล้ายของเก่า แต่โค้ดเขียนใหม่หมด ตัวทดลองฟอนต์ก็ทำให้รองรับ variable font และเปลี่ยนข้อความตัวอย่างใหม่มาใช้คำขวัญประจำจังหวัด

หน้าข้อมูลฟอนต์ในเว็บไซต์ Thai Web Fonts เวอร์ชันใหม่

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

ส่วนโค้ดพร้อมใช้ก็ทำใหม่โดยให้ Hugo generate ขึ้นมาทั้งหมด แทนของเดิมที่ใช้เป็นการดึงไฟล์โค้ดที่เตรียมไว้แล้วมาแสดงเฉย ๆ

ฟีเจอร์อย่างนึงที่หายไปคือ dark mode เดี๋ยวเพิ่มกลับมาแน่นอน แต่ต้องรอ Bootstrap v5.3 ออกก่อนนะ 😝

ตัวเว็บไซต์ยังโอเพนซอร์สอยู่บน GitHub เหมือนเดิม ใครใช้แล้วเจอบั๊กตรงไหนแจ้งผ่าน GitHub หรือคอมเมนต์ไว้ด้านล่างนี้เลยครับ

RSS สร้างด้วย Hugo ซอร์สโค้ด