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

1、官网

2、在Express中配置使用art-template模板引擎_第1张图片

安装

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


<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>Documenttitle>
    <link rel="stylesheet" href="../blog/node_modules/[email protected]@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 }}

你可能感兴趣的:(Node.js,Node,art-template)