NodeJS 我如何使用partial将js追加到express handbars模板中？

ffscu2ro 于 2022-12-03 发布在 Node.js

关注(0)|答案(1)|浏览(123)

在我的项目中，我使用了以下车把模板（在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 handbars：

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

我想要的是放置一些javascript一旦我访问http://0.0.0.0:3000例如：

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

我想追加的位置在{{{js}}}部分中。有什么方法可以做到吗？

node.js

来源：https://stackoverflow.com/questions/74603778/how-i-can-append-js-into-a-express-handlebars-template-using-partial

1条答案

按热度按时间

mlmc2os51#

我的一个方法是将js部分作为一个数组，并放置一个basehtml5标签SOE，指定每个页面在哪里可以找到它的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);

然后在静态文件夹上我放置了浏览器上运行的js文件。我发现这是一个简单的解决方案，并将客户端js保存在自己的文件夹中。

赞(0）回复(0）举报 2022-12-03

我来回答

NodeJS 我如何使用partial将js追加到express handbars模板中？

1条答案

相关问题

热门标签

最新问答