template 樣板屬性

樣板編譯邏輯

樣板由頂層的html, 擷取{{參數:值}}設定, 巢狀式地由外往內建立HTML. 反之, 儲存頁面時, 由最內層向外擷取 template="參數@值" 的元素設定, 將該元素或元素的的html依設定儲存成資料, 並將原本的html轉化成{{參數@值}}標籤, 以此轉換<-->還原的方式來存取樣板.

template 屬性設定

template="emb:(inner/outer)@檔案名稱(不包含.tpl.php)"
emb: 該元素的 innerHTML/outerHtml 為source, 放置於 [document_root]/template/app/embed 資料夾的.php檔案, 通常用於崁入需以php編寫或抓取資料庫來排版的版面, 例如將存放在mysql資料庫中所有最新消息的內容頁面資料, 編排成最新消息列表, 用來崁入最新消息的主頁
範例:
<div class="row" template="emb:inner@news-list">
<div class="col"></div>
<div class="col"></div>
</div>


存成樣板:
<div template=":inner@news-list">{{emb:inner@news-list}}</div>

檔案內容(路徑為 [document_root]/template/app/embed):
<div class="col"></div><div class="col"></div>

template="inc:(inner/outer)@(/inc/資料夾路徑)/檔案名稱(不包含.tpl.php)"
inc: 作用與emb類似, 該元素的 outerHTML/outerHtml 為source, 放置於 /tpl 資料夾的.php檔案, 通常用於崁入需以php編寫或抓取資料庫來排版的版面, 例如將存放在mysql資料庫中所有最新消息的內容頁面資料, 編排成最新消息列表, 用來崁入最新消息的主頁
範例:
<div class="row" template="inc:outer@tpl/cart/cart_step1">
<div class="col"></div>
<div class="col"></div>
</div>


存成樣板: {{inc:outer@tpl/cart/cart_step1}}

檔案內容( /tpl/cart/cart_step1.tpl.php ):
<div class="row" template="inc:outer@tpl/cart/cart_step1">
<div class="col"></div>
<div class="col"></div>
</div>

template="wdg:(inner/outer)@資料名稱"
wdg: 作用與part類似, 取該元素的 outerHTML 為source, 放置於資料庫中widget資料表中, 通常用於崁入可供編輯的"共用"區塊, 屬靜態HTML, 例如footer為每個頁面的共用區塊
範例:
<footer class="footer" template="wdg:outer@footer">
  <div class="container"> ... </div>
</footer>


存成樣板:
{{wdg:outer@footer}}

資料內容:
<footer class="footer" template="wdg:outer@footer">
<div class="container"> ... </div>
</footer>

template="pdb:(inner/outer)@資料表欄位/資料名稱"
pdb: 取該元素的 innerHTML/outerHTML 為source, 放置於資料庫中Pages該頁面所屬資料列欄位(通常為json欄位), 通常用於崁入該頁面專屬內容區塊, 屬靜態HTML, 例如頁面中文章內容
目前常用的html欄位為 HtmlContent
範例:
<article template="pdb:inner@HtmlContent/main">
  <section template="pdb:inner@HtmlContent/sub"> ... </section>
  <div template="pdb:outer@HtmlContent/media"> ... </div>
</article>


存成樣板:
HtmlContent > main 的值
{"main":"<section template=\"pdb:inner@HtmlContent/sub\">{{pdb:inner@HtmlContent/sub}}</section>
{{pdb:outer@HtmlContent/media}}"}
 

HtmlContent > sub 的值
{"sub":"..."}

HtmlContent > media 的值
{"main":"{{pdb:outer@HtmlContent/media}}"}
 

template="inh:(inner/outer)@樣板名稱/資料表欄位/資料名稱"
inh: 取該元素的 innerHTML/outerHtml 為source, 放置於資料庫中Pages該頁面所屬資料列欄位, 或者該頁面上層頁面欄位中, 尋樹狀結構而上, 依參數找尋該頁或上層頁面的欄位;
例如樣板的樹狀結構為 news-main -> news-cate -> news-pg
在樣板為new-pg的頁面中的元素使用設定 template="inh:outer@news-cate/HtmlContent/sub" , 則該元素的innerHTML既連結至該頁的上層頁面樣板屬於news-cate的資料欄位 HtmlContent (json欄位) 的key 'sub' 的值
其儲存方式與pdb的作用類似, 只是檢索是依據該Frame(樣板名稱)設定來決定

template="var@變數名稱"
var: 主要的作用為崁入原本就設定好的值.

範例:
<h3 class="cn-title" template="var@PageTitle">最新消息</h3>