文章の目录
一、安装
npm install art-template --save
二、语法
1、输出
1.1、标准语法
{
{
value}}
{
{
data.key}}
{
{
data['key']}}
{
{
a ? b : c}}
{
{
a || b}}
{
{
a + b}}
1.2、原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
2、原文输出
原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。
2.1、标准语法
{
{
@ value }}
2.2、原始语法
<%- value %>
3、条件
3.1、标准语法
{
{
if value}} ... {
{
/if}}
{
{
if v1}} ... {
{
else if v2}} ... {
{
/if}}
3.2、原始语法
<% if (value) {
%> ... <% } %>
<% if (v1) {
%> ... <% } else if (v2) {
%> ... <% } %>
4、循环
4.1、标准语法
{
{
each target}}
{
{
$index}} {
{
$value}}
{
{
/each}}
4.2、原始语法
<% for(var i = 0; i < target.length; i++){
%>
<%= i %> <%= target[i] %>
<% } %>
5、子模板
5.1、标准语法
{
{
include './header.art'}}
{
{
include './header.art' data}}
5.2、原始语法
<% include('./header.art') %>
<% include('./header.art', data) %>
6、模板继承
6.1、标准语法
{
{
extend './layout.art'}}
{
{
block 'head'}} ... {
{
/block}}
6.2、原始语法
<% extend('./layout.art') %>
<% block('head', function(){
%> ... <% }) %>
6.3、示例
<!--layout.art-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{
{
block 'title'}}My Site{
{
/block}}</title>
{
{
block 'head'}}
<link rel="stylesheet" href="main.css">
{
{
/block}}
</head>
<body>
{
{
block 'content'}}{
{
/block}}
</body>
</html>
<!--index.art-->
{
{
extend './layout.art'}}
{
{
block 'title'}}{
{
title}}{
{
/block}}
{
{
block 'head'}}
<link rel="stylesheet" href="custom.css">
{
{
/block}}
{
{
block 'content'}}
<p>This is just an awesome page.</p>
{
{
/block}}
渲染 index.art 后，将自动应用布局骨架。
三、模板配置
template.defaults
1、模板根目录
// 模板根目录。如果 filename 字段不是本地路径，则在 root 查找模板
root: '/',
2、模板后缀名
// 默认后缀名。如果没有后缀名，则会自动添加 extname
extname: '.art',
3、导入的模板变量
// 导入的模板变量
imports: runtime
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！