2019年8月5日 星期一

MJML完整語法說明

MJML是一套由電子報服務商MailJet貢獻出來的開源框架，能用簡單的語法輕鬆撰寫響應式(RWD)的電子郵件內容，再透過免費開源的轉檔程式或線上編輯器，產生最終的標準HTML程式碼。

上一篇稍微針對其版面布局結構做了一點簡介，這篇就完整照著官網技術文件的內容（2019年8月5日版本），針對語法部分逐項翻譯如下。



基底元件

MJML郵件 (mjml)

MJML文件必須開頭就是<mjml>標籤，並且它裡面只能包含一個mj-head及一個mj-body標籤（這兩個作用與HTML文件內的head與body標籤相同）。
屬性 單位 簡述 預設值
owa string 若設為desktop，則Outlook中會強制顯示為桌面版，否則會顯示為行動版。因為Outlook會忽略media query設定。 無
lang string 會被用作<html lang="">屬性 無

頭部 (mj-head)

用來收容頭部元件，主要是關於樣式(style)或meta等設定。詳見「頭部文件」章節。

身部 (mj-body)

由此開始是實際的信件內容。mj-body現已一舉取代了MJML v3中的mj-body與mj-container兩個元件。
屬性 單位 簡述 預設值
background-color color formats 通用背景顏色 n/a
css-class string class名稱，會被加入到生成的HTML根元素中 n/a
width px 信件的寬度 600px

引入 (mj-include)

  • 引入位於外部的mjml檔案以建立信件樣板。
  • 可以把外部的mjml檔包裹在預設的mjml > mj-body標籤中，這樣會較易於從主樣板之外預覽。接著MJML引擎會替換引入的檔案再進行頁面渲染。
  • 外部檔案必須是以.mjml為副檔名。

頭部元件

標準頭部元件可便於匯入字型、定義預設樣式、或為MJML元件建立類型(class)。

屬性 (mj-attributes)

  • 此標籤可針對某個mj-標籤變更其預設屬性，以及新增mj-class。
  • 使用mj-all可對MJML文件內的所有元件指派預設屬性。
  • 屬性被套用的順序是：inline屬性＞class＞預設的mj-attributes＞defaultMJMLDefinition

斷點 (mj-breakpoint)

此標籤可指定切換桌面版/手機版的尺寸斷點。
屬性 單位 簡述 預設值
width px 斷點的值 n/a

字型 (mj-font)

此標籤可匯入字型。
屬性 單位 簡述 預設值
href string 網路字型的url n/a
name string 字型名稱 n/a

信件預覽文字 (mj-preview)

  • 此標籤可指定郵件閱讀器中的信件預覽文字。
  • 此標籤不支援任何屬性。

樣式 (mj-style)

此標籤可設置CSS樣式，來套用到MJML文件中的HTML程式碼、以及輸出後的HTML程式碼。在產生的HTML中，這些CSS樣式將會被加到head段落中，也可使用inline="inline"屬性來改採行內的樣式設定方式。
屬性 單位 簡述 預設值
inline string 設定為"inline"以採用行內樣式 n/a
  • 一個MJML元素會生成很多個HTML元素。為了增加彈性，css-class會被套用到最多的外層HTML元素。所以若想要藉由CSS選擇器(selector)來指涉特定的子元素，可能需要實際查看生成後的HTML來確認正確的CSS選擇器。

頁面標題 (mj-title)

此標籤可設置MJML文件的頁面標題（在用於信件寄送時似乎意義不大？）。

身部元件

MJML自帶許多套標準元件，讓使用者可以輕鬆打造信件版型，而無須重複發明輪子。

手風琴 (mj-accordion)

  • mj-accordion是具有互動效果的MJML元件，可將內容折疊到拉環(tab)中。收合時使用者只看到標題，點擊拉環後則會把內容展開。在空間有限的行動裝置中，可提供很好的體驗。在無法支援響應式效果的環境（通常是某些桌面端軟體）則會預設全部展開因此可以閱讀到所有內容。
  • 所有在mj-accordion標籤內的屬性都會被套用到mj-accordion-element，除非已在mj-accordion-element中覆寫了該屬性的值。
屬性 單位 簡述 預設值
border n/a 邊框 n/a
container-background-color n/a 儲存格的背景顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
font-family n/a 字型 Ubuntu, Helvetica, Arial, sans-serif
icon-align n/a 圖示(icon)對齊方式 middle
icon-height px 圖示(icon)高度 32px
icon-position n/a 圖示(icon)顯示在左(left)或右(right) right
icon-unwrapped-alt n/a 展開狀態時，圖示(icon)的替代文字 -(減號)
icon-unwrapped-url n/a 展開狀態時，圖示(icon)的圖檔位址 http://i.imgur.com/w4uTygT.png
icon-width px 圖示(icon)寬度 32px
icon-wrapped-alt n/a 收合狀態時，圖示(icon)的替代文字 +(加號)
icon-wrapped-url n/a 收合狀態時，圖示(icon)的圖檔位址 http://i.imgur.com/bIXv1bk.png
padding px 內距(padding) 10px 25px
padding-bottom px 下方內距 n/a
padding-left px 左方內距 n/a
padding-right px 右方內距 n/a
padding-top px 上方內距 n/a

手風琴元素 (mj-accordion-element)

mj-accordion-element標籤用來建立一個手風琴格子。
屬性 單位 簡述 預設值
background-color n/a 背景顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
font-family n/a 字型 Ubuntu, Helvetica, Arial, sans-serif
icon-align n/a 圖示(icon)對齊方式 middle
icon-height px 圖示(icon)高度 32px
icon-position n/a 圖示(icon)顯示在左(left)或右(right) right
icon-unwrapped-alt n/a 展開狀態時，圖示(icon)的替代文字 -(減號)
icon-unwrapped-url n/a 展開狀態時，圖示(icon)的圖檔位址 http://i.imgur.com/w4uTygT.png
icon-width px 圖示(icon)寬度 32px
icon-wrapped-alt n/a 收合狀態時，圖示(icon)的替代文字 +(加號)
icon-wrapped-url n/a 收合狀態時，圖示(icon)的圖檔位址 http://i.imgur.com/bIXv1bk.png

手風琴標題 (mj-accordion-title)

mj-accordion-title標籤用來在手風琴內建立標題並賦予樣式。
屬性 單位 簡述 預設值
background-color n/a 背景顏色 n/a
color n/a 文字顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
font-family n/a 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px 字型大小 13px
padding px 內距(padding) 16px
padding-bottom px 下方內距 n/a
padding-left px 左方內距 n/a
padding-right px 右方內距 n/a
padding-top px 上方內距 n/a

手風琴文字 (mj-accordion-text)

mj-accordion-text標籤用來在手風琴內建立文字並賦予樣式。
屬性 單位 簡述 預設值
background-color n/a 背景顏色 n/a
color n/a 文字顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
font-family n/a 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px 字型大小 13px
padding px 內距(padding) 16px
padding-bottom px 下方內距 n/a
padding-left px 左方內距 n/a
padding-right px 右方內距 n/a
padding-top px 上方內距 n/a

按鈕 (mj-button)

顯示可自訂的按鈕。
屬性 單位 簡述 預設值
align string 水平對齊：靠左(left)/置中(center)/靠右(right) center
background-color color 按鈕背景顏色 #414141
border string CSS邊框(border)格式 none
border-bottom string CSS邊框(border)格式 n/a
border-left string CSS邊框(border)格式 n/a
border-radius px 邊框圓角半徑 3px
border-right string CSS邊框(border)格式 n/a
border-top string CSS邊框(border)格式 n/a
color color 文字顏色 #ffffff
container-background-color color 按鈕容器背景顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
font-family n/a 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px 字型大小 13px
font-style string 字型樣式：一般(normal)/義大利體(italic)/傾斜體(oblique) n/a
font-weight number 字型厚度 normal
height px 按鈕高度 n/a
href link 點擊按鈕時觸發的連結 n/a
inner-padding px 按鈕內的內距(padding) 10px 25px
line-height px/%/none 列高 120%
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 下方位移 n/a
padding-left px 左方位移 n/a
padding-right px 右方位移 n/a
padding-top px 上方位移 n/a
rel string 按鈕連結(link)的關係(rel)屬性 n/a
target string 按鈕連結(link)的目標(target)屬性 _blank
text-align string 按鈕內容的文字對齊 none
text-decoration string 內容的文字裝飾：下劃線(underline)/刪除線(line-through)/上劃線(overline)/無(none) none
text-transform string 文字轉換：字首大寫(capitalize)/大寫(uppercase)/小寫(lowercase) none
vertical-align string 垂直對齊：置中(middle)/靠上(top)/靠下(bottom) middle
width px 按鈕寬度 n/a
  • 製作旋轉木馬(carousel)式的圖片輪播。依郵件終端軟體不同，使用者可以游標掠過或點擊縮圖來互動。
  • mj-carousel可以用來設定其他旋轉木馬元素的樣式。
屬性 單位 簡述 預設值
align string 水平對齊：靠左(left)/置中(center)/靠右(right) center
background-color n/a 沿用分欄(column)的背景顏色 none
border-radius px 邊框圓角半徑 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
icon-width px 主圖左右的小圖示(icon)的寬度 44px
left-icon url 主圖左側的小圖示(icon) https://mjml.io/assets/img/left-arrow.png
right-icon url 主圖右側的小圖示(icon) https://mjml.io/assets/img/right-arrow.png
tb-border CSS邊框(border)格式 縮圖(thumbnail)的邊框 none
tb-border-radius px 縮圖(thumbnail)邊框的圓角半徑 none
tb-hover-border-color string 游標掠過(hovered)縮圖時的CSS邊框(border)顏色 none
tb-selected-border-color string 選定(selected)縮圖時的CSS邊框(border)顏色 none
tb-width px 縮圖寬度 110
thumbnails String 縮圖顯示(visible)或不顯示(hidden) visible
mj-carousel-image標籤用來在旋轉木馬內加入圖片並賦予樣式。
屬性 單位 簡述 預設值
alt string 圖片描述 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
href url 點擊時會被導轉的連結 n/a
rel string 圖片連結(link)的關係(rel)屬性 n/a
src url 圖片來源URL n/a
target string 圖片連結(link)的目標(target)屬性 _blank
thumbnails-src url 不採原圖時的縮圖來源URL null
title string 用於快顯提示(tooltip)的圖片標題 n/a

分欄 (mj-column)

  • 藉由分欄(column)可以水平地組織區段(section)中的內容。
  • 分欄必須位於mj-section標籤之下，轉譯引擎才能解析。
  • 為了達到響應式效果，分欄以百分比來表示。
  • 每個分欄都必須有內容，因為它們是響應式的容器，在手機畫面上會被垂直堆疊。
  • 所有標準元件（或由你定義且註冊過的元件）都可被放在分欄中－－除了mj-column與mj-section這兩個元素。
  • 分欄只能被用來當作內容的容器，不能用來卡位平移。
  • 分欄內的任何mj元素，其寬度都等同該分欄的100%寬度。
  • 分欄內不得再嵌套任何分欄(mj-column)或區段(mj-section)。
屬性 單位 簡述 預設值
background-color string 分欄(column)的背景顏色 n/a
border string CSS邊框(border)格式 none
border-bottom string CSS邊框(border)格式 n/a
border-left string CSS邊框(border)格式 n/a
border-right string CSS邊框(border)格式 n/a
border-top string CSS邊框(border)格式 n/a
border-radius percent/px 邊框圓角半徑 n/a
width percent/px 分欄的寬度 (100 / 同區段中non-raw元素個數)%
vertical-align string 垂直對齊：置中(middle)/靠上(top)/靠下(bottom) top
padding px 內距。支援最多4個參數 20px 0
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a

分隔線 (mj-divider)

水平分隔線，可如同HTML邊框般自訂屬性。
屬性 單位 簡述 預設值
border-color color 框線顏色 #000000
border-style string 框線樣式：虛線(dashed)/點線(dotted)/實線(solid) solid
border-width px 框線寬度 4px
container-background-color color 內部元素的背景顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 下方位移 n/a
padding-left px 左方位移 n/a
padding-right px 右方位移 n/a
padding-top px 上方位移 n/a
width px/percent 分隔線寬度 100%

群組 (mj-group)

  • 群組(group)可以防止分欄(column)在手機畫面內被上下堆疊。只要把mj-column包在mj-group標籤內，它們在手機畫面上就會左右並排顯示。
  • 被包在群組內的分欄，其寬度必須以百分比而非畫素來表示。
  • 在區段中可以同時有分欄及群組。
  • iOS 9問題：如果使用HTML beautifier來把MJML輸出的HTML美觀化，iOS 9的網頁渲染引擎會把mj-group內的分欄做成上下堆疊。必須對輸出的HTML，從mj-group內移除介於兩個分欄間的空白字元。
屬性 單位 簡述 預設值
width percent/px 群組的寬度 (100 / 同區段中non-raw元素個數)%
vertical-align string 垂直對齊：置中(middle)/靠上(top)/靠下(bottom) top
background-color string 群組(group)的背景顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a

英雄 (mj-hero)

  • 製作氣勢非凡的大圖襯底區段。在滿版背景圖上顯示若干包在mj-hero-content元件中的內容(文字、按鈕、圖片等)。
  • 高度(height)屬性只在底圖固定高度(fixed-height)模式下才需要。
  • 以outlook.com開啟郵件時，背景位置(background position)屬性在浮動高度(fluid-height)模式下無作用。
  • 為求較佳的跨環境相容性，建議使用的背景圖檔寬度等同於英雄(mj-hero)容器的寬度，並且務必設定一個回退(fallback)用的背景顏色，以因應不支援背景圖片的郵件閱讀軟體。
  • 請保持英雄(mj-hero)容器的高度低於圖片的高度。若英雄容器的高度（無論固定或浮動模式）大於背景圖片的高度，將無法保證在所有支援的郵件軟體中被正確渲染。
屬性 單位 簡述 預設值
background-color color 英雄(hero)的背景顏色 #ffffff
background-height px 背景圖片高度 0px
background-position top/center/bottom left/center/right 背景圖片位置 center center
background-url url 背景圖片的絕對路徑 n/a
background-width px 背景圖片寬度 0px
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
height px 英雄(hero)區段的高度(底圖固定高度模式必需) 0px
mode fluid-height/fixed-height 高度固定為height值或浮動 fluid-height
padding px 內距。支援最多4個參數 0px
padding-bottom px 下方位移 n/a
padding-left px 左方位移 n/a
padding-right px 右方位移 n/a
padding-top px 上方位移 n/a
vertical-align string 垂直對齊：置中(middle)/靠上(top)/靠下(bottom) top
width px 英雄容器寬度 父元素寬度

圖片 (mj-image)

  • 在郵件中顯示一個響應式的圖片。類似HTML的<img />標籤。
  • 注意：若未設定width屬性，圖片的寬度將會沿用其上層分欄(column)的寬度。
屬性 單位 簡述 預設值
align position 水平對齊：靠左(left)/置中(center)/靠右(right) center
alt string 圖片描述 n/a
border string CSS邊框(border)定義 none
border-radius px 邊框圓角半徑 n/a
container-background-color color 內部元素的背景顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
fluid-on-mobile string 若為「true」則即使已設定width，在手機畫面仍會全寬滿版 n/a
height px 圖片高度 auto
href url 點擊時會被導轉的連結 n/a
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 下方位移 n/a
padding-left px 左方位移 n/a
padding-right px 右方位移 n/a
padding-top px 上方位移 n/a
rel string 連結(link)的關係(rel)屬性 n/a
src url 圖片來源URL n/a
srcset url & width 可基於viewport指定不同螢幕尺寸時的額外圖片來源 n/a
target string 連結(link)的目標(target)屬性 _blank
title string 用於快顯提示(tooltip)的圖片標題 n/a
width px 圖片寬度 100%

導覽列 (mj-navbar)

  • mj-navbar用來產生導覽列選單。在手機畫面上可選擇顯示為收疊式的漢堡(hamburger)選單。
  • 選單中的個別連結都必須包在mj-navbar裡面。
  • 手機上的漢堡選單功能，只對iOS郵件軟體有效。因為其他郵件閱讀軟體只會用一般方式進行渲染，連結會被以行內顯示並且漢堡選單不會出現。
  • 開頭為「ico-」的屬性是用於自訂漢堡選單圖示，只在開啟漢堡模式時有作用。
屬性 單位 簡述 預設值
align string 水平對齊：靠左(left)/置中(center)/靠右(right) center
base-url string 所有子元件以相對網址表示時的基準url n/a
hamburger string 將此屬性的值設為hamburger即可在手機畫面啟動漢堡選單 n/a
ico-align string 漢堡圖示的水平對齊：left/center/right(須開啟漢堡模式) center
ico-close 十進位ASCII碼 自訂收合圖示的字元號碼(須開啟漢堡模式) 8855
ico-color color format 漢堡圖示顏色(須開啟漢堡模式) #000000
ico-font-family string 漢堡圖示字型(須開啟漢堡模式) Ubuntu, Helvetica, Arial, sans-serif
ico-font-size px 漢堡圖示大小(須開啟漢堡模式) 30px
ico-line-height px 漢堡圖示列高(須開啟漢堡模式) 30px
ico-open 十進位ASCII碼 自訂展開圖示的字元號碼(須開啟漢堡模式) 9776
ico-padding px 漢堡圖示內距。支援最多4個參數(須開啟漢堡模式) 10px
ico-padding-bottom px 漢堡圖示下方位移(須開啟漢堡模式) 10px
ico-padding-left px 漢堡圖示左方位移(須開啟漢堡模式) 10px
ico-padding-right px 漢堡圖示右方位移(須開啟漢堡模式) 10px
ico-padding-top px 漢堡圖示上方位移(須開啟漢堡模式) 10px
ico-text-decoration string 漢堡圖示的文字裝飾：下劃線(underline)/刪除線(line-through)/上劃線(overline)/無(none)。(須開啟漢堡模式) none
ico-text-transform string 漢堡圖示的文字轉換：字首大寫(capitalize)/大寫(uppercase)/小寫(lowercase)(須開啟漢堡模式) none
  • mj-navbar-link用來設定導覽列選單中的個別連結。
  • mj-navbar-link元件只能被放置在mj-navbar元件裡面。
屬性 單位 簡述 預設值
color color 文字顏色 #000000
font-family string 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px 字型大小 13px
font-style string 字型樣式：一般(normal)/義大利體(italic)/傾斜體(oblique) n/a
font-weight number 字型厚度 n/a
href string 點擊時會被導轉的連結 n/a
line-height px/%/none 列高 22px
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 下方位移 n/a
padding-left px 左方位移 n/a
padding-right px 右方位移 n/a
padding-top px 上方位移 n/a
rel string 連結(link)的關係(rel)屬性 n/a
target string 連結(link)的目標(target)屬性 _blank
text-decoration string 文字裝飾：下劃線(underline)/刪除線(line-through)/上劃線(overline)/無(none) n/a
text-transform string 文字轉換：字首大寫(capitalize)/大寫(uppercase)/小寫(lowercase) uppercase

原始碼 (mj-raw)

  • 包夾在<mj-raw>標籤內的HTML程式碼，不會被MJML引擎進行轉譯處理。
  • 上述程式碼必須是HTML原始碼且為響應式。
  • 若位於<jm-head>內部，則轉譯後會放到區塊的最後面。

區段 (mj-section)

  • 區段(mj-sections)即為信件內容中的橫列，用於產生版面的結構。
  • full-width屬性用於管理背景寬度。預設背景寬度是600px，設置了full-width屬性後會變成100%。
  • 反轉各分欄(column)顯示的順序：把direction屬性設定為rtl，可反轉在桌面電腦畫面時顯示的順序。由於MJML是行動優先設計，請先設置要在手機畫面內上下堆疊的順序，再以direction屬性來改變在桌機的顯示順序。
  • 區段中不能再嵌套任何區段。同時，區段中的任何內容，都必須被包在分欄內。
屬性 單位 簡述 預設值
background-color color 區段(section)的背景顏色 n/a
background-repeat string CSS的重複背景(background repeat) repeat
background-size percent/px CSS的背景大小(background size) auto
background-url url 背景的url n/a
border string CSS邊框(border)格式 none
border-bottom string CSS邊框(border)格式 n/a
border-left string CSS邊框(border)格式 n/a
border-right string CSS邊框(border)格式 n/a
border-top string CSS邊框(border)格式 n/a
border-radius percent/px 邊框圓角半徑 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
direction string 左到右(ltr)/右到左(rtl) ltr
full-width string 把值設為full-width可使背景佔全寬 n/a
padding px 內距。支援最多4個參數 20px 0
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
text-align string 文字對齊 center
vertical-align string 垂直對齊：置中(middle)/靠上(top)/靠下(bottom) top

社群分享 (mj-social)

  • 顯示呼籲行動(call-to-action)連結到各社群網站並顯示其Logo圖示。
  • 可運用mj-social-element標籤來新增社群網站。
屬性 單位 簡述 預設值
align string 水平對齊：靠左(left)/置中(center)/靠右(right) center
border-radius px 邊框圓角半徑 3px
color color 文字顏色 #333333
container-background-color color 內部元素的背景顏色 n/a
font-family string 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px/em 字型大小 13px
font-style string 字型樣式：一般(normal)/義大利體(italic)/傾斜體(oblique) normal
font-weight string 字型厚度 normal
icon-height percent/px 圖示高度，會蓋過icon-size設定 icon-size
icon-size percent/px 圖示大小(寬度及高度) 20px
inner-padding px 社群按鈕內部的內距(padding) 4px
line-height percent/px 列高 22px
mode string 模式：垂直(vertical)/水平(horizontal) horizontal
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
icon-padding px 圖示周圍的內距(padding) 0px
text-padding px 文字周圍的內距(padding) 4px 4px 4px 0
text-decoration string 文字裝飾：下劃線(underline)/刪除線(line-through)/上劃線(overline)/無(none) none

社群分享元素 (mj-social-element)

  • mj-social-element標籤用來在mj-social區塊內顯示指定的社群分享按鈕。
  • 預設的圖示是透明的，讓background-color成為圖示的顏色。
屬性 單位 簡述 預設值
align string 水平對齊：靠左(left)/置中(center)/靠右(right) center
alt string 圖片描述 none
background-color color 圖示顏色 每個社交網站name都自有預設色
border-radius px 邊框圓角半徑 3px
color color 文字顏色 #333333
font-family string 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px/em 字型大小 13px
font-style string 字型樣式：一般(normal)/義大利體(italic)/傾斜體(oblique) normal
font-weight string 字型厚度 normal
href url 按鈕將導轉到的URL [[SHORT_PERMALINK]]
icon-height percent/px 圖示高度，會蓋過icon-size設定 icon-size
icon-size percent/px 圖示大小(寬度及高度) 20px
line-height percent/px 列高 22px
mode string 模式：垂直(vertical)/水平(horizontal) horizontal
name string 社群網站名稱，參見下方支援清單 N/A
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
icon-padding px 圖示周圍的內距(padding) 0px
text-padding px 文字周圍的內距(padding) 4px 4px 4px 0
src url 圖片來源 每個社交網站name都自有預設來源
target string 連結(link)的目標(target)屬性 _blank
title string 圖片的標題(title)屬性 none
text-decoration string 文字裝飾：下劃線(underline)/刪除線(line-through)/上劃線(overline)/無(none) none
  • 在使用「有分享URL」的社群網站時，href屬性會被加入到分享URL中。（例如https://www.facebook.com/sharer/sharer.php?u=[[URL]]）。
  • 如果希望完整保持href的原貌不變，就要在社群網站的name後面加上-noshare。例如：
<mj-social-element name="twitter-noshare" href="my-unchanged-url">
  Twitter
</mj-social-element>
  • 未支援的社群網站也可以自行客製化：
<mj-social-element href="url" background-color="#FF00FF" src="path-to-your-icon">
  Optional label
</mj-social-element>
支援的社群網站(有分享URL)：
  • facebook
  • twitter
  • google
  • pinterest
  • linkedin
  • tumblr
  • xing
支援的社群網站(沒有分享URL)：
  • github
  • instagram
  • web
  • snapchat
  • youtube
  • vimeo
  • medium
  • soundcloud
  • dribbble

留白 (mj-spacer)

顯示一塊空白的空間。
屬性 單位 簡述 預設值
border string CSS邊框(border)格式 n/a
border-bottom string CSS邊框(border)格式 n/a
border-left string CSS邊框(border)格式 n/a
border-right string CSS邊框(border)格式 n/a
border-top string CSS邊框(border)格式 n/a
container-background-color color 內部元素的背景顏色 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
height px 留白的高度 20px
padding px 內距。支援最多4個參數 none
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
vertical-align string 垂直對齊：置中(middle)/靠上(top)/靠下(bottom) middle
width px 留白的寬度 n/a

表格 (mj-table)

mj-table標籤用來呈現表格及其中的資料。內容只接受單純的HTML。
屬性 單位 簡述 預設值
cellpadding pixels 儲存格內距 n/a
cellspacing pixels 儲存格間距 n/a
color color 文字、表頭表尾顏色 #000000
container-background-color color 內部元素的背景顏色 n/a
font-family string 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px/em 字型大小 13px
font-style string 字型樣式：一般(normal)/義大利體(italic)/傾斜體(oblique) n/a
line-height percent/px 列高 22px
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
table-layout 表格布局：自動(auto)/固定(fixed)/初始(initial)/繼承父級(inherit) auto
width percent/px 表格寬度 100%

文字 (mj-text)

  • 在郵件中顯示文字。
  • mj-text內可包含具有任何屬性的任何HTML標籤。但特殊字元須先行編碼，以免MJML轉譯引擎發生預期外的行為。
屬性 單位 簡述 預設值
color color 文字顏色 #000000
font-family string 字型 Ubuntu, Helvetica, Arial, sans-serif
font-size px/em 字型大小 13px
font-style string 字型樣式：一般(normal)/義大利體(italic)/傾斜體(oblique) normal
font-weight string 字型厚度 normal
line-height percent/px 列高 22px
letter-spacing px 字距 none
height px 元素的高度 n/a
text-decoration string 文字裝飾：下劃線(underline)/刪除線(line-through)/上劃線(overline)/無(none) none
text-transform string 文字轉換：字首大寫(capitalize)/大寫(uppercase)/小寫(lowercase) uppercase
align string 水平對齊：靠左(left)/置中(center)/靠右(right)/分散(justify) left
container-background-color color 內部元素的背景顏色 n/a
padding px 內距。支援最多4個參數 10px 25px
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a

外包裝 (mj-wrapper)

  • mj-wrapper用來將多個區段(section)打包到一起。特別適用於多個區段共用同一邊框或底圖時的嵌套版面。
  • full-width屬性用於管理背景寬度。預設背景寬度是600px，設置了full-width屬性後會變成100%。
  • 不可把full-width的區段嵌套到full-width外包裝(wrapper)裡面。否則該區段會呈現如同一個非全寬區段。
  • 如果對mj-wrapper設定了background-url，便不可再對其中的任何區段設置底圖。否則桌面版Outlook由於不支援巢狀VML，將會造成郵件破版。
屬性 單位 簡述 預設值
background-color color 區段的背景顏色 n/a
background-repeat string CSS的重複背景(background repeat) repeat
background-size percent/px CSS的背景大小(background size) auto
background-url url 背景圖片的絕對路徑 n/a
border string CSS邊框(border)格式 none
border-bottom string CSS邊框(border)格式 n/a
border-left string CSS邊框(border)格式 n/a
border-radius percent/px 邊框圓角半徑 n/a
border-right string CSS邊框(border)格式 n/a
border-top string CSS邊框(border)格式 n/a
css-class string CSS類別(class)名稱，會被加入到生成的HTML根元素中 n/a
full-width string 把值設為full-width可使外包裝佔全寬 n/a
padding px 內距。支援最多4個參數 20px 0
padding-bottom px 區段下方位移 n/a
padding-left px 區段左方位移 n/a
padding-right px 區段右方位移 n/a
padding-top px 區段上方位移 n/a
text-align string 文字對齊 center
vertical-align string 垂直對齊：置中(middle)/靠上(top)/靠下(bottom) top
於 沒有留言:
標籤： , ,

輕鬆製作 RWD 信件：簡介 MJML 郵件設計語言框架

MJML 郵件設計語言框架

本文來源：MJML Documents
（我動手翻譯了語法部分，請參考這篇，結果差不多等於把文件全部翻完了XD）

MJML是一種用來編寫響應式電子郵件程式碼的標記語言(markup language)，由開源的轉譯引擎來把撰寫好的程式碼轉為高品質的HTML，因而能相容各種郵件開啟環境。MJML是知名郵件業者Mailjet多年經驗打造並且持續更新，確保無論郵件閱讀軟體一再改版，也能隨之更新相容。目前版本為MJML v4。

免安裝線上編輯器

嵌套（Netsing）層級結構

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Column content -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

內容本體（Body）

所有內容必須位於一個mj-body標籤內。
整個色塊代表Body

區段（Section）

整封信從上到下，分為若干個mj-section水平區段。
每個色塊代表一個Section

分欄（Column）

每個區段中都必須有分欄（至少一個），用mj-column標籤表示。響應式排列在此層級實現。
每個色塊代表一個Column

分欄的尺寸

自動定義尺寸

  • 任一區段中的每個分欄，將均分該區段的總寬度（例如若有二個分欄就各佔50%，三個就各33%，四個就各25%）。
  • 區段的寬度預設值為600px。
  • 所有區段的寬度可由mj-body標籤的width屬性來更改。
  • 任何分欄內的mj-元素，其寬度將等於該分欄的100%寬度。

手動定義尺寸

  • 也可自行在mj-column標籤的width屬性設定該分欄的寬度。
  • 分欄的寬度可用畫素或百分比為單位（例如width="150px"或者width="25%"）。

小訣竅

原始碼（Raw）

  • 包夾在<mj-raw>標籤內的HTML程式碼，不會被MJML引擎進行轉譯處理。
  • 上述程式碼必須是HTML原始碼且為響應式。
  • 若位於<jm-head>內部，則轉譯後會放到區塊的最後面。

安裝使用網路字型

在<mj-head>內的<mj-raw>內放入網路字型路徑，然後使用font-family屬性來指定字型。例如在<mj-head>內放入：
<mj-raw>
    <link href='https://fonts.googleapis.com/earlyaccess/notosanstc.css' rel='stylesheet' type='text/css'>
</mj-raw>
即可以此方式使用：
<mj-text font-family="Noto Sans TC">這些字會顯示為思源黑體</mj-text>
。

於 沒有留言:
標籤： , ,

2019年7月18日 星期四

[GAS] 用 GAS 做中介以隱藏檔案真實來源位址，達成把檔案傳給用戶下載

因為對於原先的需求有了其他解決方案，沒空之下也就不再繼續研究這個議題了，整理一下之前的紀錄，以備日後自己查考（但很可能實際最後不管用）。內容不完整而且可能有錯誤，我自己也不曉得在寫什麼，請無意間進入閱讀的人小心喔。

在 Google Apps Script 端：
1. 從 Google Drive 取得 File 物件。
2. 用 DriveApp.File.getAs(contentType) 把檔案轉成 blob 物件。
3. 用 Blob.getBytes() 把 blob 轉成位元陣列（byte[]）。
4. 用 Utilities.base64Encode(data) 把 Byte[] 轉成 Base 64 編碼的字串。
5. 回傳給用戶端的瀏覽器。

在用戶端瀏覽器開啟的網頁，由 JavaScript 接收 blob 物件，再由使用者選定存檔位置。


這篇文章試圖把檔案製作成 blob，以當作 GAS 的 doGet() 函式的 return 值，回傳給使用者的瀏覽器：
Serve PDF file as blob in Google Apps Script - Stack Overflow


這篇則試圖把伺服器傳來的 blob 物件，還原成 PDF 格式並存檔：
internet explorer - Save base64 string as PDF at client side with JavaScript - Stack Overflow


這個則使用比較新的程式寫法，也簡潔得多，但只處理到用戶端瀏覽器接收並轉為 blob ：
Creating a Blob from a base64 string in JavaScript - Stack Overflow


這篇用的技術比較舊，但過程解釋的比較清楚：
HTML5筆記–Object URL-黑暗執行緒


在 DriveApp.File.getAs(contentType) 的官方說明中有提到，對大多數的 blob 而言，將 contentType 指定為 'application/pdf' 是唯一合法的選項。但我還是想試試不同類型，MDN整理了一份常見 MIME type 清單，並提及所有非純文字的檔案都可以使用 application/octet-stream 這個 MIME 類型。

於 沒有留言:
標籤：

2018年12月25日 星期二

[jQuery] jQuery 物件 vs DOM 物件

粗略記一下我自己的理解：

jQuery 框架主要是一個 JavaScript 函式庫，裡面包含很多個函式。

其中一個很重要的基本函式 jQuery() －－ 通常會簡寫為 $() －－ 用途就是返回一個「jQuery 物件」。

概念上，把 DOM 物件用 jQuery() 包裝過後，吐出來就是個 jQuery 物件。使用傳統 JavaScript 的 DOM 選取方法，取出來的就是 DOM 物件（或者說是一個 DOM 元素？）。

只有 jQuery 物件才能使用 jQuery 的各種好用方法。相反的，若要呼叫 DOM 方法則一定要是 DOM 物件才可以，jQuery 物件是不行的。

所謂jQuery 物件，本質上就是個陣列（Array），或者精確的說是個關聯式陣列物件（又稱物件實字Object Literal）。

餵給 $() 吃的參數值，可以有很多種格式，其中最常見的就是選擇器（一個符合jQuery selector規格的字串）。另外也可以吃 DOM 物件，用 jQuery() 把 DOM 物件包裝起來，就是個 jQuery 物件了：

var cr=document.getElementById("cr"); //dom物件
var $cr = $(cr); //轉換成jQuery物件

反過來，若把 jQuery 物件取出陣列第一個屬性，就可以轉換成 DOM 物件：

var $cr=$("#cr"); //jQuery物件
var cr = $cr[0]; //dom物件 也可寫成 var cr=$cr.get(0);

參考資料：
DOM物件和JQuery物件的區別 - 掃文資訊
https://tw.saowen.com/a/0045b51128f3e570adc319b1d541d2545373c3f2a96864f9be24d7485ac67bfb
於 沒有留言:
標籤： ,

2018年12月13日 星期四

[ES6] 點點點（...）——展開運算子（Spread Operator）vs 其餘運算子（Rest Operator）

點點點（...）作為一元運算子，位置在運算元之前。有兩種用法：

1. 展開運算子（Spread Operator）：把陣列展開成參數

在陣列前面加上...，即可把每個陣列元素逐一展開，直接餵給函式當作若干個參數輸入。

假設有一個函式只能吃參數，例如Math.max()，返回所有參數中的最大值：
Math.max(9, 3, 7, 13, 5);  //13

直接餵陣列，它不吃：
Math.max([9, 3, 7, 13, 5]);  //NaN

在陣列前面加上展開運算子就可以了：
Math.max(...[9, 3, 7, 13, 5]);  //13

2. 其餘運算子（Rest Operator）：把參數合併成陣列

跟展開運算子剛好相反。在陣列前面加上...，即可把所有參數合併成一個陣列，再餵給只吃陣列的函式當作輸入值。效果有點類似一般函式物件的arguments屬性（以類陣列型態存放所有輸入的參數）。

假設有一個函式預設只能吃陣列。例如輸入陣列，計算其項目個數：

let count = arr => arr.length;
console.log(count([6, 9, 37, 17, 64]));  //5

若餵一堆參數它是不吃的：
console.log(count(6, 9, 37, 17, 64));  //undefined

但若幫函式的參數加上其餘運算子，就可以囉：
let count = (...arr) => arr.length;
console.log(count(6, 9, 37, 17, 64));  //5

參考：
JavaScript ES6 中的展開運算子（spread operator）和其餘運算子（rest operator） ~ PJCHENder 那些沒告訴你的小細節

於 沒有留言:
標籤： , ,

2018年12月10日 星期一

如何在Blogger文章內嵌入程式碼區塊？

1. 前言


方法主要是參考這篇介紹： [Blogger] 如何在 Blogger 顯示程式碼 - Google Code Prettify ~ m@rcus 學習筆記，貪圖它方便。安裝方法就省略了。

其實直接看原始專案說明也很清楚： GitHub - google/code-prettify: Automatically exported from code.google.com/p/google-code-prettify

本站目前就先採用這個方法來把程式碼嵌入到文章裡。

2. 使用方法


操作方法很簡單，就是在後台編輯HTML，直接把程式碼區塊插入為具有 class="prettyprint" 屬性的 pre 或 code 元素即可：

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>

如上，若覺得有需要，可以加入 lang-XXXX 來指定程式語言。但其實 Google Code Prettify 會自動猜測。當然更可以依照嚴謹的 HTML 5 規格，用pre把code包起來，然後在code標籤內指定語言種類： 

<pre class="prettyprint"><code class="language-java">...</code></pre>

3. 預先HTML轉碼


但是！某些程式碼可能要先經過HTML Encoding才能正常顯示。線上轉換：
HTML編碼 - 在線HTML編碼器 或者 HTML Encoder :: OpinionatedGeek


4. 其他備用方案


不過為了怕這個 Google Code Prettify 專案中止或與Blogger無法完全相容，還是打算找一些備案，先列在這裡備忘：

備案1： A.D.的程式筆記: 『其他』如何在Blogger文章顯示程式碼
備案2（還真的有點麻煩）： [技術分享] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting) ~ PJCHENder 那些沒告訴你的小細節
於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)

MJML完整語法說明

MJML 是一套由電子報服務商MailJet貢獻出來的開源框架，能用簡單的語法輕鬆撰寫響應式(RWD)的電子郵件內容，再透過免費開源的 轉檔程式 或 線上編輯器 ，產生最終的標準HTML程式碼。 上一篇 稍微針對其版面布局結構做了一點簡介，這篇就完整照著官網技術文件的內容（2...

  • MJML完整語法說明
    MJML 是一套由電子報服務商MailJet貢獻出來的開源框架，能用簡單的語法輕鬆撰寫響應式(RWD)的電子郵件內容，再透過免費開源的 轉檔程式 或 線上編輯器 ，產生最終的標準HTML程式碼。 上一篇 稍微針對其版面布局結構做了一點簡介，這篇就完整照著官網技術文件的內容（2...
  • 輕鬆製作 RWD 信件：簡介 MJML 郵件設計語言框架
    MJML 郵件設計語言框架 本文來源： MJML Documents （我動手翻譯了語法部分，請參考 這篇 ，結果差不多等於把文件全部翻完了XD） MJML是一種用來編寫響應式電子郵件程式碼的標記語言(markup language)，由開源的轉譯引擎來把撰寫好的程式碼...
  • [GAS] 用 GAS 做中介以隱藏檔案真實來源位址，達成把檔案傳給用戶下載
    因為對於原先的需求有了其他解決方案，沒空之下也就不再繼續研究這個議題了，整理一下之前的紀錄，以備日後自己查考（但很可能實際最後不管用）。內容不完整而且可能有錯誤，我自己也不曉得在寫什麼，請無意間進入閱讀的人小心喔。 在 Google Apps Script 端： 1. 從 ...