关于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%}
复制代码

关于fis框架中fis3-smarty语法总结（一）

目录

什么是smarty

fis3-smarty模板语法

基础模板框架语法

🔹html

🔹head

🔹body

🔹script

🔹style