32450新蒲京网站jade模板引擎简介

2019-10-18 15:02 来源:未知

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,那么些标签有四个参数,如若第叁个参数创立则描画首个不然描画第三个参数。

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静态网站生成工具
  • 南茜网页框架
  • ZKWeb网页框架

近些日子DotLiquid希图晋级2.0版本,小编正在召集P哈弗,如果您有意向能够到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

TAG标签:
版权声明:本文由32450新蒲京网站发布于葡萄游戏厅_卡牌游戏,转载请注明出处:32450新蒲京网站jade模板引擎简介