如何在快速車把中添加許多動態內容部分？

Question

我想在 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 }}}標簽中，但現在我需要在我的模板中添加更多動態內容部分，例如 styles 和每個頁面都不同的腳本，例如，在我的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">

我不想在布局中添加這兩個標簽，因為當我加載主頁時，我將加載我不需要的聯系人 styles，它會使頁面加載更慢。

在 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

它有效，我怎樣才能在快速車把中做同樣的事情？

Answer 1

我在這里找到了解決方案。

基本上，我們必須將此助手 function 添加到您的快速車把助手中：

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" }}}

如何在快速車把中添加許多動態內容部分？

問題描述

1 個解決方案

解決方案1
2 已采納 2020-07-22 22:23:59

如何在快速車把中添加許多動態內容部分？

問題描述

1 個解決方案

解決方案1 2 已采納 2020-07-22 22:23:59

解決方案1
2 已采納 2020-07-22 22:23:59