定制電子郵件模板 · magento 2.0開發手冊

**定制電子郵件模板** 電子郵件模板存儲在各自的<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.如果你想使用一個默認模板為起點，在加載默認模板部分，選擇模板，然后單擊加載模板。為在目前使用的字段中模板信息部分中的每個默認模板顯示的配置設置的路徑。請注意此路徑的，因為你會需要它后，當您配置此新的模板中使用，而不是默認模板。 ![](https://box.kancloud.cn/2016-03-08_56de83d3eb922.png) 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在本節前面。）例如，如果您創建了一個“新秩序”的模板，配置部分作為順序如下圖所示。 ![](https://box.kancloud.cn/2016-03-08_56de83d4253ac.png) 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.**插入變量。包含的變量列表彈出打開，包括自定義變量。而在模板變量部分變量是特定于您正在編輯的模板存儲聯系信息的變量在所有電子郵件模板可用。下圖顯示了一個例子： ![](https://box.kancloud.cn/2016-03-08_56de83d442447.png) 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： ~~~  ~~~ 如果您自定義使用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<Magento_Blank_theme_dir>/web/css/source/_email-extend.less and <Magento_Blank_theme_dir>/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.上傳您的徽標，并指定替代文字它 ![](https://box.kancloud.cn/2016-03-08_56de83d461aca.png) 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"}}