ปรับหน้าตาเอกสารให้ตรงกับแบรนด์ของคุณได้ตั้งแต่ เลือกเทมเพลต, สีหลัก และ ฟอนต์ ไปจนถึงออกแบบเทมเพลตเองด้วย HTML + CSS คู่มือนี้ครอบคลุม 3 หัวข้อในที่เดียว — ขั้นตอนตั้งค่าหน้าตา & การพิมพ์, ตัวอย่างหน้าตาเอกสารของแต่ละเทมเพลต และวิธีอัปโหลด Custom template
📌 สิ่งที่ต้องรู้ก่อนเริ่ม
การตั้งค่าทั้งหมดอยู่ที่เมนู “ตั้งค่า → หน้าตา & การพิมพ์” การตั้งค่านี้มีผลกับเอกสารทุกประเภทที่ออกจากระบบ
ระบบมี เทมเพลตสำเร็จรูป 4 แบบ (Standard / Compact / Bordered / Two-Column) ให้เลือกและปรับสี/ฟอนต์ได้ทันที หรือถ้าต้องการควบคุมทุกจุด สามารถอัปโหลด Custom template ที่เขียนด้วย HTML + CSS พร้อม
{{placeholder}}เองได้
หัวข้อที่ 1 · ขั้นตอนตั้งค่าหน้าตาเอกสาร & การพิมพ์
ขั้นตอนที่ 1 · เข้าหน้าตั้งค่าและเลือกเทมเพลต
- ที่เมนูด้านซ้าย กลุ่ม “ตั้งค่า” เลือก “หน้าตา & การพิมพ์”
- ที่กล่อง “เลือกเทมเพลต” เลือกจาก SYSTEM TEMPLATES 4 แบบ (Standard / Compact / Bordered / Two-Column) — ดูการแสดงผลได้ในกล่อง TEMPLATE PREVIEW ทางซ้าย (ปรับ zoom ได้)
- ที่หัวข้อ “ปรับแต่งสไตล์” เลือก สีหลัก ของเอกสาร (แดง / ฟ้า / เขียว / ม่วง / ส้ม / ฟ้าอ่อน / เทาดำ หรือ “กำหนดเอง”)
ขั้นตอนที่ 2 · ตั้งฟอนต์หัวเรื่อง
- เลือก ฟอนต์หัวเรื่อง จากรายการ (เช่น Anuphan, Prompt, Kanit, IBM Plex Sans Thai) หรือปล่อยเป็น “— ใช้ค่าระบบ —”
- กำหนด ขนาดฟอนต์หัวเรื่อง — ปล่อยเป็น “auto” ให้ระบบเลือกขนาดที่เหมาะสมอัตโนมัติ หรือระบุตัวเลขเอง
ขั้นตอนที่ 3 · ตั้งฟอนต์เนื้อหาและบันทึก
- เลือก ฟอนต์เนื้อหา (เช่น IBM Plex Sans Thai, Sarabun, Prompt, Kanit, Anuphan, Noto Sans Thai) และกำหนด ขนาดฟอนต์เนื้อหา (auto = ให้ระบบกำหนด)
- เมื่อปรับเสร็จ กดปุ่ม “บันทึกและใช้งาน” ที่มุมขวาบน การตั้งค่าจึงจะมีผลกับเอกสารที่ออกจริง
เทมเพลตระบบ 4 แบบ
| เทมเพลต | ลักษณะเด่น |
|---|---|
| Standard | เลย์เอาต์มาตรฐาน โลโก้+บริษัทผู้ออกฝั่งซ้าย หัวเรื่องฝั่งขวา ผู้รับ+ข้อมูลเอกสารแบบ 2 คอลัมน์ ตารางรายการเต็มความกว้าง ยอดรวมมุมขวาล่าง |
| Compact | กระชับ ประหยัดพื้นที่ เหมาะกับเอกสารที่มีรายการเยอะ |
| Bordered | มีเส้นกรอบล้อมแต่ละส่วน อ่านง่ายเป็นสัดส่วนชัดเจน |
| Two-Column | แบ่ง 2 คอลัมน์ ฝั่งซ้ายข้อมูลผู้ออก/ผู้รับ ฝั่งขวารายการ เหมาะกับเอกสารหน้าเดียวสั้น ๆ |
⚠️ ข้อควรระวัง
ค่า “auto” ในช่องขนาดฟอนต์หมายถึงให้ระบบเลือกขนาดที่เหมาะสมให้เอง หากต้องการล็อกขนาดตายตัวให้ระบุตัวเลขแทน
ต้องกด “บันทึกและใช้งาน” ทุกครั้ง การเปลี่ยนเทมเพลต สี หรือฟอนต์จึงจะมีผลกับเอกสารที่ออกจริง (กล่อง TEMPLATE PREVIEW เป็นเพียงตัวอย่าง)
หัวข้อที่ 2 · ตัวอย่างหน้าตาเอกสาร & การพิมพ์
หน้าตาเอกสารเมื่อพิมพ์/ออกจริงของเทมเพลตระบบทั้ง 4 แบบ — เลือกให้เหมาะกับลักษณะเอกสารของคุณ
Standard — เลย์เอาต์มาตรฐาน
โลโก้และบริษัทผู้ออกฝั่งซ้าย หัวเรื่องเอกสารฝั่งขวา ตารางรายการเต็มความกว้าง ยอดรวมมุมขวาล่าง เหมาะเป็นค่าเริ่มต้นสำหรับเอกสารทั่วไป
Compact — กระชับ
จัดวางแน่น ประหยัดพื้นที่ เหมาะกับเอกสารที่มีรายการสินค้าจำนวนมากให้พอดีหน้าเดียว
Bordered — มีเส้นกรอบ
มีเส้นกรอบล้อมแต่ละส่วนของเอกสาร แบ่งสัดส่วนชัดเจน อ่านง่าย ดูเป็นทางการ
Two-Column — สองคอลัมน์
แบ่งเป็น 2 คอลัมน์ ฝั่งซ้ายข้อมูลผู้ออก/ผู้รับ ฝั่งขวารายการ เหมาะกับเอกสารหน้าเดียวที่มีรายการสั้น ๆ
หัวข้อที่ 3 · ขั้นตอนอัปโหลด Custom template
สำหรับผู้ที่ต้องการออกแบบเอกสารเองด้วย HTML + CSS — ในหัวข้อนี้เลขขั้นตอนเริ่มนับใหม่ตั้งแต่ 1
ขั้นตอนที่ 1 · ดาวน์โหลดไกด์ไลน์
- ที่ส่วน CUSTOM TEMPLATES กด “ดาวน์โหลดไกด์ไลน์” เพื่อโหลดไฟล์แนะนำ (โครง HTML + CSS พร้อมรายชื่อ
{{placeholder}}ทั้งหมด)
ตัวอย่างไกด์ไลน์ที่ดาวน์โหลดมา — อธิบาย syntax และ placeholder ทั้งหมดที่ใช้ได้:
ขั้นตอนที่ 2 · เปิดหน้าอัปโหลด Custom
- กดปุ่ม “+ อัปโหลด Custom” ในส่วน CUSTOM TEMPLATES
ขั้นตอนที่ 3 · แนบไฟล์หรือเขียนเทมเพลต
- กด “เลือกไฟล์ .html / .tpl” เพื่อแนบไฟล์เทมเพลต (ระบบจะอ่าน
<style>และแทน HTML ให้อัตโนมัติ) หรือพิมพ์โค้ดลงในช่อง HTML ด้านล่างเองก็ได้
ขั้นตอนที่ 4 · ตั้งชื่อและเขียนโค้ด
- ตั้ง “ชื่อ TEMPLATE” (จำเป็น) และกำหนด สีแบรนด์ (--BRAND) ที่จะใช้แทนค่าในเทมเพลต
- เขียนหรือวาง HTML + CSS ในช่อง พร้อมใส่
{{placeholder}}ตรงจุดที่ต้องการให้ระบบเติมข้อมูลจริง (ดูรายชื่อ placeholder ทั้งหมดได้ที่แถบขวา “Placeholder ทั้งหมด”)
ขั้นตอนที่ 5 · ดูตัวอย่าง (Live Preview)
- ตรวจผลในกล่อง “ตัวอย่าง (Live Preview)” ระบบจะเรนเดอร์เทมเพลตด้วยข้อมูลตัวอย่างให้เห็นแบบเรียลไทม์ ปรับโค้ดจนได้หน้าตาที่ต้องการ
ขั้นตอนที่ 6 · บันทึกเทมเพลต
- กดปุ่ม “อัปโหลด” ที่มุมขวาบน เพื่อบันทึกเทมเพลตเข้าระบบ
- เทมเพลตที่บันทึกจะไปปรากฏในส่วน CUSTOM TEMPLATES พร้อมเลือกใช้เหมือนเทมเพลตระบบ
Syntax ที่ใช้ในเทมเพลต
| Syntax | ความหมาย |
|---|---|
{{key}} |
แทนค่าตัวแปร พร้อม escape HTML อัตโนมัติ (ปลอดภัย) — ใช้กับข้อความทั่วไป |
{{{key}}} |
แทนค่าแบบดิบ ไม่ escape — ใช้เฉพาะค่าที่เป็น HTML / SVG เช่น QR PromptPay |
{{#each lines}}…{{/each}} |
วนลูปรายการสินค้า ภายในลูปเรียก field ของแต่ละบรรทัดได้ เช่น {{sku}} |
{{#if doc-due-date}}…{{/if}} |
แสดงเนื้อหาเฉพาะเมื่อค่ามีอยู่จริง (truthy) |
⚠️ ข้อควรระวัง
ห้ามใช้
<script>,<iframe>หรือ external URL ในเทมเพลต — ระบบบล็อกไว้เพื่อความปลอดภัยใช้
{{{...}}}(สามปีกกา) เฉพาะกับค่าที่เป็น HTML/SVG เช่น QR PromptPay เท่านั้น ค่าข้อความทั่วไปให้ใช้{{...}}(สองปีกกา) เพื่อความปลอดภัยต้องใส่
{{placeholder}}ให้ครบ ตามจุดที่ต้องการ ระบบจึงจะเติมข้อมูลจริงลงเอกสารตอนพิมพ์ได้
ผลลัพธ์หลังทำตามขั้นตอน
เอกสารทุกใบใช้หน้าตา สี และฟอนต์เดียวกันทั้งระบบ — ตั้งครั้งเดียวมีผลกับเอกสารทุกประเภทที่ออกต่อจากนี้
เลือกได้ทั้งเทมเพลตสำเร็จรูปและออกแบบเอง — ใช้เทมเพลตระบบ 4 แบบ หรืออัปโหลด Custom template ด้วย HTML + CSS
เอกสารตรงกับแบรนด์ พร้อมส่งลูกค้า — ปรับสี ฟอนต์ และเลย์เอาต์ให้เป็นภาพลักษณ์เดียวกับธุรกิจของคุณ