Question

假设我有一些常用于所有页面的脚本和一些仅在特定页面上需要的脚本，使用nunjucks作为模板引擎实现此操作的有效方法是什么，并将4表示为后端框架。

--- site
 --- public
  |___js
    |___ script.js (for all pages)
    |___ home.js (only required on home page)
    |___ contact.js (contact page)
    |___ search.js  (on search page)

我尝试使用快速本地传递页面标题并发送常用脚本数组+ home.js，但是在渲染脚本标签上另外调用表达路由（*）的中间件，将脚本重置为常用因为没有页面标题传递给该函数。

Answer 1

如果contact，search和其他是不同的html模板，那么您可以使用block - 覆盖

// index.njk
<html>
<head> 
    <script src = "script.js"></script>
    {% block js %}{% endblock %}
</head>

// search.njk
{% extends 'index.njk' %}

{% block js %}
    <script src = "search.js"></script>
{% endblock %}

// js
app.get('/search', function(req, res, next){
    res.render('search.njk', {...});
})

另一种喜欢你的方式

// Middleware
function(req, res, next) {
    res.locals.scripts = ['script.js'];
    next();
}

// router
app.get('/search', function(req, res, next) {
    res.render(#template-name, {
        scripts: res.locals.scripts.concat('search.js')
    })
})

// index.njk
<html>
<head> 
    {% for script in scripts %}
    <script src = "{{script}}"></script>
    {% endfor %}
</head>

如何使用nunjucks和express app添加页面特定的脚本？

1 个答案: