hampe / zurb-ink-bundle
2.2.6
2018-02-05 18:33 UTC
Requires
- php: ^5.3.2 || ^7.0
- hampe/inky: ^1.3.6
- symfony/framework-bundle: ^2.0 || ^3.0 || ^4.0
- tijsverkoyen/css-to-inline-styles: ^1.0
- twig/twig: ^1.23 || ^2.0
README
问题报告和拉取请求将不予处理。似乎有一个 活跃 的分支。你可能想使用 这个。
ZurbInkBundle (Foundation for Emails 2)
创建电子邮件模板很困难。此Symfony Bundle提供一些帮助
- Foundation for Emails 2 集成,用于创建出色且响应式的电子邮件。查看他们的 文档。
- 使用正常的CSS文件进行样式设计,通过
{{ zurb_ink_styles.add("@YourBundle/Resources/public/css/styles.css") }}
添加它们。 - 通过
{% ìnlinestyle %}
标签自动内联样式(由 Tijs Verkoyen的CssToInlineStyles 提供)。 - 通过
{{ includeStyles(zurb_ink_styles) }}
将CSS规则也导入html head。 - 2.0 新特性: 通过
{% inky %}
标签支持 Inky 模板(由 https://github.com/thampe/inky 提供)
安装
您可以使用composer安装此bundle
composer require hampe/zurb-ink-bundle
或直接将包添加到您的 composer.json
文件中。
现在需要PHP 5.4。请确保您的composer.json没有将平台设置为php 5.3.*
"config": {
"bin-dir": "bin",
"platform": {
"php": "5.4.0"
}
},
安装完包后,您只需将bundle添加到您的 AppKernel.php 文件中
// in AppKernel::registerBundles()
$bundles = array(
// ...
new Hampe\Bundle\ZurbInkBundle\HampeZurbInkBundle(),
// ...
);
使用
选项A:扩展base.html.twig
如果您想使用zurb ink框架,扩展 HampeZurbInkBundle::base.html.twig
。
{% extends 'HampeZurbInkBundle: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 'HampeZurbInkBundle::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许可)。