node.js - 如何在快速车把中添加许多动态内容部分?
问题描述
我想在 express-handlebars 中使用模板,我在我的视图文件夹中名为“layouts”的文件夹中有一个名为“layout.hbs”的文件,我已经在我想要使用的 express 视图引擎配置中指定车把作为视图引擎,我想使用布局:
app.set("port", process.env.PORT || 3000);
app.set("views", path.join(__dirname, "resources/views"));
app.engine(".hbs", exphbs({
defaultLayout : "template",
layoutsDir : path.join(app.get("views"), "layouts"),
partialsDir : path.join(app.get("views"), "partials"),
extname : ".hbs",
helpers : require("./helpers/handlebars/handlebars")
}));
app.set("view engine", ".hbs");
它工作正常,我可以在我的把手文件中使用布局,现在我知道我可以使用{{{ body }}}
语法将变量 HTML 内容放在模板上,所以,在我的 layout.hbs 文件中我有这个:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://localhost:3000/css/style.min.css">
<title>Welcome!!</title>
</head>
<body>
{{{ body }}}
</body>
</html>
在我的 main.hbs 文件中,我有这个:
<h1>Hello from main!!!</h1>
所以最终的结果是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://localhost:3000/css/style.min.css">
<title>Welcome!!</title>
</head>
<body>
<h1>Hello from main!!!</h1>
</body>
</html>
没关系,它把动态内容放在{{{ body }}}
标签上,但现在我需要在我的模板中添加更多动态内容部分,比如每个页面都不同的样式和脚本,例如,在我想要添加的 main.hbs 中这种风格:
<link rel="stylesheet" href="http://localhost:3000/css/main.min.css">
但在contact.hbs我想补充:
<link rel="stylesheet" href="http://localhost:3000/css/contact.min.css">
我不想在布局中添加这两个标签,因为当我加载主页时,我将加载我不需要的联系人样式,这会使页面加载更慢。
在 Laravel Blade 中,我可以执行以下操作:
布局.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://localhost:3000/css/style.min.css">
@yield('css', "")
<title>Welcome!!</title>
</head>
<body>
@yield('main', "")
</body>
</html>
主刀片.php
@section('css')
<link rel="stylesheet" href="{{ asset("css/main.min.css") }}">
@endsection
@section('main')
<h1>Hello from main!!!</h1>
@endsection
它有效,我怎样才能在快速车把中做同样的事情?
解决方案
我在这里找到了解决方案。
基本上,我们必须将此辅助函数添加到您的 express-handlebars 辅助函数中:
section: (name, options) => {
if (!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
然后在您的布局文件中,您可以执行以下操作:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://localhost:3000/css/style.min.css">
{{{_sections.css}}}
<title>Welcome!!</title>
</head>
<body>
{{{body}}}
{{{_sections.scripts}}}
</body>
</html>
在您的文件中,您可以执行以下操作:
<h1>Hello from main!!!</h1>
{{#section 'css'}}
<link rel="stylesheet" href="http://localhost:3000/css/main.min.css">
{{/section}}
{{#section 'scripts'}}
<script src="http://localhost:3000/js/main.min.js"></script>
{{/section}}
这将导致:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://localhost:3000/css/style.min.css">
<link rel="stylesheet" href="http://localhost:3000/css/main.min.css">
<title>Welcome!!</title>
</head>
<body>
<h1>Hello from main!!!</h1>
<script src="http://localhost:3000/js/main.min.js"></script>
</body>
</html>
编辑:
如果你想要更类似于 Laravel 的默认文本功能,你可以添加这个助手:
yield: (name, default_value) => {
if(typeof default_value == "object") default_value = "";
return this._sections[name] || default_value;
}
并在您的布局中使用:
{{{ yield "section_index" "default value" }}}
推荐阅读
- c# - 是否可以从域外访问 Windows 用户名?
- angular - *ngFor 在从 API 获取数据时显示空列表
- mysql - Joomla 3.8 与 MYSQL 5.6、5.7 和 8 的兼容性
- java - 如何通过传递该项目的路径来计算java项目中的类和方法的数量?
- java - 使用 Input Stream 和 Argox 在 Java 中打印重音时出现问题
- java - 使对象的所有字段无效的高效方法
- vue.js - 使用 Vue 或任何其他前端与 Asp Net Core
- python-3.x - 'int' 对象不可调用 如何解决此错误?
- python - 修复错误
' 需要字符串作为左操作数,而不是元组 - java - 在无需访问源代码的情况下模拟 Swing 应用程序中的用户操作(例如:鼠标单击)