ข้อมูลโมดูล
Module Code
BlogCard
หมวดหมู่
Cards
ประเภท
core
เวอร์ชัน
1.0.0
คำอธิบาย
การ์ดบทความ/ข่าวสาร
Schema Props
{
"title": {
"type": "text",
"default": "ชื่อบทความ",
"label": "ชื่อบทความ"
},
"category": {
"type": "text",
"default": "เทคโนโลยี",
"label": "หมวดหมู่"
},
"snippet": {
"type": "text",
"default": "เนื้อหาย่อ...",
"label": "เนื้อหาย่อ"
},
"date": {
"type": "text",
"default": "12 มี.ค. 2569",
"label": "วันที่"
},
"image": {
"type": "text",
"default": "",
"label": "URL รูปภาพ"
},
"buttonText": {
"type": "text",
"default": "อ่านต่อ",
"label": "ข้อความปุ่ม"
},
"articleLink": {
"type": "text",
"default": "#",
"label": "ลิงก์บทความ (URL)"
},
"articleOpenNewTab": {
"type": "boolean",
"default": false,
"label": "เปิดในแท็บใหม่"
},
"showImage": {
"type": "boolean",
"default": true,
"label": "แสดงรูปภาพ"
},
"showAuthor": {
"type": "boolean",
"default": true,
"label": "แสดงผู้เขียน"
},
"accentColor": {
"type": "color",
"default": "#dc2626",
"label": "สีเน้น"
},
"cardBg": {
"type": "color",
"default": "#ffffff",
"label": "สีพื้นหลัง"
}
}
AI Training Notes — Admin อธิบายเพิ่มเติมให้ AI เรียนรู้
ผลการรีวิวจาก AI 13/03/2026 15:52
สรุปการใช้งาน
โมดูล Blog Card เป็นส่วนประกอบที่ใช้แสดงบทความหรือข่าวสารในรูปแบบการ์ดที่สวยงามและน่าสนใจ เหมาะสำหรับการนำเสนอเนื้อหาบล็อกหรือข่าวสารบนหน้าเว็บไซต์ ช่วยให้ผู้เข้าชมสามารถเห็นภาพรวมของเนื้อหาและคลิกเข้าไปอ่านรายละเอียดเพิ่มเติมได้ง่าย
เคล็ดลับการใช้งาน
- • ใช้ Blog Card เพื่อเน้นบทความหรือข่าวสารที่สำคัญบนหน้าแรกของเว็บไซต์
- • จัดเรียง Blog Card ในรูปแบบ Grid เพื่อให้ดูเป็นระเบียบและน่าสนใจ
- • ใช้รูปภาพที่น่าดึงดูดใจเพื่อดึงดูดความสนใจของผู้เข้าชม
Props Detail
ไม่มีข้อมูล schema
เนื่องจากไม่มีข้อมูล schema props จึงไม่สามารถให้รายละเอียดเกี่ยวกับ props ได้
ตัวอย่าง JSON จาก AI
{
"type": "BlogCard",
"props": {
"title": "หัวข้อบทความ",
"description": "คำอธิบายบทความสั้นๆ",
"imageUrl": "URL ของรูปภาพหน้าปกบทความ",
"link": "URL ของบทความ",
"date": "วันที่เผยแพร่บทความ (YYYY-MM-DD)"
},
"nodes": []
}