jade模板引擎简要介绍,DotLiquid模板引擎简单介绍

DotLiquid是三个在.Net Framework上运营的沙盘引擎,采取Ruby的Liquid语法,这一个语法遍布的用在Ruby on rails和Django等网页框架中。
DotLiquid相比于Mvc默许模板引擎Razor的裨益有:

模板引擎是三个库,可能三个行使一定的准则或然语言来解释多少并渲染试图的框架。模板引擎管理过的最后结出是三个视图页面,也等于HTML页面大概客户图形分界面GUI。在MVC框架中,模板属于View层。
利用模板的好处:几个模板可以动态变化Infiniti八个页面,何况方便全局性的修改。
jade是nodejs的模板引擎,采纳空格缩进的准则
标签
jade每行开始都会被默许解释成HTML标签,不用<></>和配成对,能够省去成千上万键盘输入
变量与数码
默许jade传入的数码称为locals,借使要输入一个变量须求接纳=表示。
例如:

  • 因为无需编写翻译到程序集再载入
    • 第壹遍渲染速度高速
    • 不会招致内部存款和储蓄器泄漏
  • 能够在另各省方采用
    • 无需先希图WebViewPage,ViewContext等复杂的上下文对象
h1=title
p= body

DotLiquid的官方网站是,开源协商是特别宽松的MS-PL。

** 属性**
jade属性能够透过在标签后边增加()达成,格式是(name=value),多个属于通过,分隔离
例如:

身体力行代码

自身创制三个应用了DotLiquid的示例Mvc项目,完整代码能够翻开这里。
以下的事必躬亲将以Mvc中的Action为单位,都存放在HomeController下。

div(id="content", class="main")
//如果属性value为变量,只需要书写变量的名字即可,例如下面的url,isActive,isChecked
a(herf=url, data-active=isActive)
label
    input(type="checkbox", checked=isChecked)
    //如果一行输入不完,可以通过|继续在新的一行中输入HTML内容,入下处的|
    | yes/no

最基础的施用

Template.Parse能够把字符串分析为模板对象,再使用Render把模版对象渲染为字符串。
开采页面能够望见Hello, World!

public ActionResult HelloWorld()
{
    var template = Template.Parse("Hello, {{ name }}!");
    var result = template.Render(Hash.FromAnonymousObject(new { name = "World" }));
    return Content(result);
}

字面量
为了方便id和class能够行使#和.代替
例如:

选拔过滤器

|背后的正是过滤器,过滤器能够连锁起来使用。
escape过滤器用于做html编码,幸免name中的"<"当成是html标签描画。
upcase过滤器把字符串中的字母全体更动为大写。
开垦页面能够瞥见Hello, <WORLD>!

public ActionResult HelloFilter()
{
    var template = Template.Parse("Hello, {{ name | escape | upcase }}!");
    var result = template.Render(Hash.FromAnonymousObject(new { name = "<World>" }));
    return Content(result);
}
//div(id="content")等同于如下
div#content
//p(class="lead center")等同于如下
p.lead.center

概念过滤器

DotLiquid协理自定义过滤器,首先供给叁个过滤器类型,当中的函数名称正是过滤器名称。
过滤器协助八个参数和默许参数。

public class DotliquidCustomFilter
{
    public static string Substr(string value, int startIndex, int length = -1)
    {
        if (length >= 0)
            return value.Substring(startIndex, length);
        return value.Substring(startIndex);
    }
}

在网址运营的时候把那一个过滤器注册到DotLiquid

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        // 在原有的代码下添加
        Template.RegisterFilter(typeof(DotliquidCustomFilter));
    }
}

那一个事例会显得Hello, orl!

public ActionResult CustomFilter()
{
    var template = Template.Parse("Hello, {{ name | substr: 1, 3 }}!");
    var result = template.Render(Hash.FromAnonymousObject(new { name = "World" }));
    return Content(result);
}

文本
透过利用|能够出口原始文本
script或style代码块
能够行使script或style标签写入内容块
例如:

选取标签

DotLiquid中有二种标签,一种是普普通通标签(Block),一种是自闭合标签(Tag)。
此处的assign是自闭合标签,if是日常标签,普通标签须求用end+标具名闭合。
呈现内容是Hello, World!

public ActionResult HelloTag()
{
    var template = Template.Parse(@"
        {% assign name = 'World' %}
        {% if visible %}
        Hello, {{ name }}!
        {% endif %}
    ");
    var result = template.Render(Hash.FromAnonymousObject(new { visible = true }));
    return Content(result);
}
  script.
      //下面可以写入js代码
      console.log("Test");

自定义标签

那边本人将定义三个自闭合标签conditional,那些标签有八个参数,即便第贰个参数创制则描画第4个不然描画第多少个参数。

public class ConditionalTag : Tag
{
    public string ConditionExpression { get; set; }
    public string TrueExpression { get; set; }
    public string FalseExpression { get; set; }

    public override void Initialize(string tagName, string markup, List<string> tokens)
    {
        base.Initialize(tagName, markup, tokens);
        var expressions = markup.Trim().Split(' ');
        ConditionExpression = expressions[0];
        TrueExpression = expressions[1];
        FalseExpression = expressions.Length >= 3 ? expressions[2] : "";
    }

    public override void Render(Context context, TextWriter result)
    {
        var condition = context[ConditionExpression];
        if (!(condition == null || condition.Equals(false) || condition.Equals("")))
            result.Write(context[TrueExpression]);
        else
            result.Write(context[FalseExpression]);
    }
}

在网址运行时把那一个标签注册到DotLiquid

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        // 在原有的代码下添加
        Template.RegisterTag<ConditionalTag>("conditional");
    }
}

那么些事例会显得Bar

public ActionResult CustomTag()
{
    var template = Template.Parse("{% conditional cond foo bar %}");
    var result = template.Render(Hash.FromAnonymousObject(new { cond = false, foo = "Foo", bar = "Bar" }));
    return Content(result);
}

javascript代码
能够选取-,=,!=最早表示注入js代码。可是那些供给在意制止跨站脚本XSS攻击。
只是if, unless语句能够不要接纳前缀也意味行业内部js代码
例如:

模板文件

DotLiquid也接济从文件读取模板,必要先定义四个TemplateFileSystem

public class DotliquidTemplateFileSystem : IFileSystem
{
    public string ReadTemplateFile(Context context, string templateName)
    {
        var path = context[templateName] as string;
        if (string.IsNullOrEmpty(path))
            return path;
        var fullPath = HttpContext.Current.Server.MapPath(path);
        return File.ReadAllText(fullPath);
    }
}

设置DotLiquid使用自定义的文件系统

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        // 在原有的代码下添加
        Template.FileSystem = new DotliquidTemplateFileSystem();
    }
}

再定义三个调节器基类

public abstract class DotliquidController : Controller
{
    public ContentResult DotliquidView(string path = null, object parameters = null)
    {
        // 路径为空时根据当前的Action决定
        if (string.IsNullOrEmpty(path))
        {
            var controller = RouteData.Values["controller"];
            var action = RouteData.Values["action"];
            path = $"~/DotliquidViews/{controller}/{action}.html";
        }
        // 根据路径读取模板内容
        var templateStr = Template.FileSystem.ReadTemplateFile(new Context(), "'" + path + "'");
        // 解析模板,这里可以缓存Parse出来的对象,但是为了简单这里就略去了
        var template = Template.Parse(templateStr);
        // 描画模板
        Hash templateParameters;
        if (parameters is IDictionary<string, object>)
            templateParameters = Hash.FromDictionary((IDictionary<string, object>)parameters);
        else
            templateParameters = Hash.FromAnonymousObject(parameters ?? new { });
        var result = template.Render(templateParameters);
        // 返回描画出来的内容
        return Content(result, "text/html");
    }
}

现行反革命能够在调整器中运用基于DotLiquid的模版了

public ActionResult HelloTemplateFile()
{
    return DotliquidView();
}

上边会回到文件~/DotliquidViews/Home/HelloTemplateFile.html的内容

Hello, Template!
- var arr = ["a", "b", "c"]
//if语句可以不用-,=,!=符号标注  
if(arr.length!=0)
  p "arr is null"
else 
  p "arr is not null"

嵌入子模板

为了落到实处代码的选定,DotLiquid的模版还能放置其余子模板,嵌入需求使用include标签。
以下例子会议及展览示Hello, Include!

public ActionResult HelloInclude()
{
    return DotliquidView();
}

文件~/DotliquidViews/Home/HelloInclude.html的内容

Hello, {% include "~/DotliquidViews/Home/HelloIncludeContents.html" %}!

文件~/DotliquidViews/Home/HelloIncludeContents.html的内容

Include

注释
经过//呈现注释内容,//-不展现注释内容

此起彼落父模板

除外嵌入子模版,还能够促成布局(Layout)格局的继续父模板,承接要求使用extends和block标签。
以下例子会回到Html<div class="layout"><h1>Here is title</h1><p>Here is body</p></div>

public ActionResult HelloExtends()
{
    return DotliquidView();
}

文件~/DotliquidViews/Home/HelloExtendsLayout.html的内容

<div class="layout">
    <h1>
        {% block title %}
        Default title
        {% endblock %}
    </h1>
    <p>
        {% block body %}
        Default body
        {% endblock %}
    </p>
</div>

文件~/DotliquidViews/Home/HelloExtends.html的内容

{% extends "~/DotliquidViews/Home/HelloExtendLayout.html" %}

{% block title %}
Here is title
{% endblock %}

{% block body %}
Here is body
{% endblock %}

each语句
与if相似, 在jade中的迭代能够总结的写each语句,准绳:each arg index in args

画画自定义对象

请先看以下的例子

public class ExampleViewModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

public ActionResult CustomObject()
{
    var template = Template.Parse("Name: {{ model.Name }}, Age: {{ model.Age }}");
    var model = new ExampleViewModel() { Name = "john", Age = 35 };
    var result = template.Render(Hash.FromAnonymousObject(new { model }));
    return Content(result);
}

你只怕预料这几个事例会显得Name: john, Age: 35,但事实上运作时会给出以下错误

Name: Liquid syntax error: Object 'Dotliquid.Example.Dotliquid.ExampleViewModel' is invalid because it is neither a built-in type nor implements ILiquidizable, Age: Liquid syntax error: Object 'Dotliquid.Example.Dotliquid.ExampleViewModel' is invalid because it is neither a built-in type nor implements ILiquidizable

那是因为DotLiquid为了安全性,私下认可不容许描画未经注册的指标,那样尽管模板由前端使用者提供也不会招致新闻外泄。
为了缓和地方的失实,需求把ExampleViewModel挂号为可描画的靶子。
而外行使RegisterSafeType登记,你也能够让ExampleViewModel继承ILiquidizable,在有的光景下会更合乎。

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        // 在原有的代码下添加
        Template.RegisterSafeType(typeof(ExampleViewModel), Hash.FromAnonymousObject);
    }
}

过滤器
文件块的过滤供给设置第三方的过滤器

写在最后

DotLiquid是三个世故相当高而且注重比比较少的模版引擎,即使尚未Razor流行,但大气的单元测验保险它能够经得起实际的选择。
近日利用了DotLiquid的连串有

  • Pretzel静态网址生成工具
  • Nancy网页框架
  • ZKWeb网页框架

现阶段DotLiquid计划晋级2.0版本,作者正在召集PENVISION,假诺您有意向能够到DotLiquid的github看看。

读取变量
读取方法:#{name}

case
用法:

case value
when value1
defaule

函数mixin
mixin产生局地HTML代码的函数,而且能够带参数。
声称语法:mixin name(param, param2,...)
利用语法:+name(data)

include
include是把逻辑提取到独门文件之中的一种艺术,首纵然为了让多少个公文重用它。
例如:include ./include/header
留意, 这里并无需给名字或然路径增加双引号只怕单引号。
include操作是在编译时管理,由此,不可能在文书名和文书路线中使用变量。

extend
extend是一种自底而上的不二秘诀,与include相反,包罗的文件决定要替换的主文件的哪一部分。
格式:extend filename, block blockname

本文由明仕msyz手机版发布于旅游-环球旅讯,转载请注明出处:jade模板引擎简要介绍,DotLiquid模板引擎简单介绍

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。