javascript - 在 Express 和 Node JS 中显示常见的 HTML

Question

我想知道如何在 Express 应用程序中显示常见的 html header 信息。我试图在我的网络应用程序的所有页面上显示一个通用的菜单或标题，但不知道如何在不将 html 复制并粘贴到我的服务器上的每个 html 文件中的情况下执行此操作。我相信这可以通过路线来完成。我的应用程序的结构如下:

/ web root
   - server.js // main web server
   /public
     - css, 3rd party js files, images
   /routes
     - index.js includes renders to seperate pages
   /views
     - jade and html files.

Answer 1

如果您使用 Jade，那么您实际上不会使用路线来执行此操作，而是使用布局。如果您使用express-cli工具生成项目，那么您会注意到views/homepage.jade文件使用layout.jade文件来执行您期望的操作。

如果您想要一个更复杂的示例，这是我制作的基于 Bootstrap 的演示项目:https://github.com/newz2000/template-test-jade

无论哪种情况，想法都是您有一个使用如下语法的文件:

extends layout

block content
    your page's content here

然后你的layout.jade文件将会有这样一行:

block content

当您 res.render() 第一个文件时，它将首先渲染布局并从layout.jade 文件中获取 block 内容，并将其替换为页面的内容。

另外两件事需要考虑:

1. Handlebars.js 是一种更像 HTML 的模板语言，支持布局和部分，因此您可以利用它来实现您的目标。有几个步骤可以让它发挥作用，但这并不难。我已将其记录在这里:http://www.bearfruit.org/2014/01/20/node-js-showdown-handlebars-compared/

2. 只需使用纯静态 HTML 文件。是的，你失去了让 Node.js 管理公共(public) header 的能力，但你得到了简单的 HTML。您可以将一个index.html放入您的公共(public)文件夹中，然后确保没有与其冲突的路由，它将作为您的主页。