我如何使用 partial 將 append js 轉換為 express handlebars 模板？

Question

在我的項目中，我使用以下車把模板（在views/layouts/main.handlebars下）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    {{{css}}}
    {{{js}}}
</head>
<body>

    <header>
      <!-- some content here -->
    </header>
    <main>
        {{{body}}}
    </main>
    <footer>
        I am footer
    </footer>
</body>
</html>

對於我的主頁，我制作了一個名為./views/home.handlebars的簡單內容

<h1>Hello</h1>

為了渲染模板，我使用了 express handlebars：

const express = require('express');
const path = require('path');
const express_handlebars = require('express-handlebars');

const app = express();

const hbs = express_handlebars.create({
    // Specify helpers which are only registered on this instance.
    defaultLayout: 'main'
});

app.engine('handlebars', hbs.engine); 
app.set('view engine', 'handlebars');
app.set('views',path.join(__dirname,'/../../views'));

app.get('/', (req, res, next) => {
    res.render('home');
});

app.listen(3000);

我想要的是在我訪問http://0.0.0.0:3000后放置一些 javascript 例如：

<script>alert("Hello");</script>

我想附加的地方是 {{{js}}} 部分。 有辦法嗎？

Answer 1

我的一種方法是將 js 部分作為一個數組並放置一個base的 html5 標簽，指定每個頁面將在哪里找到它的 js：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    {{{css}}}
    {{#each js}}
        <script src="{{this}}"></script>
    {{/each}}
</head>
<body>

    <header>
      <!-- some content here -->
    </header>
    <main>
        {{{body}}}
    </main>
    <footer>
        I am footer
    </footer>
</body>
</html>

對於我的應用程序的 js，我每頁使用單獨的文件，並且我沒有將它嵌入到我的主頁中名為static的文件夾中：

const express = require('express');
const path = require('path');
const express_handlebars = require('express-handlebars');

const app = express();

const hbs = express_handlebars.create({
    // Specify helpers which are only registered on this instance.
    defaultLayout: 'main'
});

app.engine('handlebars', hbs.engine); 
app.set('view engine', 'handlebars');
app.set('views',path.join(__dirname,'/../../views'));

app.use('/static',express.static(path.join(__dirname,'/../static')));

app.get('/', (req, res, next) => {
    res.render('home',{
        title:'Homepage',
        js: [
            '/static/js/home.js'
        ],
        baseUrl: `${req.protocol}://${req.get('host')}`
    });
});

app.listen(3000);

然后在 static 文件夾中，我放置了將在瀏覽器上運行的必要 js 文件。 我發現它是一個簡單易行的解決方案，並將客戶端 js 保存在它自己的文件夾中。

我如何使用 partial 將 append js 轉換為 express handlebars 模板？

問題描述

1 個解決方案

解決方案1
0 2022-11-28 21:14:49

我如何使用 partial 將 append js 轉換為 express handlebars 模板？

問題描述

1 個解決方案

解決方案1 0 2022-11-28 21:14:49

解決方案1
0 2022-11-28 21:14:49