แม่แบบอีเมลแบบไดนามิก

แม่แบบอีเมลแบบไดนามิกของ Engagelab รองรับภาษาแม่แบบ Handlebars เพื่อแสดงเนื้อหาเฉพาะบุคคลที่ส่งผ่าน API

การแทนที่ตัวแปร

การแทนที่พื้นฐาน

ตัวอย่างแม่แบบ

<p>Hello {{firstname}}</p>
              
              <p>Hello {{firstname}}</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

{ "firstName": "Engagelab" }
              
              { "firstName": "Engagelab" }

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<p>Hello Engagelab</p>
              
              <p>Hello Engagelab</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

ตัวอย่างแม่แบบ

<p>Hello {{user.profile.firstName}}</p>
              
              <p>Hello {{user.profile.firstName}}</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

{ "user": { "profile": { "firstName": "Engagelab" } } }
              
              {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<p>Hello Engagelab</p>
              
              <p>Hello Engagelab</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

formatDate

formatDate รองรับ Unix timestamps หรือเวลาที่จัดรูปแบบ ISO8601 และแปลงเป็นรูปแบบที่คุณระบุโดยใช้ตัวแทนในตารางด้านล่าง โดยใช้เวลา UTC 1987-09-20T20:55:00.000Z เป็นตัวอย่าง ผลลัพธ์การแปลงจะแสดงในตาราง:

ตัวแทน ผลลัพธ์
YYYY 1987
YY 87
MMMM September
MMM Sep
MM 09
M 9
DD 20
D 20
dddd Sunday
ddd Sun
hh 08
h 8
HH 20
H 20
mm 55
m 55
ss 00
s 0
A PM
ZZ +0000
Z +00:00

ผลลัพธ์

<p>{{formatDate timeStamp dateFormat}}</p> <!-- ตัวอย่างการชดเชยเขตเวลา --> <p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>
              
              <p>{{formatDate timeStamp dateFormat}}</p>
<!-- ตัวอย่างการชดเชยเขตเวลา -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

{ "timeStamp": "1987-09-20T12:55:00.000Z", "dateFormat": "YYYY-MM-DD HH:mm:ss A", "timezoneOffset": "+0800" }
              
              {
  "timeStamp": "1987-09-20T12:55:00.000Z",
  "dateFormat": "YYYY-MM-DD HH:mm:ss A",
  "timezoneOffset": "+0800"
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<!-- ผลลัพธ์ที่แสดง (แม่แบบ 1) --> <p>1987-09-20 12:55:00 PM</p> <!-- ผลลัพธ์ที่แสดง (แม่แบบ 2) --> <p>1987-09-20 20:55:00 PM</p>
              
              <!-- ผลลัพธ์ที่แสดง (แม่แบบ 1) -->
<p>1987-09-20 12:55:00 PM</p>

<!-- ผลลัพธ์ที่แสดง (แม่แบบ 2) -->
<p>1987-09-20 20:55:00 PM</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

Insert

ผลลัพธ์ที่แสดง (แม่แบบ 2)

<p>Thank you for contacting us about {{insert businessName "your business"}}.</p>
              
              <p>Thank you for contacting us about {{insert businessName "your business"}}.</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

// ข้อมูลทดสอบ 1 {} // ข้อมูลทดสอบ 2 { "businessName": "Engagelab" }
              
              // ข้อมูลทดสอบ 1
{}

// ข้อมูลทดสอบ 2
{
    "businessName": "Engagelab"
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<!-- ผลลัพธ์ที่แสดง 1 --> <p>Hello Ben! Thank you for contacting us about your business.</p> <!-- ผลลัพธ์ที่แสดง 2 --> <p>Hello Customer! Thank you for contacting us about Engagelab.</p>
              
              <!-- ผลลัพธ์ที่แสดง 1 -->
<p>Hello Ben! Thank you for contacting us about your business.</p>

<!-- ผลลัพธ์ที่แสดง 2 -->
<p>Hello Customer! Thank you for contacting us about Engagelab.</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

คำสั่งเงื่อนไข

If, Else, Else If

ตัวอย่างแม่แบบ

{{#if user.profile.isTeacher}} <p>Hello, Teacher {{user.profile.firstName}}</p> {{else if user.profile.isStudent}} <p>Hello, Student {{user.profile.firstName}}</p> {{else}} <p>Hello, {{user.profile.firstName}}! Welcome.</p> {{/if}}
              
              {{#if user.profile.isTeacher}}
   <p>Hello, Teacher {{user.profile.firstName}}</p>
{{else if user.profile.isStudent}}
   <p>Hello, Student {{user.profile.firstName}}</p>
{{else}}
   <p>Hello, {{user.profile.firstName}}! Welcome.</p>
{{/if}}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

// ข้อมูลทดสอบ 1 { "user": { "profile": { "firstName": "Zhang San", "isTeacher": true } } } // ข้อมูลทดสอบ 2 { "user": { "profile": { "firstName": "Li Si", "isStudent": true } } } // ข้อมูลทดสอบ 3 { "user": { "profile": { "firstName": "Wang Wu", } } }
              
              // ข้อมูลทดสอบ 1
{
    "user": {
        "profile": {
            "firstName": "Zhang San",
            "isTeacher": true
        }
    }
}

// ข้อมูลทดสอบ 2
{
    "user": {
        "profile": {
            "firstName": "Li Si",
            "isStudent": true
        }
    }
}

// ข้อมูลทดสอบ 3
{
    "user": {
        "profile": {
            "firstName": "Wang Wu",
        }
    }
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<!-- ผลลัพธ์ที่แสดง (ข้อมูลทดสอบ 1) --> <p>Hello, Teacher Zhang San</p> <!-- ผลลัพธ์ที่แสดง (ข้อมูลทดสอบ 2) --> <p>Hello, Student Li Si</p> <!-- ผลลัพธ์ที่แสดง (ข้อมูลทดสอบ 3) --> <p>Hello, Wang Wu! Welcome.</p>
              
              <!-- ผลลัพธ์ที่แสดง (ข้อมูลทดสอบ 1)  -->
<p>Hello, Teacher Zhang San</p>

<!-- ผลลัพธ์ที่แสดง (ข้อมูลทดสอบ 2)  -->
<p>Hello, Student Li Si</p>

<!-- ผลลัพธ์ที่แสดง (ข้อมูลทดสอบ 3)  -->
<p>Hello, Wang Wu! Welcome.</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

Unless

ตัวอย่างแม่แบบ

{{#unless license}} <p class="warning">WARNING: This entry does not have a license!</p> {{/unless}}
              
              {{#unless license}}
    <p class="warning">WARNING: This entry does not have a license!</p>
{{/unless}}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

{}
              
              {}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<!-- ผลลัพธ์ที่แสดง --> <p class="warning">WARNING: This entry does not have a license!</p>
              
              <!-- ผลลัพธ์ที่แสดง -->
<p class="warning">WARNING: This entry does not have a license!</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

ตัวดำเนินการเปรียบเทียบรองรับสองวิธีการใช้งาน: พื้นฐาน และ พร้อม else.

ไวยากรณ์ที่รองรับแสดงในตารางด้านล่าง:

นิพจน์ คำอธิบาย
greaterThan >
lessThan <
equals =
greaterThanOrEquals >=
lessThanOrEquals <=
notEquals !=

พื้นฐาน

ตัวอย่างแม่แบบ

<p> {{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{/greaterThan}} </p>
              
              <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{/greaterThan}}
</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

{ "truckWeight": 6, "limitWeight": 5 }
              
              {
    "truckWeight": 6,
    "limitWeight": 5
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<p> The truck is not allowed to pass. </p>
              
              <p> 
The truck is not allowed to pass.
</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

พร้อม Else

ตัวอย่างแม่แบบ

<p> {{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{else}} The truck is allowed to pass. {{/greaterThan}} </p>
              
              <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{else}}
The truck is allowed to pass.
{{/greaterThan}}
</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ตัวอย่างแม่แบบ

{ "truckWeight": 5, "limitWeight": 5 }
              
              {
    "truckWeight": 5,
    "limitWeight": 5
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<p> The truck is allowed to pass. </p>
              
              <p> 
The truck is allowed to pass.
</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

in, notIn

เหมือนกับตัวดำเนินการเปรียบเทียบ รองรับสองวิธีการใช้งาน: พื้นฐาน และ พร้อม else

ตัวอย่างแม่แบบ

<p> {{#in fruit favoriteFruits}} Like to eat. {{else}} Do not like to eat. {{/in}} </p>
              
              <p>
{{#in fruit favoriteFruits}}
Like to eat.
{{else}}
Do not like to eat.
{{/in}}
</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

// ข้อมูลทดสอบ 1 { "fruit": "Apple", "favoriteFruits": [ "Apple", "Banana", "Orange" ] } // ข้อมูลทดสอบ 2 { "fruit": "Grape", "favoriteFruits": [ "Apple", "Banana", "Orange" ] }
              
              // ข้อมูลทดสอบ 1
{
    "fruit": "Apple",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

// ข้อมูลทดสอบ 2
{
    "fruit": "Grape",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<!-- ผลลัพธ์ที่แสดง 1 --> <p> Like to eat. </p> <!-- ผลลัพธ์ที่แสดง 2 --> <p> Do not like to eat. </p>
              
              <!-- ผลลัพธ์ที่แสดง 1 -->
<p>
Like to eat.
</p>

<!-- ผลลัพธ์ที่แสดง 2 -->
<p>
Do not like to eat.
</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

การวนซ้ำ

ลูป (Each)

ตัวอย่างแม่แบบ

<ul> {{#each fruits}} <li>{{this}}</li> {{/each}} </ul>
              
              <ul>
{{#each fruits}}
    <li>{{this}}</li>
{{/each}}
</ul>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ข้อมูลทดสอบ

{ "fruits": [ "Apple", "Banana", "Orange" ] }
              
              {
    "fruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
              
              <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

หมายเหตุเพิ่มเติม

เมื่อใช้ each เพื่อวนซ้ำอาร์เรย์ คุณสามารถใช้ {{@index}} เพื่ออ้างอิงดัชนีการวนซ้ำปัจจุบัน

{{#each array}} {{@index}}: {{this}} {{/each}}
              
              {{#each array}} {{@index}}: {{this}} {{/each}}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

นอกจากนี้ สำหรับการวนซ้ำวัตถุ {{@key}} อ้างอิงชื่อคีย์ปัจจุบัน

{{#each object}} {{@key}}: {{this}} {{/each}}
              
              {{#each object}} {{@key}}: {{this}} {{/each}}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

อ้างอิงชื่อคีย์ปัจจุบัน

ตัวอย่างแม่แบบ

{{#with user.profile}} <p>Hello {{firstName}}</p> {{/with}}
              
              {{#with user.profile}}
<p>Hello {{firstName}}</p>
{{/with}}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ตัวอย่างแม่แบบ

{ "user": { "profile": { "firstName": "Engagelab" } } }
              
              {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ผลลัพธ์ที่แสดง

<p>Hello Engagelab</p>
              
              <p>Hello Engagelab</p>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย
icon
ติดต่อฝ่ายขาย