關於fis框架中fis3-smarty語法總結(一)

目錄

  • 什麼是smarty
  • fis3-smarty模板語法
  • 基礎模板框架語法 html、head、style、widget、block、extend
  • 模板專用語法 url、capture
  • 模板框架引用邏輯

什麼是smarty

Smarty是一個使用PHP寫出來的模板引擎,一說模板引擎,其實就是再html中插入能夠直接渲染的數據。這個是爲了讓前端和後臺分離的一種管理模式。javascript

優勢: 代碼由服務端直接渲染,能夠避免js後期插入的延遲,頁面渲染速度也很快。而服務端只須要給數據,至於怎麼用或者修改頁面的時候,不用後臺動邏輯,多人項目合做顯得很重要。php

fis3-smarty模板語法

  • FIS 2.0 時期支持 Smarty 開發的成套解決方案是 fis-plus
  • FIS 3.0 時期支持 Smarty 開發的成套解決方案由 fis3-smarty 提供 因此fis3-smarty 集成了 fis-plus 的目錄規範以及處理插件。實現對 Smarty 模板解決方案的工程構建工具支持。

基礎模板框架語法

fis3-smarty默認的分屆符爲{%、%},這個能夠修改。css

🔹html

  • 功能:代替<html>標籤,設置頁面運行的前端框架,以及控制住總體頁面輸出
  • 屬性值:framework及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

  • 功能:代替<head>標籤,控制CSS資源加載輸出。
  • 屬性值:head標籤原生屬性值
{%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

  • 功能:代替<body>標籤,控制JS資源加載輸出。
  • 屬性值:body標籤原生屬性值
{%html framework="home:static/lib/mod.js"%}
    {%head%}
        <meta charset="utf-8"/>
    {%/head%}
    {%body%}
        ....
    {%/body%}
{%/html%}
複製代碼

🔹script

  • 功能:代替<script>標籤,收集使用JS組件的代碼塊,控制輸出至頁面底部。
  • 屬性值:無
  • 是否必須:在模板中使用異步JS組件的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

  • 功能:代替<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>
複製代碼

🔹require

  • 功能:經過靜態資源管理框架加載靜態資源。
  • 插件類型:compiler
  • 屬性值:name(調用文件目錄路徑)
  • 用法:在模板中若是須要加載模塊內某個靜態資源,能夠經過require插件加載,便於管理輸出靜態資源
  • name後面跟着<模塊名>:<資源相對於模塊根目錄的路徑>
{%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>
複製代碼

🔹widget

  • 功能:調用模板組件,渲染輸出模板片斷。
  • 插件類型:compiler
  • 屬性值:name(調用文件目錄路徑,必定是widget文件夾下)
  • 能夠添加局部變量
頁面數據
{
	"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>
複製代碼

🔹block

  • 功能: 根據位置填寫不一樣的東西
  • 屬性值:name。進行區分不用的區塊。
<!--A.tpl-->
<title>{%block name="head_title"%}{%/block%}</title>
<!--B.tpl-->
{%block name="head_title"%}title show{%/block%}
複製代碼

編譯以後在頁面你上能夠獲得github

<title>title show</title>
複製代碼

🔹extend

  • 功能: 繼承製定模塊的tpl模板
  • 屬性值:file。寫所繼承的模塊的文件地址
{%extends file="common/page/layout/m-base.tpl"%}
複製代碼

模板專用語法

🔶url

  • 功能:動態得到某個路徑的最終 url
  • 因爲 FIS 構建時會根據配置給資源添加 cdn、md5戳,這個給編碼帶來了一些麻煩。uri 接口能夠動態獲取資源的最終 url
{%$logo_url="{%uri name="common:static/a.js"%}"%}
複製代碼

🔶capture

  • 功能:將標籤中間的內容捕獲到一個變量中,能夠被嵌套
  • 屬性:name,捕獲的變量名
//framework中舉例
//定義變量html_ext_attr
{%capture name="html_ext_attr"%}{%block name="html_ext_attr"%}{%/block%}{%/capture%}

//使用變量
{%$html_ext_attr%}
複製代碼

模板框架引用邏輯

frameworkTpl --> productTpl

首先有一個最基礎的tpl模板,定義了最基礎的東西,而後後面繼承的能夠根據這個東西進行修改。

  • 要求是必定要擴展性特別強,不少head前和後,body前和後,均可以進行添加和修改
  • 若是要去掉默認的,直接寫標籤,什麼都不寫就覆蓋了
  • 若是是追加,再標籤後面加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%}
複製代碼
相關文章
相關標籤/搜索