美文网首页
关于fis框架中fis3-smarty语法总结（一）

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

作者: 顽皮的雪狐七七 | 来源:发表于2019-07-26 19:22 被阅读0次

    目录

    • 什么是smarty
    • fis3-smarty模板语法
    • 基础模板框架语法
      html、head、style、widget、block、extend
    • 模板专用语法
      url、capture
    • 模板框架引用逻辑

    什么是smarty

    Smarty是一个使用PHP写出来的模板引擎，一说模板引擎，其实就是再html中插入可以直接渲染的数据。这个是为了让前端和后台分离的一种管理模式。

    优点：
    代码由服务端直接渲染，可以避免js后期插入的延迟，页面渲染速度也很快。而服务端只需要给数据，至于怎么用或者修改页面的时候，不用后台动逻辑，多人项目合作显得很重要。

    fis3-smarty模板语法

    • FIS 2.0 时期支持 Smarty 开发的成套解决方案是 fis-plus
    • FIS 3.0 时期支持 Smarty 开发的成套解决方案由 fis3-smarty 提供
      所以fis3-smarty 集成了 fis-plus 的目录规范以及处理插件。实现对 Smarty 模板解决方案的工程构建工具支持。

    基础模板框架语法

    fis3-smarty默认的分届符为{%、%}，这个可以修改。

    🔹html

    • 功能：代替<html>标签，设置页面运行的前端框架，以及控制住整体页面输出
    • 属性值：framework及html标签原生属性值
    {%html framework="home:static/lib/[mod.js](http://wiki.afpai.com/pages/mod.js)"%}
{%/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最后面输出)：

    <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%}

    解析结果

    <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的属性不能用）：

    <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>

    编译之后:

    <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%}

    编译之后在页面你上可以得到

    <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语法总结（一）

          本文链接：https://www.haomeiwen.com/subject/eitjrctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|关于fis框架中fis3-smarty语法总结（一）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！