日記

カナダのIT系企業でのCo-op体験談 第15週目 今週もHTML Emailのデザインしました

今回はバックエンド側からcontextを持ってきてvariablesを渡してあげるところも含めてメールのデザインをしました。

tableタグが多分に含まれてるのでリファクタリング時にThymeleaf Layout Dialectを使用しました。

例えば

<tr>
    <td align="left" bgcolor="#ffffff"
        style="padding: 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">
        コンテンツ
    </td>
</tr>

みたいなのを複数回使用するときは

<tr layout:fragment="copy">
    <td align="left" bgcolor="#ffffff"
        style="padding: 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">
        <th:block layout:fragment="content" />
    </td>
</tr>

でフラグメントを作って呼び出し側で

                <tr layout:replace="layout/email/copy :: final-copy">
                    <th:block layout:fragment="content">
                        <p style="margin: 0;">Cheers,</p>
                        <p style="margin: 0;">PokemonHub</p>
                    </th:block>
                </tr>

とすると

<tr layout:fragment="copy">
    <td align="left" bgcolor="#ffffff"
        style="padding: 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">
        <p style="margin: 0;">Cheers,</p>
                        <p style="margin: 0;">PokemonHub</p>
    </td>
</tr>

が生成されるので再利用できます。