องค์ประกอบอื่นที่ไม่ใช่ข้อความ เช่น ภาพพื้นหลังและ URL ของปุ่ม สามารถมีแหล่งที่มาแบบไดนามิกจากคอลเลกชันบนหน้าคอลเลกชันได้อย่างไร

/ / ตีพิมพ์ใน การพัฒนาเว็บ, EITC/WD/WFCE Webflow CMS และอีคอมเมิร์ซ, การออกแบบด้วยคอลเล็กชัน, หน้าคอลเลกชัน, ทบทวนข้อสอบ

ในการจัดหาองค์ประกอบแบบไดนามิก เช่น รูปภาพพื้นหลังและ URL ปุ่มจากคอลเลกชันบนหน้าคอลเลกชันภายใน Webflow CMS จำเป็นอย่างยิ่งที่จะต้องเข้าใจว่าโครงสร้าง CMS ของ Webflow ทำงานอย่างไร และวิธีการผูกข้อมูล CMS กับองค์ประกอบต่างๆ บนหน้าเว็บของคุณ กระบวนการนี้เกี่ยวข้องกับการสร้างคอลเลกชัน การตั้งค่าฟิลด์คอลเลกชัน และการเชื่อมโยงฟิลด์เหล่านี้กับองค์ประกอบที่เกี่ยวข้องบนหน้าคอลเลกชันของคุณ

ทำความเข้าใจกับคอลเลกชัน Webflow CMS

คอลเลกชันใน Webflow CMS นั้นเป็นตารางฐานข้อมูลโดยที่แต่ละรายการในคอลเลกชันจะเป็นแถวในตารางนั้น แต่ละรายการสามารถมีช่องต่างๆ (คอลัมน์) เช่น ข้อความ รูปภาพ URL และอื่นๆ คอลเลกชันมีความยืดหยุ่นสูงและสามารถใช้เพื่อจัดการเนื้อหาสำหรับบล็อก พอร์ตโฟลิโอ ผลิตภัณฑ์ และประเภทเนื้อหาแบบไดนามิกอื่นๆ

การสร้างคอลเล็กชัน

ในการเริ่มต้น คุณต้องสร้างคอลเลกชันที่จะเก็บข้อมูลสำหรับองค์ประกอบไดนามิกของคุณ ต่อไปนี้เป็นวิธีดำเนินการ:

1. เข้าถึงแผงควบคุม CMS: ใน Webflow Designer ของคุณ ให้นำทางไปยังแผง CMS โดยคลิกที่ไอคอน "CMS" ในแถบด้านข้างซ้าย
2. สร้างคอลเลกชันใหม่: คลิกที่ปุ่ม "สร้างคอลเลกชันใหม่" คุณจะได้รับแจ้งให้ตั้งชื่อคอลเลกชันของคุณและกำหนดฟิลด์ที่จะมี

การตั้งค่าฟิลด์คอลเลกชัน

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

- ฟิลด์ภาพพื้นหลัง: เพิ่มช่องรูปภาพเพื่อจัดเก็บภาพพื้นหลัง
- ช่อง URL ของปุ่ม: เพิ่มฟิลด์ URL เพื่อจัดเก็บลิงค์สำหรับปุ่ม
- ฟิลด์เพิ่มเติม: คุณสามารถเพิ่มฟิลด์อื่นๆ เช่น ข้อความ, Rich Text, วันที่, ตัวเลข ฯลฯ ได้ ขึ้นอยู่กับความต้องการของคุณ

นี่คือตัวอย่างการตั้งค่าสำหรับคอลเลกชัน "โครงการ":

- ชื่อโครงการ: ข้อความธรรมดา
- ลักษณะโครงการ: ข้อความที่หลากหลาย
- ภาพโครงการ: ภาพ
- URL โครงการ: URL

การออกแบบหน้าคอลเลกชัน

เมื่อคอลเลกชันของคุณได้รับการตั้งค่าแล้ว คุณสามารถออกแบบหน้าคอลเลกชันที่จะแสดงเนื้อหาจากรายการคอลเลกชันของคุณแบบไดนามิกได้

1. ไปที่หน้าคอลเลกชัน: ในแผงหน้า ค้นหาส่วนหน้าคอลเลกชันและเลือกคอลเลกชันที่คุณสร้างขึ้น (เช่น เทมเพลตโครงการ)
2. เพิ่มองค์ประกอบให้กับหน้า: ลากและวางองค์ประกอบลงบนหน้าที่คุณต้องการเชื่อมโยงกับฟิลด์คอลเลกชันของคุณ ตัวอย่างเช่น คุณอาจเพิ่ม Div Block สำหรับภาพพื้นหลัง บล็อกข้อความสำหรับชื่อโปรเจ็กต์ และปุ่มสำหรับ URL โปรเจ็กต์

การเชื่อมโยงฟิลด์คอลเลกชันกับองค์ประกอบของหน้า

หากต้องการผูกฟิลด์คอลเลกชันกับองค์ประกอบบนหน้าคอลเลกชันของคุณ:

1. เลือกองค์ประกอบ: คลิกองค์ประกอบที่คุณต้องการเชื่อมโยงกับช่องคอลเลกชัน ตัวอย่างเช่น เลือก Div Block ที่จะทำหน้าที่เป็นพื้นหลัง
2. การผูกภาพพื้นหลัง:
– เมื่อเลือก Div Block แล้ว ให้ไปที่แผงการตั้งค่า (ไอคอนรูปเฟือง)
– ค้นหาส่วน "พื้นหลัง" และคลิกที่ช่องรูปภาพ
– เลือก "รับภาพพื้นหลังจากโครงการ" และเลือกช่องภาพโครงการ
3. ผูก URL ปุ่ม:
– เลือกองค์ประกอบปุ่ม
– ในแผงการตั้งค่า ค้นหา "การตั้งค่าลิงก์"
– เลือก "รับ URL จากโครงการ" และเลือกช่อง URL โครงการ

ตัวอย่าง: ภาพพื้นหลังแบบไดนามิกและ URL ของปุ่ม

นี่เป็นตัวอย่างเชิงปฏิบัติที่จะแสดงกระบวนการ:

- สร้างคอลเลกชันโครงการ โดยมีฟิลด์ดังต่อไปนี้:
- ชื่อโครงการ: ข้อความธรรมดา
- ลักษณะโครงการ: ข้อความที่หลากหลาย
- ภาพโครงการ: ภาพ
- URL โครงการ: URL

- ออกแบบหน้าคอลเลกชัน:
– เพิ่ม Div Block เพื่อทำหน้าที่เป็นคอนเทนเนอร์พื้นหลัง
– เพิ่มบล็อกข้อความภายใน Div Block สำหรับชื่อโปรเจ็กต์
– เพิ่มปุ่มภายใน Div Block สำหรับลิงค์โครงการ

- ผูกฟิลด์:
- ภาพพื้นหลังบล็อก Div: เลือก Div Block ไปที่แผงการตั้งค่า และผูกภาพพื้นหลังเข้ากับช่อง Project Image
- ชื่อโครงการบล็อกข้อความ: เลือกบล็อกข้อความ ไปที่แผงการตั้งค่า และผูกข้อความเข้ากับช่องชื่อโปรเจ็กต์
- URL ปุ่ม: เลือกปุ่ม ไปที่แผงการตั้งค่า และผูก URL เข้ากับช่อง URL ของโครงการ

การปรับแต่งขั้นสูง

สำหรับการปรับแต่งขั้นสูงเพิ่มเติม คุณสามารถใช้ CMS Collections ของ Webflow ร่วมกับโค้ดที่กำหนดเองหรือการผสานรวมของบุคคลที่สาม เทคนิคขั้นสูงบางประการมีดังนี้:

การมองเห็นแบบมีเงื่อนไข

คุณสามารถใช้การมองเห็นแบบมีเงื่อนไขเพื่อแสดงหรือซ่อนองค์ประกอบตามการมีอยู่หรือค่าของฟิลด์คอลเลกชัน ตัวอย่างเช่น คุณสามารถกำหนดเงื่อนไขให้แสดงเฉพาะปุ่มได้หากช่อง URL โครงการไม่ว่างเปล่า

1. เลือกองค์ประกอบ: คลิกที่องค์ประกอบที่คุณต้องการใช้เงื่อนไข (เช่น ปุ่ม)
2. ตั้งค่าการมองเห็นตามเงื่อนไข: ในแผงการตั้งค่า ให้ค้นหาส่วน "การมองเห็นตามเงื่อนไข"
3. การกำหนดเงื่อนไข: กำหนดเงื่อนไขให้แสดงองค์ประกอบเฉพาะเมื่อมีการตั้งค่าช่อง URL ของโครงการ

รหัสที่กำหนดเอง

สำหรับการโต้ตอบหรือการออกแบบที่ซับซ้อนยิ่งขึ้น คุณสามารถฝังโค้ดแบบกำหนดเองภายในหน้าคอลเลกชันของคุณได้ ซึ่งสามารถทำได้โดยใช้การฝังโค้ดที่กำหนดเองของ Webflow หรือผ่านการใช้คอมโพเนนต์ HTML Embed

1. เพิ่มส่วนประกอบการฝัง HTML: ลากองค์ประกอบฝัง HTML ไปยังหน้าคอลเลกชันของคุณ
2. แทรกโค้ดที่กำหนดเอง: เขียนโค้ด HTML, CSS หรือ JavaScript ที่คุณกำหนดเอง และใช้ตัวแปรฟิลด์ของ Webflow เพื่อแทรกข้อมูลจากคอลเลกชันของคุณแบบไดนามิก

ตัวอย่าง:

{{EJS1}}
integrations
Webflow รองรับการผสานรวมต่างๆ ที่สามารถปรับปรุงการทำงานของหน้าคอลเลกชันของคุณได้ ตัวอย่างเช่น คุณสามารถผสานรวมกับ Zapier เพื่อป้อนข้อมูลลงในคอลเลกชันของคุณโดยอัตโนมัติ หรือใช้ปลั๊กอินของบุคคลที่สามเพื่อเพิ่มคุณสมบัติเพิ่มเติม
ปฏิบัติที่ดีที่สุด
เมื่อทำงานกับเนื้อหาไดนามิกใน Webflow ให้พิจารณาแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:
- เพิ่มประสิทธิภาพรูปภาพ: ตรวจสอบให้แน่ใจว่ารูปภาพที่อัปโหลดไปยังฟิลด์คอลเลกชันของคุณได้รับการปรับให้เหมาะสมสำหรับการใช้งานเว็บเพื่อปรับปรุงเวลาในการโหลดหน้าเว็บ
 - แบบแผนการตั้งชื่อที่สอดคล้องกัน: ใช้รูปแบบการตั้งชื่อที่ชัดเจนและสม่ำเสมอสำหรับช่องคอลเลกชันของคุณเพื่อให้จัดการและอ้างอิงได้ง่ายขึ้น
 - ทดสอบอย่างละเอียด: ทดสอบหน้าคอลเลกชันของคุณในอุปกรณ์และเบราว์เซอร์ต่างๆ เพื่อให้แน่ใจว่าเนื้อหาไดนามิกแสดงอย่างถูกต้อง
 - ใช้ข้อความแสดงแทนคำอธิบาย: เพื่อวัตถุประสงค์ในการเข้าถึงและ SEO ให้ใส่ข้อความแสดงแทนที่สื่อความหมายสำหรับรูปภาพในช่องคอลเลกชันของคุณเสมอ
ด้วยการทำตามขั้นตอนและแนวปฏิบัติที่ดีที่สุดเหล่านี้ คุณจะสามารถใช้ Webflow CMS ได้อย่างมีประสิทธิภาพเพื่อสร้างหน้าคอลเลกชันแบบไดนามิกและน่าดึงดูดซึ่งจัดหาองค์ประกอบต่างๆ เช่น ภาพพื้นหลังและ URL ปุ่มจากคอลเลกชันของคุณ แนวทางนี้ไม่เพียงแต่เพิ่มความคล่องตัวในการจัดการเนื้อหา แต่ยังช่วยเพิ่มความยืดหยุ่นและความสามารถในการปรับขนาดของเว็บไซต์ของคุณอีกด้วย
คำถามและคำตอบล่าสุดอื่น ๆ เกี่ยวกับ หน้าคอลเลกชัน:
คำถามและคำตอบเพิ่มเติม:
Tagged under: , , , , , , , ,