nodejs+art-template配置模板引擎

亦凉 2022-08-28 13:49 187阅读 0赞

## 什么是art-template ##

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

[http://aui.github.io/art-template/zh-cn/docs  
][http_aui.github.io_art-template_zh-cn_docs]

## 开源项目 ##

该项目已收藏在[【nodejs study】nodejs开源学习项目][nodejs study_nodejs]中的`nodejs_express_art-template`

## 安装art-template ##

npm install art-template --save
    npm install express-art-template --save
    //或者
    yarn add art-template
    yarn add express-art-template

## 准备工作 ##

使用Express应用生成器初始化项目，或者参考一下入门[【node.js+express入门】][node.js_express]

## 目录结构大致如下：   ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]   启动项目 ##

在express初始化的情况下，一般使用`npm start` 或者`yarn start`

"scripts": {
        "start": "node ./bin/www"
      },

## 配置和实践art-template ##

修改app.js一下，设置监听端口`app.listen`，设置模板引擎为`art-template`

新增一个intex.html页面，插入变量

<!DOCTYPE html>
    <html>
      <head>
        <title>{
       {title}}</title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <h1>{
       {title}}</h1>
        <p>Welcome to {
       {blog}}</p>
      </body>
    </html>

使用模板引擎渲染页面已经传递变量

var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    router.get('/', function(req, res, next) { 
      res.render('index', {  title: 'node.js+art-template',blog: 'zhengkai.blog.csdn.net' });
    });
    
    module.exports = router;

效果预览  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_17_color_FFFFFF_t_70_g_se_x_16]

[http_aui.github.io_art-template_zh-cn_docs]: http://aui.github.io/art-template/zh-cn/docs/
[nodejs study_nodejs]: https://github.com/moshowgame/nodejs-study
[node.js_express]: https://blog.csdn.net/moshowgame/article/details/119978421
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3fda4db416574cf784f56b8ad0365306.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8b529e8181494a03bec151b10520423f.png