模板引擎(笔记了解)

一、模板引擎的基础概念

1、模板引擎

模板引擎是第三方模块
让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护
模板引擎(笔记了解)_第1张图片

2、art-template模板引擎

  • 在命令行工具中使用npm install art-template 命令进行下载
  • 使用const template = require(‘art-template’)引入模板引擎
  • 告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);

3、art-template代码示例

// 导入模板引擎模块
const template = require('art-template');
//将特定模板与特定数据进行拼接
const html = template('./views/index.art', {
    data: {
        name: '张三',
        age: 20
    }
});

index.art文件

<div>
	<span>{{data.name}}span>
	<span>{{data.age}}span>
div>

二、模板引擎语法

1、输出

将某项数据输入在模板中,标准语法和原始语法如下:

  • 标准语法:{{ 数据 }}
  • 原始语法:<%= 数据 %>
    
    <h2>{{ value }}h2>
    <h2>{{ a ? b : c}}h2>
    <h2>{{ a + b }}h2>

    
    <h2><%= value %>h2>
    <h2><%= a ? b : c %>h2>
    <h2><%= a + b>h2>

2、原文输出

如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出

  • 标准语法: {{ @数据 }}
  • 原始语法:<%- 数据 %>

3、条件判断

在模板中可以根据条件来决定显示哪块HTML代码


{{if 条件}} ... {{/if}}
{{if 条件1}} ... {{else if 条件2}} ... {{/if}}


<% if(value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
{{if age > 18}}
    年龄大于18
{{else if age < 15 }}
    年龄小于15
{{/if}}

4、循环

  • 标准语法: {{each 数据}} {{/each}}
  • 原始语法: <% for() { %> <% } %>
    模板引擎(笔记了解)_第2张图片
<ul>
    {{each users}}
        <li>
            {{$value.name}}
            {{$value.age}}
            {{$value.sex}}
        li>
    {{/each}}
ul>

5、子模版

使用子模版可以将网站公共区块(头部、底部)抽离到单独的文件中

  • 标准语法:{{include ‘模板’}}
  • 原始语法:<%include(‘模板’)%>
    模板引擎(笔记了解)_第3张图片

6、模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承股价文件
模板引擎(笔记了解)_第4张图片
骨架文件layout.art


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Blog - Content Managertitle>
    <link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/admin/css/base.css">
    {{block 'link'}}{{/block}}
head>

<body>
    {{block 'main'}}{{/block}}
    <script src="/admin/lib/jquery/dist/jquery.min.js">script>
    <script src="/admin/lib/bootstrap/js/bootstrap.min.js">script>
    {{block 'script'}} {{/block}}
body>

html>

user.art
将main部分,放到骨架对应位置


{{extend './common/layout.art'}}
{{block 'main'}}
    
    <div class="content">
        <div class="main">
        	<p>我是主题内容p>
        div>
    div>
    
{{/block}}

7、模板配置

  • 向模板中导入变量 template.defaults.imports.变量名 = 变量值;
  • 设置模板根目录 template.defaults.root = 模板目录
  • 设置模板默认后缀 template.defaults.extname = ‘.art’

三、第三方模块 router

功能:实现路由
使用步骤:

  1. 安装 npm install router
  2. 获取路由对象
  3. 调用路由对象提供的方法创建路由
  4. 启用路由,使路由生效
    模板引擎(笔记了解)_第5张图片

四、第三方模块 serve-static

功能:实现静态资源访问服务
步骤:

  1. 安装 npm install serve-static
  2. 引入serve-static模块获取创建静态资源服务功能的方法
  3. 调用方法创建静态资源服务并指定静态资源服务目录
  4. 启用静态资源服务功能
    模板引擎(笔记了解)_第6张图片

你可能感兴趣的:(模板引擎(笔记了解))