如何使用Node+Express渲染多个视图

2024-05-01

我有一个 header.html 和一个 footer.html 我希望与其他视图一起呈现。我想使用 Node+Express 来完成这个任务。 我尝试通过以下方式渲染视图,但显然它不起作用:

var express = require('express');
var app = express();
app.get('/', function(req, res) {
    res.render('header');
    res.render('home');
    res.render('footer');
});

您必须为您的项目设置一个模板引擎。 您可以使用Swig http://paularmstrong.github.io/swig/docs/例如,它工作得很好并且有很好的文档记录。

下面的示例向您展示了如何设置它以及如何从布局或母版页调用部分视图。

通过执行以下操作来安装它npm install swig --save在你的项目根目录下。 您需要安装一个名为 consolidate 的附加库,它充当不同模板引擎库之间的接口,它是 Express 应用程序中的标准。

npm install consolidate --save

需要主脚本中的库

consolidate = require('consolidate');
swig = require('swig');

配置如下:

app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views'); // set your view path correctly here

然后你可以将页面渲染为:

app.get('/', function (req, res) {
  res.render('index', {});
});

(示例取自 Swig 的作者 Paul Armstrong github 页面 https://github.com/paularmstrong/swig/tree/master/examples/express) 布局.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock %} - Example</title>
</head>
<body>
    <header>
        <h1>{% block title %}{% endblock %}</h1>
        {% block header %}{% endblock %}
        <nav>
            <ul>
                <li><a href="/">Home Page</a></li>
                <li><a href="/people">People</a></li>
            </ul>
        </nav>
    </header>

    <section role="main">
        {% block body %}{% endblock %}
    </section>

</body>
</html>

索引.html:

{% extends 'layout.html' %}

{% block title %}Home Page{% endblock %}

这样,您就可以根据需要解耦您的视图:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用Node+Express渲染多个视图 的相关文章

随机推荐

  • 优化数组压缩

    假设我有一个数组k 1 2 0 0 5 4 0 我可以按如下方式计算掩码m k gt 0 1 1 0 0 1 1 0 仅使用掩码 m 和以下操作 左移 右移 And Or 加 减 乘 我可以将 k 压缩为以下形式 1 2 5 4 以下是我目
  • 使用快速同步 h264_qsv 编码器时 ffmpeg avcodec_encode_video2 挂起

    当我使用 mpeg4 或 h264 编码器时 我能够使用 ffmpeg 3 1 0 的 API 成功编码图像以生成有效的 AVI 文件 但是 当我使用快速同步编码器 h264 qsv 时 avcodec encode video2 有时会挂
  • 改进/修复 C 样式块注释的正则表达式

    我正在 用 C 编写一个简单的解析器来处理看起来很像经典 C 的脚本语言 在我拥有的一个脚本文件中 我用来识别 块注释 的正则表达式会进入某种无限循环 长时间占用 100 的 CPU 我使用的正则表达式是这样的 r n r n 关于为什么这
  • 从 C++ 代码调用 Objective C 函数

    我用谷歌搜索了一下 找到了关于这个主题的一百万个结果 但这些页面都没有帮助我 我认为我有一个非常普遍的问题 我正在研究音频编程 特别是使用音频队列 我的程序的目的对于解释问题并不重要 但简而言之 当我尝试从 C 代码调用 Objective
  • 如何在同一服务器上将数据库备份和恢复为副本?

    我有一个 SQL2005 Express 数据库 我想在同一实例上创建它的副本 您如何使用脚本来做到这一点 我已经有一个用于生成备份的脚本 但恢复失败 错误 消息 3234 16 级 状态 2 第 2 行 逻辑文件 MyDB data 不是
  • 用于编辑代码的 Automator 到 Applescript

    只是想知道我是否可以将 Automator 中的 看我做 事件转换为 applescript 然后编辑生成的代码 我有一个在 Google 中输入查询 即 Apple1 的记录 但我希望查询为记录的每个循环增加 因此结果是 Apple1 然
  • Android Test Orchestrator 无法与 Android X 配合使用

    我最近将我的项目迁移到使用 AndroidX 并使用以下文档为 gradle 上的 espresso 测试配置了测试编排器 https developer android com training testing junit runner
  • 为什么 Xcode 在构建到设备时会复制未更改的资源?

    我正在处理一个相当大的 资源较多的 iOS 项目 我不禁注意到 Xcode 复制了数百个资源 纹理 精灵表 声音文件等 这些资源自上次以来根本没有改变我构建该设备的时间 当每个构建需要 2 4 分钟才能在设备上弹出时 这使得编码变得非常非常
  • 当对象一个在另一个之上时,从单个 2D 图像或来自 RGBD 相机的点云对已知 3D CAD 对象进行实时 6D 姿态估计?

    我正在开展一个研究项目 需要在拾取和放置任务中实时估计物体的 6DOF 姿态 姿态必须是实时估计的 并且物体可以是一个在另一个之上并且是相同的 所以我必须获得顶部物体的位置和方向 问题是物体是相同的 PPVC 块 在建筑领域 但好处是它们的
  • 从物理路径获取相对虚拟路径

    如何从asp net中的物理路径获取相对虚拟路径 相反的方法如下 Server MapPath Virtual Path Here 但是上面的方法的逆过程是什么呢 Maybe 这个问题 https stackoverflow com que
  • caret::train:为 mlpWeightDecay(RSNNS 包)指定更多非调整参数

    我在使用插入符号包和 RSNNS 包中的 mlpWeightDecay 方法指定学习率时遇到问题 mlpWeightDecay 的调整参数是大小和衰减 将大小保持为 4 并在 c 0 0 0001 0 001 0 002 上调整衰减的示例
  • R 函数查找拟合常数的合适值

    library ggplot2 set seed 1 dataset lt data frame X rnorm 1000 dfun lt function x a b 1 sqrt 2 pi b exp 0 5 x a 2 2 b 2 g
  • 为什么我没有这个类,而它应该在 rt.jar 中?

    所以 我正在尝试在 java 中实现 LDAP 连接 这需要com sun jndi ldap LdapCtxFactory 贾芬德表明LdapCtxFactory应包含在rt jar 据我了解 这是java SDK的基础 Eclipse
  • 如何将参数传递给 ActiveModel 序列化器

    我在用着主动模型序列化器 https github com rails api active model serializers 我有一个模型活动 其中有很多活动 我想返回前 n 个活动的事件 我想我应该将参数 n 传递给事件序列化器 版本
  • 尝试将稀疏 df 保存到 hdf5 时,获取“SparseDtype”对象没有属性“itemsize”?

    我正在尝试将大型稀疏数据帧保存到 hdf5 文件 但出现归因错误 one hot pd get dummies my DF columns cat sparse True one hot to hdf content data h5 tab
  • “箭头函数”和“函数”是否等效/可互换?

    ES2015中的箭头函数提供了更简洁的语法 我现在可以用箭头函数替换所有函数声明 表达式吗 我需要注意什么 例子 构造函数 function User name this name name vs const User name gt th
  • 如何在AWS批处理中定义根卷大小

    我正在使用 AWS Batch 但发现根卷大小对于我的任务来说太小 我尝试创建一个新的计算环境 作业队列 但没有任何选项来设置卷大小 我尝试更改启动配置here https console aws amazon com ec2 autosc
  • Eclipse 编辑器选项卡环绕

    I can switch editors in Eclipse by using Ctrl PgUp PdDown 但是 当选择最左边的编辑器选项卡时 我无法再将一个选项卡切换到左侧并环绕以到达最右边的选项卡 如何使编辑器选项卡环绕 The
  • 用 Java 创建 PDF 的缩略图

    我正在寻找一个 Java 库 它可以获取 PDF 并从第一页创建缩略 图 PNG 我已经看过 JPedal 但其疯狂的许可费完全令人望而却步 我目前正在使用 iText 来操作 PDF 文件 但我相信它不会生成缩略图 我可以在命令行上使用
  • 如何使用Node+Express渲染多个视图

    我有一个 header html 和一个 footer html 我希望与其他视图一起呈现 我想使用 Node Express 来完成这个任务 我尝试通过以下方式渲染视图 但显然它不起作用 var express require expre