Express学习（五）模板引擎swig./app.js./public/stylesheets/index.css./

./app.js

const express = require("express");
const app = express();
const swig = require("swig");
app.use(express.static('public'));
app.set('view engine', 'html');// 启动模板引擎
app.engine('html', swig.renderFile);// 用 swig 编译模板引擎

app.get('/', (req, res) => {
    res.render('index',{
        title:"主页",
        data:"Hello swig!"
    });
});

app.listen(8080, () => {
    console.log("服务已启动")
});

./public/stylesheets/index.css

body{
    background: #000;
    color: greenyellow;
    font-size: 30px;
    font-family: fantasy;
}

./views/layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    {% block head %}
    {% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

./views/index.html

{% extends 'layout.html' %}

{% block title %}index {{title}} {% endblock %}

{% block head %}
<link rel="stylesheet" href="stylesheets/index.css">
{% endblock %}

{% block content %}
<p>{{data}}</p>
{% endblock %}