--- title: กริดลิงก์ slug: th/user-guides/1_UO-91zvHK2D4SmNzzBU createdAt: 2024-07-24T07:41:15.178Z --- ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/7Swb-lpQWhWia7P0JwhzK-20260108-105119.png) Link Grid คือตัวองค์ประกอบที่ผสมผสานความสวยงามแบบการ์ดเข้ากับฟังก์ชันการคลิกได้ เหมาะอย่างยิ่งสำหรับการ**เน้นให้โดดเด่น** ข้อมูลสำคัญหรือการ**แสดง** ทรัพยากรที่เกี่ยวข้อง ## เวลาเหมาะสำหรับการใช้งาน ::::LinkArray{contentSource="CUSTOM" itemsPerRow="2"} :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-star"} **เน้นข้อมูลสำคัญ** สร้างการ์ดที่ดึงดูดสายตาสำหรับประกาศหรืออัปเดตสำคัญ ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-file-pen"} **แสดงเนื้อหาที่เกี่ยวข้อง** ลิงก์ไปยังทรัพยากร บทความ หรือสินค้าเพิ่มเติม ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-folder-tree"} **สร้างไดเรกทอรีที่สวยงามดึงดูด** จัดระเบียบข้อมูลให้อยู่ในรูปแบบการ์ดที่คลิกได้เพื่อการนำทางที่ง่ายขึ้น ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-arrow-pointer"} **ยกระดับประสบการณ์ผู้ใช้** มอบวิธีที่ชัดเจนและโต้ตอบได้เพื่อช่วยให้ผู้ใช้สำรวจเนื้อหาของคุณ ::: :::: ## วิธีสร้าง Link Grid ::::WorkflowBlock :::WorkflowBlockItem พิมพ์`/` เพื่อเปิดเมนู**Archbee Block** ::: :::WorkflowBlockItem ค้นหา**Link Grid** และคลิกเพื่อแทรก ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/gTvRvhMyIEa6ZAEK_XWgP-20260107-112506.png) ::: :::WorkflowBlockItem เลือกวิธีที่คุณต้องการสร้าง ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9sjCskLUQLroEBt3GbBs--20260128-131317.png) ::: :::: ## Link Grid แบบกำหนดเองเทียบกับแบบเติมอัตโนมัติ ::::::::Tabs :::::::Tab{title="กริดลิงก์แบบกำหนดเอง"} เมื่อคุณเขียนเนื้อหาใน Link Grid ด้วยตนเอง ขั้นตอนถัดไปคือ: ::::::WorkflowBlock :::::WorkflowBlockItem เลือกประเภทส่วนหัว ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/NzrVaqt42ZCwPD859wbEQ-20260107-112732.png) คุณมีตัวเลือกสามแบบ: - ไม่มี - [สี](docId\:C6xVzYU69k2oCYqLWkaQC) - [รูปภาพ](docId\:C6xVzYU69k2oCYqLWkaQC) ::::LinkArray{contentSource="CUSTOM" customOrder="foiWGU1sKYkQpO3puSCc-,9bGqAthPinIWIzN1JDG9a,KN_Vi2koMOHat6p3NwJmV"} :::LinkArrayItem **ไม่มี** ส่วนหัว ::: :::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"} **สี** ส่วนหัว ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"} **รูปภาพ** ส่วนหัว ::: :::: ::::: :::WorkflowBlockItem เพิ่มเนื้อหาของคุณ คุณสามารถปรับแต่งเนื้อหาได้ตามต้องการโดยใช้ [เมนู WYSIWYG](#) หรือแทรกบล็อกอื่นๆ เช่น: - [Headings](docId\:n7tF0cW1NYcGJ95eLyvzv) - [หัวข้อที่ขยายได้](docId\:Gdj2J6Ro-QNT7JUkoTd8z) - [รายการ](docId\:qFf_dOYkfQ7nFLxAQMEBC) - [Callout](docId\:RSZRJI1QAMLJnfm5FEyuI) - [เส้นคั่นแนวนอน](docId\:SUdKbXtAQXtHuYA3FvceR) - [ไฟล์](docId\:MEMy73RjJGuMNIqzyG_Qg) - [รูปภาพ](docId\:pfxmITebqYMNG3_1KMqb4) - [วิดีโอ](docId:5BHBpuA1QsB91PTPJUBHN) ::: :::::: ### ส่วนหัวสีทึบ คุณสามารถใช้สีเป็นส่วนหัวเพื่อทำให้การ์ดของคุณโดดเด่นได้มากขึ้น คุณยังสามารถใช้รหัสสีให้ตรงกับคุณสมบัติของคุณได้อีกด้วย ::::WorkflowBlock :::WorkflowBlockItem คลิกที่ **ประเภทส่วนหัว **:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} แล้วเลือก **สี** ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/KGqONH1WBlDKfHrOqsxKx-20260113-122010.png" size="80" width="1806" height="962" position="center" showCaption="false"} ::: :::WorkflowBlockItem คลิกที่ **เปลี่ยนสี **และเลือกสีที่คุณต้องการ การเปลี่ยนแปลงทั้งหมดจะถูกบันทึกโดยอัตโนมัติ ::: :::: ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/i2rKx8uA91waVM4dtoDrf-20260127-193752.png" size="70" width="1688" height="1324" position="center" showCaption="false"} ### ส่วนหัวรูปภาพ คุณสามารถใช้รูปภาพเป็นส่วนหัวเพื่ออธิบายเนื้อหาภายในการ์ดและทำให้สวยงามมากขึ้น ::::WorkflowBlock :::WorkflowBlockItem คลิกที่ **ประเภทส่วนหัว **:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} แล้วเลือก **รูปภาพ** ::: :::WorkflowBlockItem คลิกที่** เพิ่มรูปภาพ **ปุ่ม ::: :::WorkflowBlockItem เลือกภาพของคุณ การเปลี่ยนแปลงทั้งหมดจะถูกบันทึกโดยอัตโนมัติ ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WeWMQu8KeXdNOMW30NHTW_image.png) ### ตัวเลือกเลย์เอาต์ **จำนวนรายการต่อแถว **- ควบคุมจำนวนรายการที่แสดงในแต่ละแถว: - 3 รายการต่อแถว - 2 รายการต่อแถว - 1 รายการต่อแถว ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} ::::::: :::::Tab{title="กริดลิงก์เติมอัตโนมัติ"} ประหยัดเวลาและทำให้โครงสร้างเอกสารของคุณสอดคล้องกันโดยการเติม **Link Grid **โดยอัตโนมัติด้วยเอกสารถัดไปภายใต้เอกสารแม่ที่เลือก แต่ละรายการจะถูกแสดงเป็นลิงก์หรือการ์ดที่คลิกได้เพื่อนำทางไปยังเอกสารนั้นๆ ### เลือกแหล่งข้อมูล การเลือกแหล่งข้อมูลเป็นขั้นตอนแรกและกำหนดว่าเอกสารใดจะปรากฏใน Link Grid เลือกแหล่งที่มาที่ Link Grid ควรดึงข้อมูลมาจาก: - **เอกสารแม่ใดๆ ในพื้นที่** – เลือกเอกสารหรือหมวดหมู่ที่เจาะจงเป็นแหล่งข้อมูล - **เอกสารแม่ปัจจุบัน** – ใช้เอกสารแม่ของหน้าที่คุณกำลังแก้ไขอยู่ Link Grid จะรวมเฉพาะเอกสารที่อยู่ภายใต้เอกสารแม่ที่เลือกโดยตรงเท่านั้น เอกสารแบบร่าง ซ่อนอยู่ จำกัดสิทธิ์ หรือระดับที่ซ้อนลึกลงไปจะไม่ถูกนำมาแสดง ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/AkJ4oac_KRwvCY69ODKDb-20260128-142724.png) ### ตัวอย่าง ด้านล่างคือตัวอย่างจากเอกสารของเรา โดยแสดงการใช้ Link Grid เติมอัตโนมัติใน [Embed Examples](docId:_Ht4fXtrP-c5akFFn-eSN). ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DDWZix1eIFtrffmTaLXFE-20260128-173556.png) ### ตัวเลือกเลย์เอาต์ ตัวเลือกเหล่านี้ช่วยให้คุณควบคุมโครงสร้าง ลำดับ และลักษณะการแสดงผลของ Link Grid หลังจากเลือกแหล่งข้อมูลแล้ว คุณสามารถปรับแต่งวิธีการแสดงผลได้ **จำนวนรายการต่อแถว **- ควบคุมจำนวนรายการที่แสดงในแต่ละแถว: - 3 รายการต่อแถว - 2 รายการต่อแถว - 1 รายการต่อแถว ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **ตัวเลือกการจัดเรียง** - เลือกวิธีการจัดลำดับของรายการ: - **ค่าเริ่มต้น** – ตรงกับลำดับในผังเอกสาร - **กำหนดเอง** – ลากและวางเพื่อกำหนดลำดับเอง - **ตัวอักษร** – เรียงจาก A–Z หรือ Z–A - **วันที่สร้าง** – ใหม่ไปเก่า หรือเก่าไปใหม่ ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Uxi0o0I8YiE8zcZBIfLHG-20260128-174445.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **รูปแบบการแสดงผล** - เลือกวิธีที่รายการแสดงในเอกสารของคุณ: - **ลิงก์** – รายการแบบกระชับ เหมาะสำหรับเอกสารจำนวนมาก - **การ์ด** – รูปแบบที่มีรูปภาพ ชื่อเรื่อง และคำอธิบาย ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![มุมมองลิงก์ของรายการ Link Grid](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/S2ki6R4zi0cuGW5CimEHP-20260128-175053.png "มุมมองลิงก์ของรายการ Link Grid") ::: :::VerticalSplitItem ![มุมมองการ์ดของรายการ Link Grid](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DretKScZcyN1zDyMBsTrm-20260128-175110.png "มุมมองการ์ดของรายการ Link Grid") ::: :::: :::hint{type="info"} ### รายละเอียดการ์ด สำหรับ **การ์ด** ระบบจะดึงรูปภาพ ชื่อเรื่อง และคำอธิบายจาก [การควบคุมเมตา SEO](docId\:kmlI9_6evfYrHsfgUj2vX) โดยอัตโนมัติ คุณสามารถแก้ไขค่าเหล่านี้ได้ในแต่ละเอกสารภายใต้ **ตัวควบคุม SEO Meta** ดูเอกสาร SEO Meta เพื่อเรียนรู้วิธีอัปเดตรูปภาพ ชื่อเรื่อง และคำอธิบาย ::: ::::: :::::::: *** ## คู่มือรูปภาพ ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "คู่มือรูปภาพสำหรับ Link Grid") เพื่อให้เนื้อหาของคุณแสดงผลได้อย่างถูกต้อง เราแนะนำให้สร้างรูปภาพที่มี **ความสูง 480px** และ **ความกว้าง 1324px** โดยทำตาม [คู่มือพื้นที่ที่มองเห็นได้](docId\:C6xVzYU69k2oCYqLWkaQC) ด้านล่าง คุณสามารถมั่นใจได้ว่าเนื้อหาของคุณจะไม่ถูกตัดออก ### คู่มือพื้นที่ที่มองเห็นได้ รูปภาพหลักมีขนาดความสูง 480px และความกว้าง 1324px ::::Tabs :::Tab{title="3 รายการ / แถว"} ในกรณีที่มี **3 Link Grids** ต่อแถว พื้นที่ที่มองเห็นจะมีขนาด **480px** ในด้าน **ความสูง** และ **860px ในด้านความกว้าง** พื้นที่ที่มองเห็นนี้จะถูกจัดกึ่งกลางภายในมิติหลัก โปรดดูภาพด้านล่างเพื่อความเข้าใจที่ชัดเจนยิ่งขึ้น: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "พื้นที่ที่มองเห็น 3 Link Grids ต่อแถว") ::: :::Tab{title="2 รายการ / แถว"} เมื่อมี **2 Link Grids** ต่อแถว พื้นที่ที่มองเห็นจะถูกกำหนดโดยมิติหลัก เพื่อความเข้าใจที่ดียิ่งขึ้น โปรดดูภาพด้านล่าง: ![2 Link Grids ต่อแถว](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "พื้นที่ที่มองเห็น 2 Link Grids ต่อแถว") ::: :::Tab{title="1 รายการ / แถว"} เมื่อมีเพียง **1 Link Grid** ต่อแถว พื้นที่ที่มองเห็นจะถูกจัดกึ่งกลางภายในมิติหลัก โดยจะมีความกว้าง 1324px และความสูง 234px เพื่อความเข้าใจที่ชัดเจนยิ่งขึ้น โปรดดูภาพด้านล่าง: ![Link Grid ต่อแถว](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "พื้นที่ที่มองเห็น 1 Link Grid ต่อแถว") ::: :::: :::hint{type="info"} เพื่อความชัดเจน เนื้อหาหลักหรือโลโก้ควรถูกจัดวางภายในพื้นที่ที่กำหนดนี้ ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "ตำแหน่งการวางเนื้อหา") ::: โปรดดูตัวอย่างสาธิตด้านล่างเกี่ยวกับภาพหน้าปกและลักษณะการทำงานของมัน ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/rAFUifPkjwjyC0lbqKM4c_image-guide.png"} ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/pK4P-nlFBux86p-jBYQTu_image-guide.png"} ::: :::: ## มาร์กดาวน์ นี่คือวิธีสร้างแท็บในเอกสารของคุณโดยใช้โค้ดมาร์กดาวน์: :::::WorkflowBlock :::WorkflowBlockItem **สร้าง Link Grid** เริ่มต้นด้วยบรรทัด `::::link-array` . ::: :::WorkflowBlockItem **เพิ่มการ์ดลิงก์** เนื้อหาแต่ละรายการของ Link Grid จะอยู่ระหว่าง `:::link-array-item` และ `:::` . ::: :::WorkflowBlockItem **เลือก `headerType`** คุณมีตัวเลือกสำหรับหัวข้อสองแบบ: - **`IMAGE`:** แสดงภาพเป็นพื้นหลังของหัวข้อ - **`COLOR`:** ให้คุณใช้สีแบบทึบเป็นพื้นหลังของหัวข้อ ::: :::WorkflowBlockItem **เพิ่มแอตทริบิวต์ที่เหมาะสม** สำหรับ `IMAGE` หัวข้อ: - เพิ่ม URL ของรูปภาพเป็นค่าในแอตทริบิวต์ `headerImage` . - ตัวอย่าง: `headerImage="https://placehold.co/600x400")` สำหรับ `COLOR` หัวข้อ: - กำหนดค่าสีที่ต้องการโดยใช้โค้ดสี hex ในแอตทริบิวต์ `headerColor` . - ตัวอย่าง: `headerColor="#ff00FF"` ::: ::::WorkflowBlockItem เพิ่มเนื้อหาภายในการ์ดลิงก์ของคุณ :::hint{type="warning"} **🚨 โปรดทราบ!** เมื่อใช้ไวยากรณ์ triple colon (`:::`) เพื่อสร้างองค์ประกอบ markdown แบบซ้อน โปรดตรวจสอบว่าทุกองค์ประกอบแม่ด้านบนมีเครื่องหมายโคลอนเพิ่ม (`:`) ก่อน triple colon เปิดของมันด้วย ::: :::: ::::: ```markdown ## Link Array - Example ::::link-array :::link-array-item{headerType="IMAGE" headerImage="https://placehold.co/600x400"} - list item 1 - list item 2 ::: :::link-array-item{headerType="COLOR" headerColor="#ff00FF"} - [ ] unchecked list box - [x] checked list box ::: :::: ``` ผลลัพธ์อยู่ที่นี่: ::::LinkArray{attributes="{}" contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2YO-Z1cATRi0OGk8yZ99Y-20260127-192519.png"} - รายการ 1 - รายการ 2 ::: :::LinkArrayItem{attributes="{"headerType":"COLOR","headerColor":"#ff00FF"}" headerType="COLOR" headerColor="#ff00FF"} - [ ] กล่องรายการที่ไม่ถูกเลือก - [x] กล่องรายการที่ถูกเลือก ::: :::: ตรวจสอบ [ใช้ทางลัด Markdown](docId:1mgrOzhjKNd15rSrjHvfx) หน้าเพื่อดูทางลัด Markdown เพิ่มเติมสำหรับบล็อกอื่นๆ ## ตัวอย่าง ตัวอย่าง? สำหรับ Link Grid หรือ? มันเหมือนกับการหาน้ำในมหาสมุทร คุณหลีกเลี่ยงไม่ได้ เอกสารของเราเต็มไปด้วยสิ่งเหล่านี้! ในหน้านี้มี 8 รายการ พร้อมรูปภาพ ## CSS แบบกำหนดเอง ตลอดประสบการณ์อันยาวนานของเรา เราทุ่มเทในการช่วยลูกค้าปรับแต่งเอกสารให้สอดคล้องกับความต้องการเฉพาะของแต่ละคน นอกจากนี้ เรายังได้มอบความช่วยเหลืออันมีค่า ซึ่งเราเชื่อว่าจะเป็นประโยชน์อย่างยิ่งต่อคุณในการสร้างเอกสารที่ยอดเยี่ยมสำหรับผลิตภัณฑ์ของคุณ [ดูวิธีการทำงานของ Custom CSS](docId\:W8XuW2qnM2C_eHJjPMvh4) ### ตั้งค่าลิงก์ให้ตรึงอยู่ด้านล่าง ตั้งค่าลิงก์ภายใน Link Grid ของคุณให้ตรึงอยู่ที่ด้านล่างของการ์ด ```css ``` *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** ค้นหาบล็อกอื่น ๆ** ค้นพบวิธีใหม่ ๆ และบล็อกต่าง ๆ เพื่อสร้างหน้าเอกสารที่สวยงามและใช้งานได้จริง [ดูบล็อกทั้งหมด](docId\:fvbccw7nLvGJbcHvBvBG9) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** ต้องการความช่วยเหลือ? ⬇️** ใช้ **สีฟ้า** **ไอคอนแชท **ที่มุมขวาล่าง หรือใช้ **AI Chat** (จากช่องค้นหา) เพื่อรับคำตอบอย่างรวดเร็ว ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** ความเห็นของคุณมีความสำคัญ** ใช้แบบฟอร์มด้านล่างเพื่อให้ข้อเสนอแนะได้โดยไม่ระบุตัวตน หรือถามคำถามใน **ส่วน Q\&A** แล้วทีมงานหรือ AI ของเราจะให้คำตอบแก่คุณ ::: ::::