我想在express-handlebars中使用模板，我在express视图文件夹中名为“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 }}}<!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 }}}<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 中我可以做类似的事情：
Layout.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>
main.blade.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" }}}
将此添加到 main.hbs 文件中的 head 标签中
<link rel="stylesheet" href="/css/{{style}}">