Funfic

010: HTML Editor

2023-02-14
html.jpg

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

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

LuaWebgen สนับสนุนทั้งไฟล์ HTML และ Markdown ซึ่งเป็นรูปแบบการใส่สไตล์อย่างเช่น ตัวหนา ขีดเส้นใต้ ลิสต์รายการให้กับไฟล์เอกสารและแปลงเป็น Static HTML เพื่อที่จะแสดงผลบนหน้าเว็บ

โดยปกติแล้วการใช้ Markdown จะเร็วกว่าการใช้ HTML เพราะ HTML นั้นจะต้องมีการเปิดแท็กและปิดแท็กซึ่งเสียเวลา ผมสามารถสร้างไฟล์ article.md และพิมพ์บทความในรูปแบบ Markdown แล้วให้ LuaWebgen แปลงเป็นไฟล์ HTML ได้เลย แต่ปัญหาก็คือว่าผมต้องการความสามารถเกี่ยวกับเอกสารใน MS Word ซึ่งผมใช้งานอยู่แล้ว และการใช้ MS Word ร่วมกับ Markdown นั้นไม่สะดวก ทำให้ผมต้องหาวิธีการอื่นซึ่งใช้เวลาน้อยกว่าและสะดวกกว่าแทน

ความสามารถในการจัดเก็บแยกหมวดหมู่เอกสารก็เป็นสิ่งหนึ่งที่ผมต้องคำนึงถึง ในตอนนี้ที่ผมทำได้ก็คือใช้การแยก Folder ใน Windows File Explorer แล้วอ่านชื่อไฟล์เอา โดยรวมก็ไม่มีปัญหาอะไร

ขั้นตอนในการทำงานของผมตอนนี้ก็คือ

  1. พิม์เอกสารใน MS Word
  2. แปลงเอกสารใน MS Word เป็น HTML ด้วยเว็บที่ให้บริการแปลงเอกสารนี้ ผมคิดว่าจะหาทางทำให้เป็นอัตโนมัติอยู่ แต่ตอนนี้เอาที่ใช้งานได้ไปก่อน
  3. สร้างไฟล์ HTML ในชื่อที่ต้องการด้วย LuaWebgen
  4. วางโค้ด HTML ที่แปลงด้วยเว็บแปลงเอกสารแล้วลงในไฟล์ HTML ที่สร้างด้วย LuaWebgen
  5. ใส่ค่าที่จำเป็นในไฟล์ HTML ที่สร้างขึ้นใหม่นี้อย่างเช่นชื่อ Thumbnail ภาพ keywords description และอื่น ๆ
  6. ทำภาพที่ใช้สำหรับเป็น Thumbnail และภาพในตัวบทความ นำไปวางในโฟลเดอร์เก็บรูปภาพใน LuaWebgen ให้เรียบร้อย
  7. สร้างไฟล์ HTML สำหรับ publish ด้วย LuaWebgen
  8. เช็คใน localhost ในเครื่องว่าหน้าที่สร้างขึ้นมาใหม่ทำงานเรียบร้อย
  9. อัพโหลดขึ้น Cloudflare pages ผ่าน GIT ของ VS Code
  10. Build และตรวจสอบว่าเว็บทำงานได้ถูกต้อง

จะว่าไปแล้วก็หลายขั้นตอนอยู่เหมือนกัน