Frontmatter Editor: แก้และตรวจ YAML Metadata ของ Markdown
parse, validate และแก้ YAML frontmatter จาก Markdown ด้วยฟิลด์แบบ type-aware, เลขบรรทัด error และ output สำหรับ Hugo, Jekyll, Obsidian — ฟรีในเบราว์เซอร์
Table of Contents
ถ้าคุณเขียนบล็อกด้วย Hugo หรือ Jekyll หรือจดโน้ตใน Obsidian คงคุ้นเคยกับ frontmatter ดี — บล็อก metadata ช่วงต้นของไฟล์ Markdown ที่ถูกคร่อมด้วยเครื่องหมาย --- มันเก็บข้อมูลสำคัญอย่าง title, date, tags และ draft ที่ static site generator ใช้สร้างหน้าเว็บ แต่ปัญหาคือ YAML แค่พิมพ์ผิดนิดเดียว เว้นวรรคเกินหนึ่งช่อง หรือลืมครอบ quote ในค่าที่มีเครื่องหมาย colon ก็ทำให้ build ล้มทั้งโปรเจกต์ได้
Frontmatter Editor คือเครื่องมือฟรีที่แก้ปัญหานี้โดยตรง มัน parse บล็อก YAML frontmatter จากไฟล์ Markdown ให้กลายเป็นฟิลด์ที่แก้ไขได้แบบ type-aware — string ก็แก้เป็นกล่องข้อความ, date ก็เลือกวันที่, list ก็จัดการเป็นรายการ, boolean ก็สลับ true/false ได้ทันที หาก YAML มีจุดที่พัง เครื่องมือจะ validate พร้อมเลขบรรทัดชี้จุดผิดให้เห็นชัด แล้ว regenerate ผลลัพธ์ที่สะอาดใหม่ให้กลับไปวางในไฟล์ต้นฉบับ
ทั้งหมดนี้ทำงานใน browser 100% ไม่ต้องสมัครสมาชิก ไม่ต้องติดตั้งอะไร และไฟล์ไม่ถูกอัปโหลดไปไหน บทความนี้จะพาไปดูฟีเจอร์หลัก วิธีใช้งานทีละขั้น พื้นฐานไวยากรณ์ YAML ที่ควรรู้ และกรณีใช้งานจริงของบล็อกเกอร์และนักพัฒนา static site
ทำไมต้องใช้ Frontmatter Editor?
- ลดโอกาส build ล้ม — error ของ YAML เช่น indentation ผิดหรือลืม colon ถูกจับได้ตั้งแต่ก่อน commit ไม่ต้องรอให้ pipeline ของ Hugo หรือ Jekyll พังแล้วค่อยไล่หา
- แก้ได้โดยไม่ต้องจำ syntax — ฟิลด์แต่ละประเภทมีตัวแก้ที่เหมาะสม เลือก date จากตัวเลือกวันที่ เพิ่ม tag ผ่าน list แทนการพิมพ์ dash และเว้นวรรคเอง
- เห็นจุดที่ YAML พังทันที — validate พร้อมเลขบรรทัด บอกได้เลยว่าบรรทัดไหนมีปัญหา ไม่ต้องไล่อ่านทีละบรรทัดด้วยตาเปล่า
- output สะอาดสม่ำเสมอ — regenerate ใหม่ทั้งบล็อก ทำให้ระยะห่าง ลำดับฟิลด์ และรูปแบบ list เป็นมาตรฐานเดียวกันทุกไฟล์
- รองรับหลายแพลตฟอร์ม — ออกแบบตามแนวปฏิบัติของ Hugo, Jekyll และ Obsidian จึงเข้ากับ workflow เดิมของคุณได้ทันที
- เป็นส่วนตัวและปลอดภัย — ทุกอย่างประมวลผลในเบราว์เซอร์ ไฟล์ draft หรือโน้ตส่วนตัวไม่ถูกส่งขึ้นเซิร์ฟเวอร์ใด ๆ
ฟีเจอร์หลัก
| ฟีเจอร์ | ทำอะไร |
|---|---|
| Parse frontmatter | วางไฟล์ Markdown แล้วระบบแยกบล็อก YAML ออกมาเป็นฟิลด์ที่แก้ไขได้ทีละค่า |
| แก้ไขแบบ type-aware | string, date, list และ boolean มีตัวแก้ที่เหมาะกับประเภทข้อมูล ลดโอกาสพิมพ์ผิด |
| Validate พร้อมเลขบรรทัด | ชี้จุดที่ YAML พังพร้อมเลขบรรทัดในไฟล์ต้นฉบับ แก้ตรงจุดได้เร็ว |
| Regenerate output | สร้างบล็อก frontmatter ใหม่ที่สะอาดและจัดรูปแบบสม่ำเสมอ พร้อมคัดลอกกลับไปวาง |
| รองรับ Hugo, Jekyll, Obsidian | ครอบคลุมแนวปฏิบัติยอดนิยมของ static site generator และแอปโน้ตยอดนิยม |
จุดที่ต่างจากการแก้ใน text editor ธรรมดาคือ คุณไม่ได้แก้ "ข้อความ" แต่แก้ "ข้อมูล" — ระบบรู้ว่า draft ต้องเป็น boolean และ tags ต้องเป็น list จึงช่วยกันพลาดตั้งแต่ต้นทาง และเมื่อแก้เสร็จ ผลลัพธ์ที่ได้รับประกันว่าเป็น YAML ที่ parse ได้เสมอ
วิธีแก้ไข Frontmatter
- เปิด Frontmatter Editor แล้ววางไฟล์ Markdown หรือเฉพาะบล็อก frontmatter ลงในช่องป้อนข้อมูล
- รอสักครู่ ระบบจะ parse บล็อก YAML ออกมาเป็นฟิลด์แยกกัน พร้อมป้ายประเภทข้อมูลกำกับ เช่น string, date, list และ boolean
- แก้ค่าที่ต้องการ — พิมพ์ title ใหม่ เลือก date จากตัวเลือกวันที่ เพิ่มหรือลบ tag ใน list หรือสลับ draft เป็น false
- ถ้ามี error ให้ดูเลขบรรทัดที่ระบบชี้ กลับไปแก้จุดนั้นในต้นฉบับแล้ววางใหม่ ทำจนกว่าการ validate จะผ่านหมด
- คัดลอกผลลัพธ์ frontmatter ที่ regenerate แล้วนำกลับไปวางทับบล็อกเดิมในไฟล์ Markdown ของคุณ
เท่านี้ก็ได้ไฟล์ที่ metadata ถูกต้อง พร้อม build โดยไม่ต้องลุ้นว่าจะล้ม
พื้นฐานไวยากรณ์ YAML Frontmatter
โครงสร้างพื้นฐานคือเฟนซ์ --- สองอันคร่อมบล็อก metadata ไว้ด้านบนสุดของไฟล์ ด้านในเป็นคู่ key: value เรียงจากบนลงล่าง เช่น
--- title: "เคล็ดลับ YAML" date: 2026-09-18 draft: false ---
ฟิลด์ scalar อย่าง title คือค่าเดี่ยวหนึ่งค่า ส่วน list อย่าง tags เขียนเป็น [hugo, jekyll] ในบรรทัดเดียว หรือขึ้นบรรทัดใหม่ด้วย dash นำหน้าก็ได้ ค่า date ควรเขียนในรูปแบบ YYYY-MM-DD เพื่อให้ Hugo และ Jekyll จัดเรียงโพสต์ได้ถูกต้อง ส่วน boolean รับแค่ true หรือ false เท่านั้น — ถ้าพิมพ์ "false" แบบครอบ quote ค่านั้นจะกลายเป็น string ทันที
error ที่พบบ่อยที่สุดมีสามกลุ่ม หนึ่ง indentation ผิด เช่น รายการใน list ถูกย่อหน้าไม่ตรงกัน เพราะ YAML ใช้การเว้นวรรคกำหนดโครงสร้าง แค่เว้นวรรคเกินหนึ่งช่องก็พังได้ สอง ลืม colon หลังชื่อฟิลด์ บรรทัดนั้นจะถูกตีความเป็นข้อความลอย ๆ จน parser ฟ้อง error ทันที และสาม string ที่มีเครื่องหมาย colon แต่ไม่ครอบ quote เช่น title: แนะนำ YAML: ฉบับเข้าใจง่าย ซึ่งทำให้ parser สับสนว่า key ตัวไหนคือตัวจริง วิธีกันพลาดคือครอบด้วย quote เสมอเมื่อค่ามีสัญลักษณ์พิเศษ
นี่คือเหตุผลที่เลขบรรทัดมีค่ามาก — เมื่อ build ล้ม สแตกเทรซของ YAML parser มักบอกเพียงว่า "mapping values are not allowed" โดยไม่บอกว่าไฟล์ไหน บรรทัดไหน การ validate ในเครื่องมือที่ชี้เลขบรรทัดตรง ๆ ช่วยตัดเวลาไล่หาออกไปเกือบทั้งหมด
กรณีใช้งานจริง
แก้ build ที่ล้มใน Hugo
Hugo จะปฏิเสธทั้งโปรเจกต์ถ้ามีไฟล์ใดไฟล์หนึ่งที่ YAML พัง สมมติว่าคุณเพิ่งเพสต์ title ที่มีเครื่องหมาย colon แล้ว dev server ดับทันที วิธีเร็วที่สุดคือวางไฟล์นั้นใน Frontmatter Editor ดูเลขบรรทัดที่ถูกชี้ แก้ให้ครอบ quote แล้วคัดลอกผลลัพธ์กลับไปวาง build รอบถัดไปก็ผ่านสบาย
เตรียมโพสต์ Jekyll เป็นชุด
ถ้ามีโพสต์เก่าจากแพลตฟอร์มอื่นที่ต้องย้ายเข้า Jekyll เป็นสิบไฟล์ ให้ไล่ทีละไฟล์ในเครื่องมือนี้ แก้ date ให้เป็นรูปแบบ YYYY-MM-DD ปรับ permalink และ categories ให้ตรงธรรมเนียมของ Jekyll แล้วใช้ผลลัพธ์ที่ regenerate ทุกไฟล์จะมีรูปแบบ metadata เหมือนกันเป๊ะ ดูเป็นระบบตั้งแต่วันแรกที่ deploy
จัด metadata ของโน้ต Obsidian
โน้ตใน Obsidian ใช้ frontmatter เก็บคุณสมบัติอย่าง tags, aliases และ date สำหรับปลั๊กอินอย่าง Dataview หากบางโน้ตเขียนสะสมมานานจนรูปแบบเริ่มเหลื่อมล้ำ วางเข้าเครื่องมือ จัด list ให้เรียบร้อย ลบฟิลด์ซ้ำ แล้ว regenerate กลับไป วอลต์ทั้งวอลต์จะมี metadata ที่ query ได้แม่นยำขึ้นมาก
อบรมนักเขียนบล็อกหน้าใหม่
สมาชิกทีมที่ไม่ใช่โปรแกรมเมอร์มักกลัว YAML เพราะเคยทำ build ล้มมาแล้ว ให้ใช้ Frontmatter Editor เป็นเครื่องมือหลักแทนการแก้ไฟล์ดิบ ฟิลด์แบบ type-aware ช่วยให้เขาแก้ date และ tags ได้ถูกต้องโดยไม่ต้องเรียน syntax ทีมจึงรับคนใหม่ได้เร็วขึ้นโดยไม่เพิ่มบั๊ก
แนวทางปฏิบัติที่ดี
- ครอบ quote เสมอ เมื่อค่า string มีเครื่องหมาย colon หรือสัญลักษณ์พิเศษ อย่าเสี่ยงพิมพ์ปล่อย ๆ
- ใช้ date รูปแบบ YYYY-MM-DD เท่านั้น เพื่อให้ Hugo และ Jekyll เรียงลำดับโพสต์ได้ถูกต้อง
- รักษาลำดับฟิลด์ให้คงที่ทุกไฟล์ เช่น title, date, tags, draft ทำให้ diff ใน git อ่านง่ายและเทียบไฟล์ได้เร็ว
- validate ก่อน commit ทุกครั้ง ใช้เลขบรรทัดจากเครื่องมือเป็นตัวยืนยันว่า YAML สมบูรณ์ก่อน push
- อย่าครอบ boolean ด้วย quote ถ้าตั้งใจให้เป็นค่า true/false จริง ๆ ไม่ใช่ข้อความ
- เก็บต้นฉบับไว้ก่อนวางทับ ถ้าผลลัพธ์ regenerate ดูไม่คุ้นตา ยังมีต้นฉบับไว้เทียบกลับได้
พร้อมใช้งานแล้วหรือยัง? เปิด Frontmatter Editor วางไฟล์แรกของคุณลงไป แล้วสัมผัสเองว่าการแก้ frontmatter แบบเห็นฟิลด์ชัด ๆ ง่ายกว่าการไล่แก้ YAML ด้วยตาเปล่าหลายเท่า ใช้เวลาไม่ถึงนาที ฟรี และไม่มีขั้นตอนสมัครใด ๆ
เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:
- YAML Formatter — จัดรูปแบบและ validate ไฟล์ YAML ทั่วไปให้อ่านง่าย
- Markdown to HTML Converter — แปลง Markdown เป็น HTML พร้อมใช้ทันที
- JSON Formatter — จัดรูปแบบ JSON ให้สวยงามและตรวจสอบความถูกต้อง
ขอให้เผยแพร่อย่างสนุก!
คำถามที่พบบ่อย
ถ: Frontmatter Editor เก็บไฟล์ของฉันไว้บนเซิร์ฟเวอร์หรือไม่?
ตอบ: ไม่มีการเก็บไฟล์ใด ๆ ทุกอย่าง parse และแก้ไขใน browser ของคุณเท่านั้น ไฟล์ Markdown ไม่ถูกอัปโหลดไปที่ใด จึงใช้กับเนื้อหาที่ยังไม่เผยแพร่ได้อย่างปลอดภัย
ถ: รองรับ frontmatter แบบ TOML ของ Hugo ด้วยไหม?
ตอบ: เครื่องมือนี้เน้นบล็อก YAML ซึ่งเป็นรูปแบบที่พบมากที่สุดทั้งใน Hugo, Jekyll และ Obsidian ถ้าไฟล์ของคุณใช้ TOML แนะนำให้แปลงเป็น YAML ก่อน แล้วใช้เครื่องมือนี้จัดการต่อได้ตามปกติ
ถ: ถ้า YAML พังจน parse ไม่ได้เลย ต้องทำยังไง?
ตอบ: ระบบจะ validate และแสดงเลขบรรทัดที่พบปัญหา ให้กลับไปแก้จุดนั้นในต้นฉบับ เช่น เติม colon ที่ขาดหรือครอบ quote แล้ววางใหม่ ทำซ้ำจนการ parse ผ่าน จากนั้นจึงแก้ฟิลด์ผ่านตัวแก้แบบ type-aware ต่อได้เลย
ถ: ใช้กับหลายไฟล์พร้อมกันได้ไหม?
ตอบ: เครื่องมือทำงานทีละไฟล์เพื่อความแม่นยำของเลขบรรทัดและการ validate ถ้ามีหลายไฟล์ ให้ไล่ทีละไฟล์แล้วคัดลอกผลลัพธ์กลับไปเก็บ ซึ่งเหมาะกับงานปรับรูปแบบเป็นชุดอย่างการย้าย blog ข้ามแพลตฟอร์ม
ถ: ต้องติดตั้งโปรแกรมหรือสมัครสมาชิกก่อนใช้งานหรือไม่?
ตอบ: ไม่ต้องเลย เปิดใน browser แล้วใช้งานได้ทันที ฟรีทั้งหมด และใช้ได้ทั้งบนคอมพิวเตอร์และอุปกรณ์พกพาที่มีเว็บเบราว์เซอร์