สร้างและแก้ไขโมดูลในตัวจัดการการออกแบบ

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

โปรดทราบ: การสร้างโมดูลต้องใช้ความรู้เกี่ยวกับ HTML, CSS, HubL และตัวจัดการการออกแบบ HubSpot HubSpot แนะนำให้ทำงานร่วมกับนักพัฒนาซอฟต์แวร์เพื่อสร้างโมดูลที่มีรหัส

สร้างโมดูลใหม่

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ที่ด้านบนของตัวค้นหาให้คลิกเมนูแบบเลื่อนลงไฟล์แล้วเลือก ไฟล์ใหม่

3. ในกล่องโต้ตอบให้คลิกเมนูแบบเลื่อนลงวันนี้คุณต้องการสร้างอะไรและเลือกโมดูล
4. คลิกถัดไป
5. ในช่องที่คุณต้องการใช้โมดูลนี้ให้เลือกช่องทำเครื่องหมายถัดจากเนื้อหาแต่ละประเภทที่จะใช้โมดูลของคุณ (เช่นโพสต์บล็อก อีเมลหรือหน้า Landing Page) 
6. ในฟิลด์ขอบเขตเนื้อหาของโมดูลให้เลือกตัวเลือก (เช่นโมดูลท้องถิ่นหรือโม ดูลทั่วโลก) หากคุณสร้างโมดูลส่วนรวมการแก้ไขเนื้อหาของโมดูลนี้จะอัปเดตทุกตำแหน่งที่ใช้โมดูล 
7. ป้อนชื่อไฟล์สำหรับโมดูล
8. หากต้องการเปลี่ยนตำแหน่งไฟล์ของโมดูลให้คลิกเปลี่ยนในส่วน ตำแหน่งไฟล์ ในกล่องป๊อปอัปให้เลือกตำแหน่งใหม่แล้วคลิกเลือก
9. เมื่อเสร็จแล้วให้คลิก สร้าง
10. แก้ไขโมดูลต่อไป

โปรดทราบ: โมดูลที่ใช้ในอีเมลสามารถสร้างได้ในบัญชีที่มีการสมัครใช้งาน Marketing Hub Professional หรือ Enterprise เท่านั้น ต้องไม่มี CSS หรือ JavaScript 

แก้ไขโมดูล

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

เพิ่มป้ายกำกับลงในโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูลที่คุณต้องการแก้ไขป้ายกำกับ
3. ในตัวตรวจสอบให้ป้อน ฉลาก

เพิ่มฟิลด์ไปยังโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในผู้ตรวจสอบในส่วนเขตข้อมูลให้คลิกเมนูแบบเลื่อนลง เพิ่มฟิลด์ จากนั้นเลือกฟิลด์ที่จะเพิ่มลงในโมดูล

4. หากต้องการแก้ไขชื่อของฟิลด์ให้คลิกไอคอน  edit แก้ไขแล้วป้อนชื่อใหม่ หากต้องการแก้ไขชื่อตัวแปร HubL ให้ป้อนชื่อใหม่ในฟิลด์ชื่อตัวแปร HubL 

ปรับแต่งเนื้อหาเริ่มต้นของฟิลด์

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในผู้ตรวจสอบในส่วนเขตข้อมูลให้วางเมาส์เหนือเขตข้อมูลแล้วคลิก แก้ไข
4. ในส่วนตัวเลือกเนื้อหาให้เพิ่มหรือแก้ไขตัวเลือกเนื้อหาเริ่มต้น ตัวเลือกเนื้อหาเริ่มต้นที่มีอยู่จะขึ้นอยู่กับประเภทฟิลด์ที่เลือก

ตัวอย่างเช่นเมื่อเพิ่มประเภทฟิลด์วันที่และเวลาลงในโมดูลคุณสามารถเลือกวันที่และเวลาเริ่มต้นได้ คุณยังสามารถป้อนช่วงเวลาเริ่มต้นได้ด้วย

ตั้งค่าตัวเลือกเครื่องมือแก้ไขฟิลด์

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในผู้ตรวจสอบในส่วนเขตข้อมูลให้วางเมาส์เหนือเขตข้อมูลแล้วคลิก แก้ไข
4. ในส่วนตัวเลือกเครื่องมือแก้ไขหากต้องการให้ฟิลด์ต้องการให้เปิดสวิตช์ทำให้ฟิลด์นี้ต้องเปิด การดำเนินการนี้จะป้องกันไม่ให้ผู้ใช้เว้นช่องว่างไว้ภายในตัวแก้ไขเนื้อหา
5. เพื่อป้องกันไม่ให้มีการแก้ไขเนื้อหาของฟิลด์ให้เปิดสวิตช์ป้องกันการแก้ไขในเครื่องมือแก้ไขเนื้อหา เนื้อหาของฟิลด์ยังคงสามารถปรับแต่งได้ในตัวจัดการการออกแบบในระดับเทมเพลต ตัวเลือกนี้ไม่พร้อมใช้งานสำหรับโมดูลทั่วไป
6. หากต้องการเพิ่มบริบทหรือคำแนะนำเกี่ยวกับวิธีใช้ฟิลด์ให้ป้อนข้อความในฟิลด์ข้อความช่วยเหลือของ Tooltip หรือในฟิลด์ข้อความช่วยเหลือของ Inline
   • ข้อความช่วยเหลือของ Tooltip: ข้อความนี้จะปรากฏใน Tooltip เมื่อผู้ใช้เลื่อนเมาส์ไปinfoCircleIcon ไอคอน infoCircleIcon ในเครื่องมือแก้ไขเนื้อหา
   • ข้อความช่วยเหลือแบบอินไลน์: ข้อความนี้จะปรากฏใต้ฟิลด์เมื่อผู้ใช้กำลังแก้ไขโมดูลในตัวแก้ไขเนื้อหา

ตั้งเงื่อนไขการแสดงผลฟิลด์

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในผู้ตรวจสอบในส่วนเขตข้อมูลให้วางเมาส์เหนือเขตข้อมูลแล้วคลิก แก้ไข
4. ในส่วนเงื่อนไขการแสดงผลให้คลิกเมนูดรอปดาวน์ตัวแปร HubL และเลือก ตัวแปร 
5. คลิกเมนูแบบเลื่อนลงที่สองและเลือกตัวเลือก (เช่นเท่ากับหรือไม่ว่างเปล่า) อาจต้องใช้ฟิลด์เงื่อนไขเพิ่มเติมขึ้นอยู่กับตัวเลือกที่เลือก ตัวอย่างเช่นหากคุณเลือกเท่ากับจะต้องมีฟิลด์ค่าเพิ่ม
6. ตามค่าเริ่มต้นเงื่อนไขการแสดงผลจะเปิดโดยอัตโนมัติเมื่อมีการกำหนดค่าเงื่อนไข หากต้องการปิดเงื่อนไขการแสดงผลให้ปิดสวิตช์เงื่อนไขการแสดงผล

ตั้งค่าตัวเลือกตัวทำซ้ำช่อง

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในผู้ตรวจสอบในส่วนเขตข้อมูลให้วางเมาส์เหนือเขตข้อมูลแล้วคลิก แก้ไข
4. ในส่วนตัวเลือกผู้ทำซ้ำให้ป้อนตัวเลขในฟิลด์ขั้นต่ำและสูงสุด (ไม่บังคับ) การดำเนินการนี้จะกำหนดจำนวนครั้งขั้นต่ำที่ฟิลด์จะปรากฏในโมดูลสูงสุดเป็นค่าสูงสุด 
5. หากต้องการกำหนดจำนวนครั้งที่ฟิลด์ควรแสดงตามค่าเริ่มต้นให้ป้อนตัวเลขในฟิลด์จำนวนออบเจ็กต์เริ่มต้น
6. ตามค่าเริ่มต้นตัวเลือกตัวทำซ้ำจะเปิดโดยอัตโนมัติเมื่อกำหนดค่าแล้ว หากต้องการปิดตัวเลือกตัวทำซ้ำให้ปิดตัวเลือกตัวทำซ้ำ

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

ฟิลด์โมดูลกลุ่ม

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในผู้ตรวจสอบในส่วนเขตข้อมูลให้คลิกเมนูดร็อปดาวน์การดำเนินการและเลือก กลุ่ม
4. เลือกฟิลด์อย่างน้อยหนึ่งฟิลด์เพื่อจัดกลุ่มด้วยกันแล้วคลิกสร้างกลุ่ม

เพิ่มข้อความช่วยเหลือในโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในตัวตรวจสอบในส่วนตัวเลือกตัวแก้ไขให้ป้อนข้อความในฟิลด์ข้อความช่วยเหลือแบบอินไลน์

จัดการประเภทเนื้อหาและความพร้อมใช้งานสำหรับโมดูล

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. หากต้องการแก้ไขประเภทเนื้อหาสำหรับโมดูลให้คลิกประเภทเนื้อหาด้านล่างชื่อโมดูลในตัวตรวจสอบที่ด้านบนขวา

1. • ในกล่องโต้ตอบให้เลือกหรือล้างกล่องทำเครื่องหมายถัดจากเนื้อหาแต่ละประเภทที่โมดูลของคุณจะถูกใช้หรือไม่ใช้ (เช่นโพสต์บล็อก อีเมลหรือหน้า Landing Page) 
   • เมื่อเสร็จแล้วให้คลิกอัพเดท

4. หากต้องการจัดการความพร้อมใช้งานของโมดูลในเทมเพลตหรือหน้าเว็บให้เปิดสวิตช์ทำให้พร้อมใช้งานสำหรับเทมเพลตและหน้าเว็บที่ด้านบน ขวาหากต้องการทดสอบฟังก์ชันการทำงานของโมดูลหรือปิดความพร้อมใช้งานในเทมเพลตและหน้าให้เปิดสวิตช์ทำให้พร้อมใช้งานสำหรับเทมเพลตและหน้า  

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

คัดลอกและวางข้อมูลโค้ดฟิลด์

เมื่อรวมฟิลด์ลงในโมดูลคุณสามารถคัดลอกและวางข้อมูลโค้ดของฟิลด์ลงในส่วน module.html (HTML + HubL) ภายในตัวแก้ไขโมดูล

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. ในตัวตรวจสอบให้วางเมาส์เหนือฟิลด์โมดูลและคลิกเมนูแบบเลื่อนลงการกระทำ ในส่วนฟิลด์ จากนั้นเลือกคัดลอกข้อมูลโค้ด 
4. ในตัวแก้ไขโมดูลให้วางตัวอย่างฟิลด์ในตำแหน่งที่ต้องการภายใน module.html (HTML + HubL) คุณสามารถใช้แป้นพิมพ์ลัด Cmd + V หรือ Ctrl + V 

เขียนไวยากรณ์ของโมดูล

ในขณะที่คุณแก้ไขโมดูลคุณสามารถเขียนไวยากรณ์ของโมดูลได้ในส่วนตัวแก้ไขโมดูล  module.html  (HTML + HubL), module.css และ module.js เรียนรู้เพิ่มเติมเกี่ยวกับตัวแก้ไขโมดู  ลและภาพรวมโมดูล

ดูตัวอย่างและเผยแพร่โมดูล

เมื่อแก้ไขโมดูลเสร็จแล้วรวมถึงการเพิ่มฟิลด์และไวยากรณ์ของโมดูลการเขียนคุณสามารถดูตัวอย่างและเผยแพร่โมดูลได้ 

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดโมดูล
3. หากต้องการดูตัวอย่างโมดูลให้คลิกดูตัวอย่างที่ด้านบนขวา ระบบจะนำคุณไปยังแท็บเบราว์เซอร์ใหม่เพื่อดูตัวอย่างโมดูล ตัวอย่างนี้จะซิงค์กับตัวแก้ไขโมดูลและจะรีเฟรชโดยอัตโนมัติเมื่อมีการแก้ไขเกิดขึ้น
4. หากต้องการเผยแพร่โมดูลให้คลิกเผยแพร่การเปลี่ยนแปลง 

เพิ่มโมดูลไปยังเทมเพลต

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

1. ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > ตัวจัดการการออกแบบ
2. ในตัวค้นหาให้คลิกเพื่อเปิดเทมเพลต
3. หากต้องการเพิ่มโมดูลลงในเทมเพลตการลากและวางในตัวแก้ไขเค้าโครงให้คลิกแท็บ + เพิ่มที่ด้านบนของตัวตรวจสอบ
   • ในช่องค้นหาให้ป้อนชื่อของโมดูล หากต้องการจำกัดการค้นหาให้แคบลงไปที่โมดูลที่กำหนดเองให้คลิกเมนูดรอปดาวน์ตัวกรองตามหมวดหมู่หรือแท็กแล้วเลือกโมดูลที่กำหนดเอง
   • คลิdragHandleIconไอคอน dragHandleIcon ลากและวางและย้ายโมดูลไปไว้ในตำแหน่งในตัวแก้ไขเค้าโครง
4. วิธีเพิ่มโมดูลลงในเทมเพลตรหัสที่กำหนดเอง:
   •  คลิกขวาหรือ Ctrl + คลิกที่โมดูลใน ตัวค้นหาและเลือกคัดลอกข้อมูลโค้ด หรือคลิกเพื่อเปิดโมดูลจากนั้นในส่วนการใช้เทมเพลตของ ผู้ตรวจสอบให้คลิกคัดลอกข้อมูลโค้ด
   • ในเทมเพลตรหัสที่กำหนดเองให้วางตัวอย่างโมดูลในตัวแก้ไขรหัส
5. เมื่อเสร็จแล้วให้คลิกเผยแพร่การเปลี่ยนแปลงที่ด้านบนขวา

ตัวอย่าง

สร้างโมดูลเคาท์ดาวน์

1. สร้างโมดูลในตัวจัดการการออกแบบและตั้งชื่อโมดูลว่า 'ตัวจับเวลานับถอยหลัง'
2. ในผู้ตรวจสอบในส่วนฟิลด์ให้คลิกเมนูแบบเลื่อนลง เพิ่มฟิลด์ 

• • เลือกช่องวันที่และเวลา ป้อนชื่อ 'วันที่และเวลากิจกรรม' การดำเนินการนี้จะอัปเดตฟิลด์ชื่อตัวแปร HubL เป็น event_date_and_time

• • เลือกช่อง สี ใส่ชื่อ 'Timer Font Color' การดำเนินการนี้จะอัปเดตฟิลด์ชื่อตัวแปร HubL เป็น timer_font_color

โปรดทราบ: ชื่อตัวแปร HubL ต้องตรงกับชื่อตัวแปรที่รวมอยู่ในส่วนรหัส module.html (HTML + HubL) ด้านล่าง

3. ในตัวแก้ไขโมดูลให้คัดลอกและวางโค้ดต่อไปนี้ลงในส่วน module.html (HTML + HubL):

< span id =" target-date "style =" display: none ;">


< div style =" float: left; width: 100%; color: ;">
 < div class =" time_container "style =" margin-left: 30% ;">
 < span id =" days "> < br >
 วัน
 
 < div class =" time_container ">
 < span id =" hours "> < br >
 ชั่วโมง
 <
 div class =" time_container ">
 < span id =" minutes ">< br >
 MINUTES
 
 < div class =" time_container ">
 < span id =" seconds ">< br >
 วินาที
 >

4. คัดลอกและวางโค้ดต่อไปนี้ลงในส่วน module.css:

.time_container {
float: left;
ความกว้าง: 10%;
แนวข้อความ: กึ่งกลาง;
}.time
_container span {
font-weight: bold;
font-size: 200%;}

5. คัดลอกและวางโค้ดต่อไปนี้ลงในส่วน module.js:

// ฟังก์ชันในการคำนวณและแสดงการนับถอยหลัง
ฟังก์ชัน updateCountdown () {//
รับวันที่เป้าหมายจากช่วงที่ซ่อนอยู่
const targetDate = วันที่ใหม่ (document.getElementById (' target-date ').textContent);
// รับวันที่ปัจจุบัน
const currentDate = วันที่ใหม่ ();
// คำนวณเวลาที่เหลือ (เป็นมิลลิวินาที)
const timeRemaining = วันที่เป้าหมาย - วันที่ปัจจุบัน;
// ตรวจสอบว่าวันที่เป้าหมายผ่านไปแล้วหรือไม่
if (timeRemaining <= 0) {document.getElementById (' countdown ').innerText = 'การนับถอยหลังหมดอายุ ';
return
;}//
คำนวณวันชั่วโมงนาทีและวินาทีที่เหลือ
const days = Math.floor (timeRemaining /( 1000 * 60 * 60 * 24));
const hours = Math.floor ((timeRemaining % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
const minutes = Math.floor ((timeRemaining % (1000 * 60 * 60 ))/( 1000 * 60));
const seconds = Math.floor ((timeRemaining % (1000 * 60 ))/ 1000);
// แสดงเอกสารนับถอยหลัง
.getElementById (' days ').innerText = '${days}';
document.getElementById (' hours ').innerText = '${hours}';
document.getElementById (' minutes ').innerText = '${minutes}';
document.getElementById (' seconds ').innerText = '${seconds}';
}//
อัปเดตการนับถอยหลังทุกวินาที
setInterval (updateCountdown, 1000);
// การโทรครั้งแรกเพื่ออัปเดตการนับถอยหลังทันที
updateCountdown ();

6. เมื่อเสร็จแล้วให้ดูตัวอย่างและเผยแพร่โมดูล
7. เพิ่มโมดูลลงในเทมเพลตต่อไป