在Express中配置使用art-template模板引擎

最新推荐文章于 2024-04-05 01:33:12 发布

前端设计诗

最新推荐文章于 2024-04-05 01:33:12 发布

阅读量540

点赞数

CC 4.0 BY-SA版权

分类专栏： Node.js 文章标签： Node art-template

本文链接：https://blog.youkuaiyun.com/weixin_45416217/article/details/99573845

Node.js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在Express框架中整合art-template模板引擎，包括安装配置步骤、代码示例及布局与组件的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、官网

2、项目结构

安装

npm install --save art-template
npm install --save express-art-template

3、app.js

var express = require('express')
var path = require('path')
var bodyParser =require('body-parser')
var session = require('express-session')
var router = require('./router')

// 模块中的路径标识和文件操作的相对路径标识不一致
// 模块中的路径标识就是相对于执行的node 命令所处的路径
var app = express()
app.use('/public', express.static(path.join(__dirname, './public/')))
app.use('/node_modules/', express.static(path.join(__dirname, '/node_modules')))

app.engine('html', require('express-art-template'))
app.set('views', path.join(__dirname, './views'))

app.get('/', function (req, res) {
    res.send('hello')
})

app.listen(3000, function () {
    console.log('running.............')
})

// path路径操作模块
// path.basename
// path.join 拼接路径
/**
 * 在每个模块中 
 * __dirname 可以动态获取当前文件所属目录的绝对路径
 * __filename 动态获取当前文件的绝对路径
 * 
 * 文件操作路径中相对路径就是相对于执行node 命令所处的路径
 * 在文件操作中，使用相对路径是不可靠的  
 * 解决方式就是将相对路径改为绝对路径 
 * 这里我们就可以使用__dirname 或者 __filename
 * 不受node命令所属命令所享 在拼接路径额过程中 
 * 多使用path.join()进行拼接字符串
 * 所以为了尽量避免刚才所描述的问题 大家以后在文件操作的时候统一使用动态的绝对路径
 *node中 有很多模板引擎可以使用  不是只有art-template
*/

4、layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../blog/node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css">
    {{ block 'head' }}  {{ /block }}
</head>
<body>
    {{ include  './header.html' }}

    {{ block 'content' }}
    <h1>默认内容</h1>
    {{ /block }}

    {{ include './footer.html' }}
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
    {{ block 'script' }}  {{ /block }}
</body>
</html>

5、index.html

{{ extend './layout.html' }}

<!-- 头部组件 -->
{{ block 'head' }}  
<style>
    body {
        background-color: skyblue;
    }
</style>
{{ /block }}

<!-- 内容组件 -->
{{ block 'content' }}
<div>
    <h1>index 页面组件内容</h1>
</div>
{{ /block }}

<!-- 脚本组件 -->
{{block 'script' }}
<script>
    window.alert('index 页面自己的js 脚本')
</script>
{{ /block }}

6、footer.html

<div>
    <h1>公共的底部</h1>
</div>

7、header.html

<div>
    <h1>公共的头部</h1>
</div>

8、list.html

{{ extend './layout.html' }}

{{ block 'content' }}
<div>
    <h1>列表页自己的内容</h1>
</div>
{{ /block }}