關於fis框架中fis3-smarty語法總結（一）

時間 2019-11-06

標籤關於 fis 框架 fis3 smarty 語法總結简体版

原文原文鏈接

功能：經過靜態資源管理框架加載靜態資源。
插件類型：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%}
複製代碼