**定制电子邮件模板** 电子邮件模板存储在各自的<module_dir>/view/<area>/email目录。例如，对于为销售模块新订单交易电子邮件模板位于 [/view/frontend/email/order_new.html](https://github.com/magento/magento2/blob/2.0/app/code/Magento/Sales/view/frontend/email/order_new.html). 我们强烈建议您不要更改默认Magento的文件。如果您想自定义默认模板，您应该创建自定义模板，并配置Magento的，而不是使用它们的默认模板。 您可以添加物理文件的自定义模板自定义主题，或使用Magento管理创建它们。这两种方法都在下面的章节中描述。 ### 用一个主题定制电子邮件模板 通过在您的自定义主题的新目录中创建模板，使用这种模式覆盖电子邮件模板：<theme_dir>/<ModuleVendorName>_<ModuleName>/email。例如，覆盖新订单电子邮件模板，在<theme_dir>/Magento_Sales/email目录中创建一个名为order_new.html模板。 模板后备支持电子邮件模板，让你的当前主题的父主题中搜索模板。 ###自定义使用Magento管理电子邮件模板 在Magento管理配置的任何模板优先于默认或基于主题的模板。 1.In the Magento Admin, navigate to **MARKETING** > Communications > **Email Templates** 2.Click **Add New Template.** 3.如果你想使用一个默认模板为起点，在加载默认模板部分，选择模板，然后单击加载模板。为在目前使用的字段中模板信息部分中的每个默认模板显示的配置设置的路径。请注意此路径的，因为你会需要它后，当您配置此新的模板中使用，而不是默认模板。  4.In **Template Name**, 输入一个名称来识别Magento管理的模板。 5.In **Template Subject**,添加为使用您创建模板发送的电子邮件的主题使用纯文本。该字段可以包含系统变量。 6.自定义模板内容。有关详细信息，请参阅定制内容的部分。 7.In **Template Styles**, 选择添加CSS样式的模板。这些样式是在电子邮件的标签里面添加。通常情况下，您将使用较少的文件，使风格的变化，以电子邮件，因为一些电子邮件客户端不支持样式标签。 8.Click **Save Template**. 9.现在，您已经创建了一个模板，必须配置模板使用： 1.如果你还没有这样做的话，请登录到Magento管理为管理员。 2.Click **STORES** > **Settings** > Configuration > **SALES** > **Sales** Emails. 3.在左窗格中，找到包含要覆盖的模板部分。这是目前在您的新模板用于引用C**urrently Used For**的部分。 （参见步骤3在本节前面。） 例如，如果您创建了一个“新秩序”的模板，配置部分作为顺序如下图所示。  4.从列表中选择您的新创建的模板。 5.Click **Save Config.** *自定义页眉和页脚模板* 每个前端电子邮件模板包括使用这两个指令页眉和页脚模板：{{template config_path="design/email/header_template"}} and {{template config_path="design/email/footer_template"}} 默认情况下，这两个指令加载从这些文件的内容： * /view/frontend/email/header.html</a> * /view/frontend/email/footer.html</a> 您可以使用该主题或前面讨论的管理员自定义方法，自定义页眉和页脚模板。 *自定义电子邮件内容* 到店和销售的相关信息添加到模板，使用系统变量。 系统变量是由特定的值替换产生实际的电子邮件时占位符。例如，{{VAR store_hours}}变量通过在**STORES > Settings > Configuration > GENERAL > General > Emails section**. 您还可以创建自己的自定义变量，并将其值设置在**SYSTEM > Custom Variables.** 一个变量添加到您的模板： 1.在Magento管理，**MARKETING > Communications > Email Templates** 2.创建一个新的模板或编辑现有的模板。 3.点击将光标放在文本中插入的变量。 4.单击 **Insert Variable.**插入变量。包含的变量列表弹出打开，包括自定义变量。而在模板变量部分变量是特定于您正在编辑的模板存储联系信息的变量在所有电子邮件模板可用。下图显示了一个例子：  5.单击所需变量的名称。 可变代码插入模板的内容。 可用变量的选择取决于你作为基础使用的模板。在特定的模板变量中包含在文件系统上的每个模板顶部评论。 （例如，看一下app/code/Magento/Customer/view/frontend/email/account_new.html **样式电子邮件模板** 某些电子邮件客户端（如Gmail）只支持已应用作为HTML标签的样式属性“内联”样式的CSS样式。由于这个原因，大多数电子邮件样式被应用作为内嵌样式。内联样式是由Emogrifier库，它接受HTML和CSS，并添加所有的CSS样式的HTML标签的样式属性提供。 ### 内嵌样式 该<Magento_Email_module_dir>/view/frontend/email/header.html文件包含inlinecss指令： ~~~ {{inlinecss file="css/email-inline.css"}} ~~~ 该inlinecss指令告诉Magento的哪些文件上的电子邮件应用模板的内嵌样式。 例如，假设一个电子邮件是从与Magento的亮度主题配置的存储发送。该inlinecss指令首先查找在<Magento_Luma_theme_dir>/web/css/email-inline.less.一个电子邮件inline.less文件。但是，由于该文件不存在，它会回落到<Magento_Blank_theme_dir>/web/css/email-inline.less 文件。该文件的内容将被编译，其内容应用为内嵌样式的电子邮件模板。 请参阅Emogrifier自述，看看有什么CSS选择器的支持。 ### 非内嵌样式 对于电子邮件的非内嵌样式来自全局和特定模板的样式，在下面的章节中描述。 ### 全局非内嵌样式 虽然大部分款式应采用内嵌，也有不能联机施加一定的CSS样式，如媒体查询或：hover伪样式。 这些样式必须在 <style type="text/css"></style>标签中 该<Magento_Email_module_dir>/view/frontend/email/header.html文件包含一个标签内的CSS指令： ~~~ <style type="text/css"> {{var template_styles|raw}} {{css file="css/email.css"}} </style> ~~~ 这个CSS指令编译提供文件的内容，并输出它。 如，假设一个电子邮件是从与Magento的亮度主题配置的存储发送。 CSS的指令首先会在<Magento_Luma_theme_dir>/web/css的email.less文件。但是，因为该文件不存在那里，它回落到<Magento_Blank_theme_dir>/web/css/email.less该文件的内容被编译并在标签的内容的输出。 该文件的内容被编译并在标签<style>输出。 ### 具体的模板非内联样式 正如前面一节提到的文件了header.html输出{{VAR template_styles |raw}}变量。 该变量的值来自以下任何一项： 您在下面的例子中添加任何HTML电子邮件模板注释块里面，像任何风格，都包含在变量template_styles： ~~~ <!--@styles .example-style { color: green; } @--> ~~~ 如果您自定义使用Magento管理事务的​​电子邮件，您可以添加CSS样式模板样式领域包括在template_styles变量这些样式。 **对于电子邮件的方式被分成几个不同的文件。** ~~~ <Magento_Blank_theme_dir>/web/css/email.less 要包括在标签进口必要的文件，然后输出样式 <Magento_Blank_theme_dir>/web/css/email-fonts.less 包含自定义字体@字体面声明。此文件是通过使用@import规则_EMAIL-extend.less文件导入。 <Magento_Blank_theme_dir>/web/css/email-inline.less 进口必要的文件，然后输出样式内联 <Magento_Blank_theme_dir>/web/css/source/_email-base.less 包含大多数款式的电子邮件，包括复位，布局，版式，等等。查看这个文件的顶部，以了解该文件中的样式的email.less和电子邮件inline.less文件之间被拆分的意见。 <Magento_Blank_theme_dir>/web/css/source/_email-extend.less 该_EMAIL-base.less文件使用从Magento的UI库一个数字混入。如果您想通过这些混入改变任何样式的输出，你可以设置任何这些混入使用此文件中的变量的值。例如见用法/web/css/source/_email-variables.less文件。 <Magento_Blank_theme_dir>/<Namespace>_<Module>/web/css/source/_email.less 样式是特定于模块存储在这些文件。这种机制也允许第三方扩展至包括将获得包括内联/非内联输出风格。 lib/web/css/source/_email-variables.less Same as <Magento_Blank_theme_dir>/web/css/source/_email-variables.less lib/web/css/source/lib/variables/_email.less 包含新的特定电子邮件的变量，可以在一个特定的主题_EMAIL-variables.less文件被覆盖 ~~~ 当实现一个自定义主题，你应该能够复制的＆lt完全自定义电子邮件模板; Magento_Blank_theme_dir&lt;Magento_Blank_theme_dir&gt;/web/css/source/_email-extend.less and &lt;Magento_Blank_theme_dir&gt;/web/css/source/_email-variables.less 到您的自定义主题和编辑这些文件。 **自定义字体** 电子邮件继承由前端主题定义的自定义字体。 Magento的空白主题使用Open Sans字体。由于Open Sans不是一个标准的系统字体，使用的@ font-face规则，包括Web字体。 下面是对电子邮件的字体结构是如何工作的概述： <Magento_Blank_theme_dir>/web/css/source/_email-extend.less包含请求电子邮件fonts.css文件@import指令。 电子邮件fonts.css的内容被使用@import装入而不是被直接输出到在一个电子邮件的一个标签的原因是，如果用户正在阅读他们的电子邮件离线，一些电子邮件客户端不呈现文本，因为网页字体无法加载。 该<Magento_Blank_theme_dir>/web/css/email-fonts.less文件导入source/_variables.less和source/_typography.less 文件： app/design/frontend/Magento/blank/web/css/source/_variables.less defines which font is used in the @font-family-name__base variable. app/design/frontend/Magento/blank/web/css/source/_typography.less generates the @font-face rules which import the custom fonts. 如果要更改用于电子邮件的字体，请执行以下操作： 1.请参阅文档使用的字体有关如何添加一个新的详细。 2.您添加了一个新的字体，并已更新了source/_variables.less and source/_typography.less文件自定义主题，以引用新的字体之后，电子邮件会自动使用指定的字体。 **电子邮件logo** 你可以将它添加到你的主题，或在Ma​​gento管理上传添加一个标志电子邮件。 由于电子邮件客户端不支持基于矢量的格式，如可伸缩矢量图形（SVG），你必须准备一个可移植网络图形（PNG）标志。因为电子邮件是在设备与广泛的像素密度看，你应该使用一个标志是3×，你实际上希望它显示的大小。例如，假设您的电子邮件有标志一个200像素×100像素的区域。标志形象应该是600px的×300像素。 如果您没有访问到您的标志的高分辨率版本，您可以上传一个普通分辨率的图像。例如，如果你的标志图像的200像素×100像素，200指定的宽度和100的高度。 ### 使用主题自定义邮件logo 要使用主题定制您的logo: 1.添加一个名为logo_email.png到Magento_Email/web目录中的自定义主题文件。 例如，如果OrangeCo供应商希望增加一个标志为他们定制橙色，他们必须在app/design/frontend/OrangeCo/orange/Magento_Email/web目录添加文件。 2.把<Magento_Email_module_dir>/view/frontend/email/header.html文件复制到你的主题Magento_Email/email目录。 例如，OrangeCo厂商将文件复制到该位置 ：app/design/frontend/OrangeCo/orange/Magento_Email/email/header.html 编辑标签的宽度和高度的属性，以反映在您希望您的标志，显示区域（例如，200×100）。 例： ~~~ {{if logo_width}} width="{{var logo_width}}" {{else}} width="200" {{/if}} {{if logo_height}} height="{{var logo_height}}" {{else}} height="100" {{/if}} ~~~ 你应该离开的if / else条件语句到位的情况下，你想使用管理来覆盖这些值。 **自定义使用ADMIN更改电子邮件logo** 1.In the Magento Admin, navigate to **STORES > Settings > Configuration > GENERAL > Design > Emails** 2.在Scope 范围下拉列表中，选择您要设置一个标识（某商店视图，整个网站，或默认配置）的范围。 3.上传您的徽标，并指定替代文字它  4.Enter values for Logo Width and Logo Height. Based on the preceding example, you would enter **200 and 100**, respectively. 5.Click the **Save Config** button. **使用电子邮件中的联系人信息** 电子邮件可以，如果这些值在管理配置的输出你的店名，店面电子邮件地址，存储电话号码和营业时间操作。 要设置这些值： 1.要设置商店名称，电话号码和工作时间： a In the Magento Admin, navigate to** STORES > Settings > Configuration > GENERAL > General > Emails** b.Input values into the Store Name, **Store Phone Number, and Store Hours** of Operation fields. c.Note: The Store Phone Number and **Store Hours of Operation** fields are optional. d.Click the **Save Config** button. 2.要设置存储电子邮件： a.In the Magento Admin, navigate to **STORES > Settings > Configuration > GENERAL > General > Store Email Addresses > General Contact** b.Input values into the **Sender Name and Sender Email **fields. c.Click the **Save Config** button. 销售电子邮件被配置为显示所有上述值的，如果他们在管理正在配置。如果您希望将这些值添加到其他电子邮件模板，可以使用以下变量： ~~~ {{var store.getFrontendName()}} {{var store_email}} {{var store_phone}} {{var store_hours}} ~~~ **本土化** 为了支持内容的翻译，电子邮件中的所有字符串使用跨指令输出。例： ~~~ {{trans "Thank you for your order from %store_name." store_name=$store.getFrontendName()}} {{trans "Once your package ships we will send you a tracking number."}} ~~~ trans指令将字符串转换成任何语言环境配置为从被发送的电子邮件存储。例如，如果邮件是从被配置为使用fr_FR区域设置商店查看已发送，这些电子邮件被翻译成了法文。 请注意，变量赋值不能包含空格。 正确： ~~~ {{trans "Thank you for your order from %store_name." store_name=$store.getFrontendName()}} ~~~ 不正确： ~~~ {{trans "Thank you for your order from %store_name." store_name = $store.getFrontendName()}} ~~~ 例外：参数值可以包含空格，如果它放在括号中。 支持的电子邮件客户端和设备 我们用真实的设备和石蕊的组合测试响应电子邮件。由于电子邮件客户端中支持现代网络技术大大不同的层次，不是所有的电子邮件客户端提供的电子邮件完美。然而，以下所有客户应呈现的方式，使他们能够无明显问题被轻易读取电子邮件。 ~~~ Supported Desktop Clients Apple Mail 7 (OS X 10.9) Apple Mail 8 (OS X 10.10) Outlook 2003 (Windows 7) Outlook 2007 (Windows 7) Outlook 2010 (Windows 7) Outlook 2013 (Windows 7) Outlook 2016 (OS X 10.10) Supported Mobile Clients Native email app (Android 2.3) Native email app (Android 4.2) Gmail app (Android 4.2) Native email app (Blackberry 5 OS) iOS 7 (iPhone 5s) iOS 8 (iPad Retina) iOS 8 (iPad Mini) iOS 8 (iPhone 6) iOS 8 (iPhone 6 Plus) Windows Phone 8 Supported Web Clients (tested in combination of Firefox, Chrome, and Internet Explorer) AOL Mail Gmail Office 365 Outlook.com Yahoo! Mail ~~~ **通讯模板** 本文的重点是交易电子邮件，但同样的技术可以与通讯模板使用为好，其中包括： * 使用导入页眉和页脚：{{template config_path="design/email/header_template"}} and {{template config_path="design/email/footer_template"}} * 使用应用内嵌样式 ：{{inlinecss file="css/email-inline.css"}} * 包括使用非内嵌样式 ：{{css file="css/email.css"}}