在 Express 和 Node JS 中显示常见的 HTML答案

【问题标题】：Displaying common HTML in Express and Node JS在 Express 和 Node JS 中显示常见的 HTML
【发布时间】：2014-07-30 07:05:38
【问题描述】：

我想知道如何在 Express 应用程序中显示常见的 html 标头信息。我试图在我的 Web 应用程序的所有页面上显示一个通用菜单或标题，但如果不将 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.

【问题讨论】：

标签： javascript html node.js web-applications express

【解决方案1】：

如果您使用 Jade，那么您实际上不会使用路由来执行此操作，而是使用 Layouts。如果您使用 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 content 并将其替换为您的页面内容。

另外两件事要考虑：

Handlebars.js 是一种更类似于 HTML 的模板语言，它支持布局和部分，因此您可以将其用于您的目标。有几个步骤可以让它工作，但这并不难。我在这里记录了它：http://www.bearfruit.org/2014/01/20/node-js-showdown-handlebars-compared/
只需使用纯静态 HTML 文件。是的，你失去了让 Node.js 管理公共标头的能力，但是你得到了普通的 HTML。您可以将 index.html 放入您的公用文件夹，然后确保没有与之冲突的路由并将其作为您的主页。

【讨论】：

哎呀玉，我真的更喜欢 HTML 但我想我可以学习玉。这是唯一的方法吗？不知道可以用jade和HTML吗？
Jade 和 HTML 不能很好地协同工作，但您可以轻松切换到可以做到的不同视图引擎。一个缺点是，在支持局部和布局方面，Jade 是最好的集成之一。但是，Handlebars.js 确实支持它，我在这里写了一篇关于它的博文：bearfruit.org/2014/01/20/node-js-showdown-handlebars-compared，您唯一需要的非 HTML 标签是 {} 标签来利用布局和/或部分。这对于使用 Backbone 或 Angular 的单页应用程序很常见。
另一种选择是将纯 .html 文件放入公用文件夹。如果您创建 index.html 然后不包含主页视图，它将正确提供静态文件。如果这对您有用，我会更新我的答案以提及这一点。不过，这不会为标题提供可重用的位。
酷，谢谢 newz。您可以将 html 选项添加到您的答案中吗？我可能最终会使用翡翠。我只是不喜欢语法哈哈
当然可以。我也不关心语法，但如果你想要一个乐观的观点，一个好处是语法非常简洁。完成后，看到文件的紧凑性和可读性有点令人惊讶。 ;-)