如何在 express-handlebars 中添加多段动态内容?

How can I add many sections of dynamic content in express-handlebars?

我想在 express-handlebars 中使用模板,我有一个名为“layout.hbs”的文件,位于我的 views 文件夹中用于 express 的名为“layouts”的文件夹中,我已在 express view 中指定我想使用车把作为视图引擎并且我想使用布局的引擎配置:

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");

它工作正常,我可以在我的 handlebars 文件中使用布局,现在我知道我可以使用 {{{ 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 中我可以做类似的事情:

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 中做同样的事情?

我找到了解决方案 here

基本上,我们必须将这个辅助函数添加到 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" }}}