Nunjucks中的模板继承允许你创建一个基础模板(通常称为layout
),其中包含站点的通用结构,然后在子模板中扩展和覆盖特定的部分
npm install nunjucks
layout.html
,并在其中定义站点的通用结构。在基础模板中,使用{{ block }}
标签定义可替换的部分,例如头部、底部和主体内容。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
<header>
<h1>Site Header</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>Site Footer</p>
</footer>
</body>
</html>
index.html
,并在其中扩展基础模板。使用{% extends %}
标签指定要继承的基础模板,并使用{% block %}
标签覆盖基础模板中定义的部分。{% extends "layout.html" %}
{% block title %}Index Page{% endblock %}
{% block content %}
<h2>Welcome to the Index Page</h2>
<p>This is the main content of the index page.</p>
{% endblock %}
const express = require('express');
const nunjucks = require('nunjucks');
const app = express();
const env = nunjucks.configure('views', { ext: 'html' });
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
nunjucks.render
或nunjucks.renderString
方法正确渲染模板。在服务器端,Nunjucks会自动处理模板继承和块替换。领取专属 10元无门槛券
手把手带您无忧上云