Question

似乎是一个重复的问题。但是我不知道该怎么做。

我有如下所示的模板。

Index.pug

block head
    title INCX - Exchange
block main
    include templates/_header

dashboard.pug

block head
    title INCX - Exchange
block main
    include templates/_header

_header.pug

header.header
    section.header-nav-section.full-width

现在，我想将变量从 index.pug 和 dashboard.pug 传递到 _header.pug ，以将类添加到< strong> header 元素。

我尝试如下

Index.pug

- var headerClass = 'index-header';
block head
    title INCX - Exchange
block main
    include templates/_header

dashboard.pug

- var headerClass = 'dashboard-header';
block head
    title INCX - Exchange
block main
    include templates/_header

_header.pug

- var headerClass = headerClass || "xyz";
header.header(class=headerClass)
    section.header-nav-section.full-width

但是我遇到以下错误

只有命名的块和混合可以出现在扩展模板

Answer 1

从技术上讲，这个问题无法回答，因为Pug（就像我见过的所有其他模板引擎一样）不具有跨组件通信的功能，因此您所要求的不存在。 IMO会增加一层复杂性，从而损害开发时间和渲染速度，这是人们使用Pug的两个主要原因。

解决此问题的方法是将变量从路由传递到模板，而不是从模板传递到模板。

您汇集在一起的所有模板（使用扩展，包含或混合）都成为一个聚合的JavaScript内存内渲染函数，并且该聚合函数从使用{{1}进行调用的路由中获取所有变量}。如果您使用路由传递变量，则聚合模板中的每个组件模板都会看到该变量。

因此，由于块的设计目的不是承载它们自己的变量，因此您不能在块上方声明变量。换句话说，这些是完全无效的哈巴狗模板，您无法采取任何措施来“修复”它：

SELECT * FROM table1 
WHERE col1 = 1
IF(col2 IS NOT NULL)
col2 = $column2
AND 
IF(col3 IS NOT NULL)
col3 = $column3

和

res.render

您可能应该创建一个新问题，解释为什么要这样做，社区可以帮助您解决该问题。