stafox / zurb-ink-bundle
创建电子邮件模板很困难。此捆绑包提供帮助。
3.0.0
2017-12-06 21:33 UTC
Requires
- php: ^7.0
- hampe/inky: ^1.3.6
- symfony/framework-bundle: ^2.0 || ^3.0
- twig/twig: ^2.0
- voku/css-to-inline-styles: 2.0.0
This package is auto-updated.
Last update: 2024-09-29 04:49:32 UTC
README
警告:这是一个对 "https://github.com/thampe/ZurbInkBundle" 的扩展分支
ZurbInkBundle (电子邮件2的Foundation)
创建电子邮件模板很困难。此Symfony Bundle提供一些帮助
- 电子邮件2的Foundation 集成,用于创建出色且响应式的电子邮件。查看他们的 文档。
- 使用正常的CSS文件进行样式设置,通过
{{ zurb_ink_styles.add("@YourBundle/Resources/public/css/styles.css") }}
添加它们。 - 通过
{% ìnlinestyle %}
标签自动内联样式(由 voku 的 Tijs Verkoyen 的 CssToInlineStyles 分支 提供支持)。 - 通过
{{ includeStyles(zurb_ink_styles) }}
在html head中导入CSS规则 - 2.0中的新功能: 通过
{% inky %}
标签提供 Inky 模板支持(由 https://github.com/thampe/inky 提供支持)
安装
您可以使用composer安装此捆绑包
composer require stafox/zurb-ink-bundle
或将包直接添加到您的 composer.json
文件中。
现在需要PHP 7.0。确保您的composer.json没有将平台设置为 < 7.0
的php
"config": {
"bin-dir": "bin",
"platform": {
"php": "7.0"
}
},
安装包后,您只需将捆绑包添加到您的 AppKernel.php 文件中
// in AppKernel::registerBundles()
$bundles = array(
// ...
new Stafox\ZurbInkBundle\StafoxZurbInkBundle(),
// ...
);
使用
选项A:扩展基础.html.twig
如果您想使用zurb ink框架,则扩展 StafoxZurbInkBundle::base.html.twig
。
{% extends 'StafoxZurbInkBundle:FoundationForEmails:2/base.html.twig' %}
{% block preHtml %}
{# add your css files here, please use a bundle relative path #}
{{ zurb_ink_styles.add("@YourBundle/Resources/public/css/style1.css") }}
{{ zurb_ink_styles.add("@YourBundle/Resources/public/css/style2.css") }}
...
{% endblock %}
{% block content %}
{# html #}
{% endblock %}
{% extends 'StafoxZurbInkBundle::base.html.twig' %}
注意: 如果您希望在HTML文档的 <head>
中不包含CSS样式,可以覆盖 headStyles
-Block: {% block headStyles %}{% endblock %}
。请注意,一些CSS规则无法使用内联样式实现,例如 :hover
状态或 @media
查询(两者都由ZURB Ink框架使用)!
选项B:从头开始编写自己的模板
{% spaceless %}
{# add your styles before the inlinestyle tag #}
{{ zurb_ink_styles.add("@YourBUndle/Resources/public/css/style.css") }}
{% inlinestyle %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
{% block headStyles %}
<style type="text/css">
{% autoescape false %}
{{ includeStyles(zurb_ink_styles) }}
{% endautoescape %}
</style>
{% endblock %}
</head>
{% inky %} {# inky-tag for inky-template support #}
<body>
{% block body %}
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{% block content %}
{% endblock %}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
{% endblock %}
</body>
{% endinky %}
</html>
{% endinlinestyle %}
{% endspaceless %}
许可
有关许可信息,请参阅 LICENSE 文件(它是MIT许可)。