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

เริ่มจากการเข้าใจโครงสร้างก่อน

โฟลเดอร์ที่ควรรู้มี 4 จุดหลัก:

  1. content/articles/
  2. content/media/
  3. content/site/
  4. docs/

ความหมายแบบจำง่าย:

  • content/articles/ คือบทความทั้งหมด
  • content/media/ คือรูปทั้งหมด
  • content/site/ คือค่าตั้งค่าระดับเว็บ
  • docs/ คือคู่มือของระบบ

ถ้าจะจำแบบสั้นที่สุด:

  • จะเขียนบทความ ให้ไป content/articles/
  • จะใส่รูป ให้ไป content/media/
  • จะเปลี่ยนค่าระบบ ให้ไป content/site/

หน้าไหนคุมอะไร

ถ้าจะเปลี่ยนหน้าแรก เมนู หรือเลือกบทความขึ้น home:

  • content/site/home.md

ถ้าจะเปลี่ยน header, search, footer, cookie banner:

  • content/site/layout.md

ถ้าจะเปลี่ยนฟอนต์และโทนสี:

  • content/site/theme.md

ถ้าจะเปลี่ยนพฤติกรรมหน้าบทความ เช่น author, related posts, share:

  • content/site/article.md

ถ้าจะเปลี่ยน SEO กลางของเว็บ:

  • content/site/seo.md

ถ้าจะเปลี่ยนข้อมูลผู้เขียน default:

  • content/site/profile.md

วิธีคิดเรื่อง intro กับ body

ในระบบนี้ intro ด้านบนกับ body เนื้อหาจริงเป็นคนละส่วนกัน

intro จะถูกดึงจาก frontmatter โดยใช้ลำดับนี้:

  1. ai_summary
  2. ถ้าไม่มี ai_summary จะใช้ excerpt

ส่วน body เนื้อหาจริงจะเริ่มหลัง frontmatter ทันที และถูก render จาก Markdown ปกติ

ดังนั้นถ้าคุณพิมพ์ใจความซ้ำกันใน ai_summary และย่อหน้าแรกของบทความ มันจะดูเหมือนข้อความซ้ำสองรอบ

แนวทางที่ดีคือ:

  • ใช้ ai_summary เป็นสรุปเปิดเรื่องด้านบน
  • ให้ย่อหน้าแรกของ body เริ่มประเด็นจริงต่อเลย
  • ถ้าอยากเขียนคำเกริ่นยาว ให้เขียนใน body แต่ไม่ต้องคัดลอก ai_summary มาซ้ำ

วิธีแก้ข้อมูลผู้เขียน

ถ้าจะเปลี่ยนชื่อผู้เขียน บทบาท bio และลิงก์โปรไฟล์กลางของเว็บ ให้แก้ไฟล์นี้:

name: Trader Tum
role: Editor
bio: เขียนบทความและดูแลทิศทางเนื้อหาของเว็บ
url: https://www.thailandfxwarrior.com/about-us/
image: /media/authors/trader-tum.jpg

ค่าพวกนี้ควรอยู่ใน:

content/site/profile.md

วิธีเริ่มบทความใหม่

เริ่มจากคัดลอก template นี้:

content/templates/article-template.md

จากนั้นสร้างไฟล์ใหม่ใน:

content/articles/

ตัวอย่างชื่อไฟล์:

content/articles/2026-07-23-my-first-article.md

frontmatter พื้นฐานที่ควรมี:

status: draft
title: ชื่อบทความ
slug: my-first-article
date: 2026-07-23
updated: 2026-07-23
author: Trader Tum
excerpt: สรุปสั้นสำหรับหน้า list
seo_title: ชื่อสำหรับ Google และ Social
seo_description: คำอธิบายสั้นของบทความ
ai_summary: สรุป 2-4 ประโยคสำหรับ intro ด้านบน
hero_image: /media/my-first-article/cover.jpg
hero_image_alt: คำอธิบายภาพปก

วิธีใส่รูปปกบทความ

รูปปกด้านบนของหน้าบทความใช้ field เหล่านี้:

hero_image: /media/home/order-structure.svg
hero_image_alt: ภาพประกอบแนวคิดเรื่องโครงสร้างไฟล์และการจัดระบบบทความให้อ่านง่าย
hero_caption: คู่มือหน้าเดียวสำหรับคนดูแลเว็บและคนอัปบทความ

ความหมายคือ:

  • hero_image คือรูปปก
  • hero_image_alt คือคำอธิบายรูป
  • hero_caption คือคำสั้นใต้ภาพปกถ้าต้องการใช้

วิธีใส่รูปกลางเนื้อหา

การใส่รูปกลางเนื้อหาทำด้วย Markdown ปกติ:

ภาพตัวอย่างการวางรูปกลางบทความ

รูปแบบที่ใช้คือ:

![คำอธิบายภาพ](/media/home/order-structure.svg)

ถ้าเป็นบทความจริง ควรเก็บรูปไว้ในโฟลเดอร์ของบทความนั้นเอง เช่น:

content/media/my-first-article/

แล้วค่อยอ้างแบบนี้:

![คำอธิบายภาพ](/media/my-first-article/detail-1.jpg)

วิธีเขียนบทความให้อ่านง่าย

เวลาเขียน body เนื้อหา ให้ยึดหลักง่าย ๆ:

  1. เริ่มหัวข้อด้วย ##
  2. หนึ่ง section ต่อหนึ่งประเด็น
  3. ถ้าจะลิสต์จริงค่อยใช้ bullet หรือ number
  4. ถ้ามีข้อมูล factual ให้ใส่ sources

ตัวอย่าง list:

  • หัวข้อควรชัด
  • ย่อหน้าควรสั้นพออ่านบนมือถือ
  • รูปควรมี alt text

ตัวอย่าง numbered steps:

  1. เขียน draft ก่อน
  2. preview ให้เรียบร้อย
  3. ค่อยเปลี่ยนเป็น published

วิธี preview ก่อน publish

ให้ใช้:

status: draft

เมื่อ deploy แล้ว บทความจะดูได้ที่:

/preview/my-first-article/

ถ้าพร้อมเปิด public ค่อยเปลี่ยนเป็น:

status: published

วิธีให้บทความขึ้นหน้าแรก

แก้ไฟล์:

content/site/home.md

field ที่ใช้บ่อยคือ:

hero_slug: my-first-article
lead_slugs:
  - another-story
rail_slugs:
  - third-story

วิธี deploy ขึ้นโฮสต์

โปรเจกต์นี้ deploy ผ่าน FTP โดยใช้ไฟล์:

.vscode/sftp.json

คำสั่งหลักที่ใช้คือ:

npm run check
npm run build
npm run deploy

ตัวอย่าง code block สำหรับทดสอบ responsive

บล็อกโค้ดด้านล่างนี้ควรเลื่อนได้ในมือถือโดยไม่ดัน layout ล้นขอบจอ:

cd /Users/admin/Documents/git/cowork/projects/thailandfxwarrior
npm install
npm run check
npm run build
npm run deploy

อีกตัวอย่างหนึ่ง:

nav:
  - label: Home
    href: /
  - label: Articles
    href: /articles/
  - label: About Us
    href: /about-us/

ตัวอย่าง embed วิดีโอและโพสต์

ตัวอย่าง Facebook post embed

ตัวอย่าง X post embed

YouTube Open video

ตัวอย่าง YouTube embed

หน้านี้ควรอ่านต่อกับอะไร

  • README.md
  • docs/beginner-tutorial.md
  • docs/article-publishing.md
  • docs/site-settings.md

ถ้าคุณทำตามหน้านี้ได้ครบ คุณจะสามารถดูแลเว็บนี้ได้ทั้งฝั่งตั้งค่าระบบ ลงบทความ ใส่รูป preview และ deploy ได้ด้วยตัวเองแล้ว