สร้างเทมเพลตรหัสที่กำหนดเอง

นักพัฒนาสามารถสร้างบล็อกหน้าเว็บไซต์หน้า Landing Page และเทมเพลตอีเมลได้ตั้งแต่เริ่มต้นโดยใช้ HTML + HubL นอกจากนี้คุณยังสามารถโคลนเค้าโครงเทมเพลตลากและวางเป็น HTML จากนั้นปรับแต่งเป็นเทมเพลตที่มีรหัส

ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบเนื้อหาที่กำหนดเองได้ในเอกสารสำหรับนักพัฒนาซอฟต์แวร์ของเรา 

ก่อนที่คุณจะเริ่มต้น

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

ทำความเข้าใจข้อกำหนด

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

ทำความเข้าใจข้อจำกัดและข้อพิจารณา

• ต้องสมัครใช้งาน Marketing Hub Professional หรือ Enterprise เพื่อสร้างเทมเพลตอีเมล บัญชี Content Hub สามารถสร้างอีเมลโดยใช้ตัวแก้ไขอีเมลแบบลากและวาง
• เทมเพลตรหัสที่กำหนดเองสามารถใช้ตัวแปรที่กำหนดไว้ล่วงหน้าจำนวนมาก ตัวแปรเหล่านี้บางตัวจำเป็นต้องใช้ในการสร้างอีเมลและหน้าเว็บในขณะที่ตัวแปรอื่นเป็นตัวเลือก เรียนรู้เพิ่มเติมเกี่ยวกับการเพิ่มอีเมลที่จำเป็นเว็บไซต์และหน้า Landing Page ตัวแปร HubL 

สร้างไฟล์ HTML + HubL ใหม่

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

3. ในกล่องโต้ตอบให้คลิกเมนูแบบเลื่อนลงวันนี้คุณต้องการสร้างอะไรและเลือก HTML + HubL

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

เพิ่ม HTML + HubL ลงในเทมเพลตของคุณ

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

เพิ่ม HTML + HubL

1. ป้อน HTML สำหรับเทมเพลต เรียนรู้เพิ่มเติมเกี่ยวกับการเพิ่มไฟล์ CSS และ JavaScript ลงในเทมเพลตรหัสที่กำหนดเอง 
2. หากต้องการแสดงวิธีที่ HTML + HubL จะแสดงผลให้สลับสวิตช์แสดงเอาต์พุตที่ด้านบนซ้าย แผงควบคุมจะเปิดทางด้านขวาพร้อมกับการแสดงตัวอย่างที่แสดงผล

เพิ่ม HTML + HubL ที่จำเป็น

เทมเพลตที่กำหนดเองต้องใช้ตัวแปร HTML หรือ HubL เฉพาะเพื่อทำงาน หากตัวแปรที่จำเป็นเหล่านี้ขาดหายไปข้อความแสดงข้อผิดพลาดอาจปรากฏขึ้นเมื่อคุณพยายามเผยแพร่เทมเพลต 

• เทมเพลตเพจและบล็อกต้องการตัวแปรต่อไปนี้:


{{standard_header_includes}}


{{site_settings.company_name}}
{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}
{{site_settings.company_country}}


{{unsubscribe_link}}
{{unsubscribe_link_all}}

• เทมเพลตอีเมลต้องใช้รหัสต่อไปนี้เพื่อแสดงข้อความตัวอย่างในไคลเอนต์อีเมลบางรายการ:



< div id =" preview_text "style =" display: none! important "> {% text" preview_text "label =" Preview Text < span class = help-text > นี่จะใช้เป็นข้อความตัวอย่างที่แสดงในอีเมลไคลเอนต์ ", value ="", no_wrapper = True %}


โคลนเทมเพลตไปยัง HTML

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

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

ดูตัวอย่างและเผยแพร่เทมเพลตของคุณ

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

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

• • ในข้อความแสดงข้อผิดพลาดที่ด้านบนของหน้าให้คลิกคอนโซลข้อผิดพลาดเพื่อเปิดคอนโซลด้านล่างตัวแก้ไขรหัส 
  • หรือไปที่ด้านล่างซ้ายของเครื่องมือแก้ไขรหัสแล้วคลิกแสดงรายละเอียด