Smarty是一個使用PHP寫出來的模板引擎,一說模板引擎,其實就是再html中插入能夠直接渲染的數據。這個是爲了讓前端和後臺分離的一種管理模式。javascript
優勢: 代碼由服務端直接渲染,能夠避免js後期插入的延遲,頁面渲染速度也很快。而服務端只須要給數據,至於怎麼用或者修改頁面的時候,不用後臺動邏輯,多人項目合做顯得很重要。php
fis3-smarty默認的分屆符爲{%、%}
,這個能夠修改。css
<html>
標籤,設置頁面運行的前端框架,以及控制住總體頁面輸出{%html framework="home:static/lib/[mod.js](http://wiki.afpai.com/pages/mod.js)"%}
{%/html%}
複製代碼
頁面輸出html
<html>
<body>
<script src="/static/lib/mod.js"/></script>
</body>
</html>
複製代碼
<head>
標籤,控制CSS資源加載輸出。{%html framework="home:static/lib/mod.js"%}
{%head%}
<meta charset="utf-8"/>
{%/head%}
{%/html%}
複製代碼
頁面輸出前端
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script src="/static/lib/mod.js"/></script>
</body>
</html>
複製代碼
<body>
標籤,控制JS資源加載輸出。{%html framework="home:static/lib/mod.js"%}
{%head%}
<meta charset="utf-8"/>
{%/head%}
{%body%}
....
{%/body%}
{%/html%}
複製代碼
<script>
標籤,收集使用JS組件的代碼塊,控制輸出至頁面底部。{%html%}
{%head%}
<meta charset="utf-8"/>
{*經過script插件收集加載組件化JS代碼*}
{%script%}
console.log("aa");
{%/script%}
{%/head%}
{%body%}
...
{%/body%}
{%/html%}
複製代碼
解析結果(不管是放在head裏面仍是body裏面,最後都會在body最後面輸出):html5
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script type="text/javascript"> !function(){ console.log("aa"); }(); </script>
</body>
</html>
複製代碼
<style>
標籤,收集使用css內嵌資源的代碼塊。{%html%}
{%head%}
<meta charset="utf-8"/>
{*經過script插件收集加載組件化JS代碼*}
{%style%}
body{
background-color:pink;
}
{%/style%}l
{%/head%}
{%body%}
...
{%/body%}
{%/html%}
複製代碼
解析結果java
<html>
<head>
<meta charset="utf-8"/>
<style> body{ background-color:pink; } </style>
</head>
<body>
</body>
</html>
複製代碼
{%html framework="home:static/lib/mod.js"%}
{%head%}
<meta charset="utf-8"/>
{%/head%}
{%body%}
{%require name="home:static/index/index.css"%}
{%require name="home:static/index/index.js"%}
...
{%/body%}
{%/html%}
複製代碼
編譯以後解析結果(測試以後src的屬性不能用):jquery
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="/static/home/index/index.css">
</head>
<body>
<script type="text/javascript" src="/static/home/index/index.js"></script>
</body>
</html>
複製代碼
頁面數據
{
"result":{
"addStr":"html of b"
}
}
----home.tpl
{%body%}
{%widget name="home:widget/A/B.tpl" info=$result%}
{%/body%}
<!--$info的改變不會對$data.header.info有任何影響-->
----B.tpl
<div>{%$info.addStr%}</div>
複製代碼
編譯以後:git
<body>
<div>html of b</div>
</body>
複製代碼
<!--A.tpl-->
<title>{%block name="head_title"%}{%/block%}</title>
<!--B.tpl-->
{%block name="head_title"%}title show{%/block%}
複製代碼
編譯以後在頁面你上能夠獲得github
<title>title show</title>
複製代碼
{%extends file="common/page/layout/m-base.tpl"%}
複製代碼
{%$logo_url="{%uri name="common:static/a.js"%}"%}
複製代碼
//framework中舉例
//定義變量html_ext_attr
{%capture name="html_ext_attr"%}{%block name="html_ext_attr"%}{%/block%}{%/capture%}
//使用變量
{%$html_ext_attr%}
複製代碼
frameworkTpl --> productTpl
首先有一個最基礎的tpl模板,定義了最基礎的東西,而後後面繼承的能夠根據這個東西進行修改。
append
就能夠<!--定義一個html標籤自定義屬性的變量,名字叫html_ext_attr-->
{%capture name="html_ext_attr"%}{%block name="html_ext_attr"%}{%/block%}{%/capture%}
<!--fis必需要引用mod.js-->
{%html framework="common:js/mod.js" {%$smarty.capture.html_ext_attr%}%}
<!--head標籤-->
{%head%}
<meta charset="{%block name='head_charset'%}UTF-8{%/block%}">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- 添加 meta 配置,引導 360 瀏覽器優先使用 webkit 內核渲染頁面 -->
<meta name="renderer" content="webkit">
<meta name="description" content="{%block name='head_desc'%}網頁描述{%/block%}">
<meta name="keywords" content="{%block name='head_keywords'%}網頁keywords{%/block%}">
<!--頁面title-->
<title>{%block name="head_title"%}{%/block%}</title>
<!--頁面icon-->
{%block name="head_favicon"%}
<link rel="shortcut icon" href="">
{%/block%}
<!-- <head> 標籤開始位置,title 以後,全部 CSS/JavaScript 引用以前 -->
{%block name="head_start"%}{%/block%}
<!-- 基礎樣式 -->
{%require name="common:css/base.css"%}
<!-- 爲 IE8 及更低版本 IE 瀏覽器添加 HTML5 新增元素支持 -->
<link rel="import" href="../../static/html/html5-hack.html?__inline">
<!-- <head> 標籤結束位置 -->
{%block name="head_end"%}{%/block%}
{%/head%}
<!-- <head> 標籤末端 -->
{%block name="after_head"%}{%/block%}
<!-- 全局 js 基礎庫,默認引用 jQuery -->
{%block name="global_js"%}
{%require name="common:js/jquery.js"%}
{%/block%}
<!-- block "body_ext_attr" 用於向 <body> 標籤中添加自定義屬性 -->
{%capture name="body_ext_attr"%}{%block name="body_ext_attr"%}{%/block%}{%/capture%}
<!-- block "body_page_class" 用於向 <body> 標籤中添加樣式名 -->
{%body class="{%block name='body_page_class'%}{%/block%}" {%$smarty.capture.body_ext_attr%}%}
<!-- <body> 標籤開始位置,頁面主體內容前 -->
{%block name="body_start"%}{%/block%}
<!-- 頁面主體內容 -->
{%block name="body"%}
<!-- 頁面內容的 header 區域 -->
{%block name="body_header"%}{%/block%}
<!-- 頁面內容主體 -->
{%block name="body_main"%}{%/block%}
<!-- 頁面內容的 footer 區域 -->
{%block name="body_footer"%}{%/block%}
{%/block%}
<!-- <body> 標籤結束位置,頁面主體內容後 -->
{%block name="body_end"%}{%/block%}
{%/body%}
<!-- <body> 標籤以後 -->
{%block name="after_body"%}{%/block%}
{%/html%}
複製代碼
而後是一個個性化的Tpl模板,用於不一樣的項目組
{%extends file='./framework.tpl'%}
{%block name='head_keywords'%}項目keywords{%/block%}
{%block name="head_title"%}項目html{%/block%}
{%block name='head_desc'%}項目desc{%/block%}
<!--須要html渲染以前執行的css和js-->
{%block name="head_end" append%}
<script type="text/javascript"> console.log("TODO"); </script>
<style> .hide{ display:none; } </style>
{%require name="product:product.css"%}
{%/block%}
<!-- 修改全局 js 基礎庫,默認引用 zepto-->
{%block name="global_js"%}
{%require name="common:js/zepto.js"%}
{%/block%}
<!--body_ext-attr,body額外的屬性-->
{%block name="body_ext_attr"%}time=true{%/block%}
{%block name="body_main"%}
<div>------全部html標籤都寫在這裏------</div>
<div>------這裏面也能夠直接使用smarty語法------</div>
{%/block%}
{%block name="body_end"%}
<script> var finished = "{%$result.finished%}"; console.log(finished); </script>
{%require name="product:product.js"%}
{%/block%}
複製代碼