Синтаксис шаблонов

Шаблоны HaskiMail используют простой, но мощный язык, называемый Mustachio. Mustachio имеет корни в Mustache, но включает несколько расширенных функций, которые делают его отличным для создания обычных текстовых и HTML-электронных писем.

Вот все, что нужно знать об этом языке.

Интерполяция переменных

«Интерполяция переменных» — это основа любого языка шаблонов.

Если у вас есть модель шаблона, как эта (представленная в JSON):
{
  person: {
    first_name: Andrew
  }
}
И этот шаблон:
Hello {{ person.first_name }}
HaskiMail сгенерирует следующий контент при комбинировании этих двух:
Hello Andrew
Если вы использовали Mustache. js, это должно быть вам знакомо. Но Mustachio имеет несколько дополнительных возможностей, которые делают создание шаблонов проще.

Области видимости

Иногда у нас есть более сложные модели, и поэтому ограничение области видимости для конкретного свойства делает разметку легче для восприятия:
Hello
Обратите внимание, что если мы строим часть шаблона, которая использует несколько свойств из «person», нам не нужно повторно писать «person.» перед каждой переменной.

Обработка коллекций

Предположим, у нас есть более сложная модель:
{
  company_name: ACME Rockets, Inc.,
  employees: [
    {
      name: Wile E. Coyote
    },
    {
      name: Road Runner
    }
  ]
}
И этот шаблон:
{{ company_name }} Employees:
<ul>

  <li>{{ name }}</li>

<ul>
HaskiMail сгенерирует следующий HTML:
ACME Rockets, Inc. Employees
<ul>
  <li>Wile E. Coyote</li>
  <li>Road Runner</li>
</ul>

Расширенная интерполяция

Если мы ограничили шаблон до свойства модели, возможно, мы захотим «подняться» к свойству в внешней области видимости. Например, давайте изменим контент из примера обработки коллекции выше, чтобы он выглядел так:
<ul>
  <li>Wile E. Coyote works for: ACME Rockets, Inc.</li>
  <li>Road Runner works for: ACME Rockets, Inc.</li>
</ul>
Мы можем использовать специальный синтаксис интерполяции, чтобы сделать это без необходимости повторять значения в нашей модели шаблона:
{{ company_name }} Employees:
<ul>

  <li>works for: </li>

</ul>
Обратите внимание на ./ в шаблоне, что означает «подняться на один уровень» в моей модели шаблона и искать следующее свойство. Вы можете подниматься на столько уровней в модели, сколько вам нужно, добавив ./ несколько раз в начале вашего блока {{ … }}.

Расширенная обработка значений

HaskiMail не обращает внимания на отсутствующие значения в моделях. Если вы обращаетесь к свойству, которого нет, HaskiMail пропустит этот блок. Таким образом, вы можете создавать шаблоны, которые не требуют логики if/else.

Чтобы продемонстрировать это, давайте используем следующую модель:
{
  company_name: ACME Rockets, Inc.,
  employees: [
    {
      name: Wile E. Coyote,
      position: Quality Assurance Tester
    },
    {
      name: Road Runner
    }
  ]
}
И обновим шаблон:
<ul>
  
    <li>
      works for: 
      as a {{.}}
    </li>
  
</ul>
Когда мы используем HaskiMail, мы получим следующий HTML:
<ul>
  <li>Wile E. Coyote works for: ACME Rockets, Inc. as a Quality Assurance Tester</li>
  <li>Road Runner works for: ACME Rockets, Inc.</li>
</ul>
Обратите внимание, что для Road Runner, у которого нет свойства «position», фраза «as a…» будет пропущена. Также обратите внимание, что мы можем использовать. в интерполяции переменных для ссылки на объект модели в ограниченном блоке.

Создание списка переменных в списке переменных

Предположим, вам нужно создать список элементов, каждый из которых включает подсписок элементов. Например, если вы продаете фрукты и овощи, вам нужно будет представить их в списке, а также перечислить доступные фрукты и овощи в вашем сообщении. Например, вы хотите показать:

На ужин у нас:

Фрукты!
  • Яблоки
  • Бананы
  • Апельсины
Овощи!
  • Брокколи
  • Огурцы

Ваш шаблон будет выглядеть так:
<body>
<strong>На ужин у нас:</strong>



<p>Фрукты!</p>

<ul>


<li></li>


</ul>





<p>Овощи!</p>

<ul>

<li></li>


</ul>



</body>
В модели шаблона вы можете передать следующее, чтобы два неупорядоченных списка появились:
{
fruits: {
fruitVariety: [
{
fruitVarietyType: apple
},
{
fruitVarietyType: banana
},
{
fruitVarietyType: orange
}
]
},
veggies: {
veggieVariety: [
{
veggieVarietyType: broccoli
},
{
veggieVarietyType: cucumbers
}
]
}
}

Инвертированные группы (или как сделать плейсхолдеры)

HaskiMail пропустит все в шаблоне, что ссылается на значение, которое равно null, false или пусто (например, массив, который не имеет элементов). Однако иногда полезно включить контент, когда значение отсутствует в модели, и HaskiMail поддерживает это с помощью «Инвертированных групп»:
<ul>

  <li>
    works for: 
    as a {{.}}
    since who knows when?
  </li>

</ul>
В приведенном выше примере, если years_employed не указано в модели шаблона, то будет отображено «since who knows when?».

Инвертированные группы — это мощный способ предоставить текст-заполнитель, когда информация недоступна или не применима.

Безопасность контента

Обычно информация, которую вы хотите включить в шаблон, будет простой скалярной, эти значения обычно не содержат HTML-разметки и безопасны для отображения в браузере. Однако если вы принимаете контент из ненадежных источников, который хотите внедрить, возможно, этот контент будет содержать небезопасные значения, которые могут привести к проблемам при отображении и обработке в браузере. Это известная атака типа «межсайтовое скриптование», и HaskiMail по умолчанию безопасен:

Предположим, что у нас есть эта модель:
{
user_submitted_content: <script>$.sendUserPasswordToUntrustedWebsite();</script>
}
И этот шаблон:
<div class=user_comment></div>
HaskiMail автоматически кодирует значения, которые он интерполирует в HTML, чтобы, хотя и создавая "неприятный" контент, вывод был безопасным:
<div class=user_comment><script>$.sendUserPasswordToUntrustedWebsite();</script></div>
Если вам нужно отказаться от этого поведения, HaskiMail предоставляет два синтаксиса для этого:
{{& user_submitted_content }}
Не забывайте, что отказ от экранирования контента создает риск безопасности, если вы будете отображать вывод шаблона в браузере.

Плейсхолдер контента Layout

Шаблоны позволяют делиться общими элементами, такими как CSS, хедеры и футеры. Внутри Layout, чтобы указать, где вставить шаблон в Layout, используйте плейсхолдер контента:
Когда вы предварительно просматриваете Layout, контент шаблона отображается как [Template @content goes here].

Чтобы увидеть, как шаблон будет выглядеть с Layout, перейдите в шаблон и выберите предварительный просмотр.

Ссылки для отписки

Каждое сообщение, отправленное через маркетинговый канал отправки HaskiMail, должно содержать ссылку для отписки. Если вы отправляете с шаблонами HaskiMail, вы можете добавить плейсхолдер для отписки с его HTML:
По умолчанию ссылка для отписки будет иметь текст «Отписаться». Чтобы изменить текст по умолчанию, обработайте плейсхолдер для отписки как гиперссылку:
<a href=>Отписаться от этого списка</a>
Ссылки для отписки, включенные в шаблоны, также будут работать для сообщений, отправленных через каналы отправки для транзакционных сообщений, хотя они не являются обязательными. Читайте наше руководство о том, как добавить ссылки для отписки в ваши шаблоны.

Связанные статьи

Не можете найти то, что ищете?

Спросите нас! Мы рады помочь вам с любой проблемой или вопросом.
Связаться с нами