Saker

Full documentation is at https://eshengsky.github.io/saker/.
完整文档请查看https://eshengsky.github.io/saker/。

Saker is a template engine for Node.js and browsers, it is lightweight, powerfull and easy to use.
The greatest feature is, Saker minimizes the number of characters and keystrokes required in a file, and enables a fast, fluid coding workflow. Unlike most template syntaxes, you do not need to interrupt your coding to explicitly denote server blocks within your HTML. See Example for preview.
Saker是一个可以用于Node.js和浏览器端的模板引擎，轻量、强大、易于使用。其最大的特点是，尽可能地减少了模板文件中的额外字符和击键数，支持快速流畅的编码流程。不同于大多数的模板引擎语法，你无须打断你的编码来显式表明HTML中的服务器代码 —— Saker能够智能识别哪些是HTML哪些是服务器脚本。可以查看示例代码作为预览。

Comparison 比较

Let's compare Saker with other hot template engines.
Saker和当前较流行的几款模板引擎（Jade、Handlebars、ejs）的比较。

	Jade (Pug)	Handlebars	ejs	Saker
Example 示例	.item if(data.code > 0) { a(href='/product/' + data.id) span=data.productName }	// add custom helper gto 添加自定义helper handlebars.registerHelper("gto", function(code){ return code > 0; }); // view template 视图模板 <div class='item'> {{#gto data.code}} <a href='/product/{{data.id}}'> <span>{{data.productName}}</span> </a> {{/gto}} </div>	<div class='item'> 0){%> <a href='/product/'> <span></span> </a> </div>	<div class='item'> @if(data.code > 0){ <a href='/product/@(data.id)'> <span>@data.productName</span> </a> } </div>
Layout, Partial & Cache 母版页，局部页和缓存	✔	✔	✔	✔
Native HTML 原生HTML	Not native HTML. Jade create new grammar, you and your team members must learn it firstly. 非原生HTML语法。Jade创造了新的语法，你和你的所有团队成员都必须首先学习这些语法才能开始工作。	✔	✔	✔
Expression support 表达式支持	✔	Expression is not supported in Handlebars, such as, '{{#if data.code > 0}}' is wrong, you have to use helper instead. Handlebars不支持表达式语法，例如：'{{#if data.code > 0}}' 就是语法错误的，你不得不使用自定义helper来实现。	✔	✔
Easy to use 易于使用	Jade removes '', it is all dependent on newline & whitespace to distinguish between the level of tags, it's easy to make a mistake, and usually you need to use a tool (such as 'HTML to Jade') to translate HTML to jade. So it looks brief, but not easy to use. Jade语法移除了HTML中的''，它完全依赖于换行和空格来区分标签的层级关系，这很容易出错。另外，通常你还需要使用某种工具（例如'HTML to Jade'）来将HTML转换成Jade。所以Jade看上去简约，但并不易于使用。	✔	You have to wrap all backend codes within '' like ASP in ejs template, even if the '}' symbol must be '', so ejs is easy to get start, but not convenient to write and read, especially the template contains complex logic. 在ejs模板中，所有的后端代码都必须放在''中，就跟ASP一样，即便是一个单独的'}'符号，也必须写成''。因此，ejs的上手非常容易，但读写并不是那么方便，尤其是在模板文件中包含了复杂逻辑的情况下。	✔

Live Demo 在线演示

You can test drive Saker online here.
你可以在这里测试Saker。

Installation 安装

$ npm install saker

Example 示例

This is a very simple and representative sample, it shows a name list when code is 1, and if the gender is female, the <li> tag has a class 'pink'.
这是一个非常简单又很典型的例子，当code的值为1时会显示一个名单，如果gender字段是female，则<li>标签还会添加'pink'类。

data 数据

{
    "code" : 1,
    "data": [{
        "id" : 1,
        "name" : "Sky",
        "gender" : "male"
    }, {
        "id" : 2,
        "name" : "Kathy",
        "gender" : "female"
    }]
}

template 模板

@{ this.layout = null }
 
<h2>Name List</h2>
<article>
    @if(code === 1) {
        <ul>
            @{
                data.forEach(function(person) {
                    <li class="@(person.gender === 'female' ? 'pink' : '')">
                        <a href="/details/@person.id">@person.name</a>
                    </li>
                });
            }
        </ul>
    } else {
        <p>Sorry, no data!</p>
    }
</article>

result 结果

<h2>Name List</h2>
<article>
    <ul>
        <li>
            <a href="/details/1">Sky</a>
        </li>
        <li class="pink">
            <a href="/details/2">Kathy</a>
        </li>
    </ul>
</article>

For more examples, please see examples folder, it includes 3 examples each based on:
更多示例请查看examples目录，其包含了3个示例分别基于：

• the native Node.js server 原生Node.js server
• the Express framework Express框架
• the browser side 浏览器端

Syntax 语法

As you see above, Saker uses '@' as the default mark symbol (support custom) - the codes after it represent server-side scripts. The following is the syntax cheat sheet, for more details you can see Syntax Reference.
正如你在上面看到的，Saker使用'@'作为默认的标记符号（支持自定义）——在这之后的代码都视作是服务器端脚本。下面是一个语法速查，更详细的文档请查看Syntax Reference。

Syntax 语法	Example 示例	Remarks 说明
Implicit expression 隐式表达式	@name	Simply prefix with the '@' character to access a variable or a function. Be aware that the output will be automatically HTML encoded. 简单地将'@'字符作为前缀即可访问一个变量或者函数。注意：输出内容会被自动转义。
Explicit expression 显式表达式	@('name: ' + name)	The explicit impression should be used when you want to do something that might confuse the parser. For instance, if you need to access a variable in the middle of a string or if you want to do calculations/modifications to the output. 当你觉得你的代码可能会使解析器理解有误，你就应该使用显式表达式。例如，你需要在字符串当中插入变量，或者你想要对变量进行计算或修改后再输出。
Unencoded expression 不转义表达式	@this.raw(name)	The same as the implicit expression, but the output will not be HTML encoded. 类似隐式表达式，区别在于输出结果不会被转义。
code blocks 代码块	@{     var name = 'Saker';     <span>@name</span> }	A Saker code block starts with a combination of the '@' character and the '{' character and ends with the '}' character. Inside of this, you can writing server-side scripts. Amazing, you can mix HTML markup and the server-side scripts, Saker can distinguish them intelligently! Saker代码块使用'@'和'{'联合字符作为开始，以'}'字符结束。在这之间，你可以书写服务端脚本。你可以混淆HTML标记和服务端脚本，Saker能够智能区分它们！
Special code blocks 特殊代码块	@if (code == '1') {     <span>Has data!</span> } else {     <span>No data!</span> }	It's the special style code blocks, the example left is the same as: 这是特殊形式的代码块，左侧的示例等同于： @{     if (code == '1') {         <span>Has data!</span>     } else {         <span>No data!</span>     } } Special code blocks support: @if...else if...else, @for..., @while..., @do...while..., @switch..., @try...catch...finally..., total 6 types. 特殊代码块支持：@if...else if...else, @for..., @while..., @do...while..., @switch..., @try...catch...finally..., 一共6种形式。
Plain text inside a code block 代码块中的纯文本	<text>Plain text goes here...</text>	Within a code block, you can output plain text by surrounding it with <text> tags, the tag itself won't be included in the output to the browser. 在代码块中，你可以通过将文本包裹在<text>标签中来输出纯文本。标签本身不会输出到浏览器端。
Server-side comment 服务器端注释	@// This is inline comment @*     Here's a Saker server-side multi-line comment     It won't be rendered to the browser *@	If you need to, you can easily write Saker comments in your code. They are a great alternative to HTML comments, because the Saker comments won't be included in the output to the browser. 如果需要的话，你可以轻易地书写Saker注释，这是替换HTML注释的一个很好的选择，因为Saker注释不会输出到浏览器端。
Output '@' 输出'@'	eshengsky@@163.com	Double '@' will output the symbol '@'. 连续的2个'@'将输出'@'符号。

Test 测试

You can execute the following script in terminal to run test.
你可以在终端执行下面的脚本来运行测试。

$ npm test

License 许可

The MIT License (MIT)

Copyright (c) 2016 Sky

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.