当前位置: 首页 > 面试题库 >

Node.js + Express + Handlebars.js +部分视图

厉熠彤
2023-03-14
问题内容

我正在尝试使用Handlebars.js作为服务器模板引擎,使用Node.js | Express创建一个简单的HelloWorld项目。

问题是我找不到使用此类链的任何示例,尤其是在使用多视图时。

例如,我想定义标题视图:

<header>
  <span>Hello: {{username}}</span>
</header>

并将其与其他视图一起用于每个页面。

也许我在以错误的方式考虑这些视图,我认为该视图是一种控件,可以在任何其他视图内的任何页面上重用。

我感谢我可以从中获得的指向教程或(更好)开源项目的任何链接。


问题答案:

我知道这个问题是很久以前提出来的,但是没有人在这篇文章中给出答案。所以我将在这里进行。为确保每个人都在同一页面上,我的回答会很冗长。如果这看起来过于简单,我事先表示歉意。

在server.js文件(或app.js,无论您将把手定义为视图引擎的位置)中。根据您用作npm软件包的内容,例如hbs或express-
handlebars等,它可能看起来有所不同,但与此类似。注意:在此示例中,我使用快递车把。

文件:server.js

...
var express     = require( 'express'),
    hbs         = require( 'express-handlebars' ),
    app         = express();
...

app.engine( 'hbs', hbs( { 
  extname: 'hbs', 
  defaultLayout: 'main', 
  layoutsDir: __dirname + '/views/layouts/',
  partialsDir: __dirname + '/views/partials/'
} ) );

app.set( 'view engine', 'hbs' );

...

并且您的文件结构应如下所示:

| /views/   
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- ... etc.
|--- index.hbs
| server.js

并且您的main.hbs文件应如下所示:

文件:main.hbs

...
{{> header }}
...
<span> various other stuff </span>
...
{{> footer }}

要表示部分内容,请使用以下语法:{{> partialsNames }}



 类似资料:
  • 问题内容: 我正在使用Node.js + Express开发一个站点,并使用Hogan.js作为视图引擎。 这是我的文件: 该文件是: 在文件夹中,有: |- |- |- 该文件是: 该文件是: 文件是: 我有两个问题: 如何正确使用页面中的部分内容?(此代码无效) 我可以在两个或多个页面上使用相同的“标题”而不重复文件中的值分配吗? 最好的问候,六。 问题答案: 我找到了第一个问题的解决方案。

  • 问题内容: 我正在 使用Express Framework 在 Node.js上 编写CMS 。在我的CMS上,我有几个用于用户,页面等的模块。 我希望每个模块的文件都放在 单独的文件夹中 , 包括视图文件 。有人知道我该怎么做到吗? 我将 swig 用作模板引擎,但如果有帮助,可以将其替换为其他东西。 问题答案: 最后更新 自Express 4.10起,框架支持多视图文件夹功能。 只需将一系列位

  • 本文向大家介绍angular2+node.js express打包部署的实战,包括了angular2+node.js express打包部署的实战的使用技巧和注意事项,需要的朋友参考一下 Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA

  • 标题和内容 如上所述,标题可以通过 showNotification 的第一个参数设置。而通知内容可以通过配置项中的 body 进行设置。如下: registration.showNotification('Simple Title', { body: 'Simple piece of body text.\nSecond line of body text :)' }); 在Googl

  • Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性: 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模

  • Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性: 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML 页面。