Jade/Pug - 扩展布局 - 变量未被识别答案

【问题标题】：Jade/Pug - Extending layout - variable not being recognisedJade/Pug - 扩展布局 - 变量未被识别
【发布时间】：2017-03-15 21:24:22
【问题描述】：

我正在使用 Jade/Pug 来简化我的 HTML，并且我正在尝试创建一个包含元详细信息的块。当我在索引文件中扩展布局时，我似乎无法将 #{desc} 替换为 desc 变量。

我是不是做错了什么？

布局：

doctype
html
  head
    block title
        title variables
        meta(name='description' content='#{desc}')
  body
    p hello

索引：

extends includes/layout
block title
    title things
    - var desc="hello"

查看源代码时没有输出元数据

【问题讨论】：

标签： html node.js pug template-engine

【解决方案1】：

Jade/Pug 不会合并块或其范围，这正是您在这里所期望的。它只能替换、追加或前置。

index.pug 中的block 覆盖了layout.pug 中的默认内容。 var desc = 'hello' 从未使用过。

我的建议是定义和使用mixin，或者尝试在块范围之外声明您的变量。

// layout.pug
doctype
html
  head
    title=title || 'Default Title'
    meta(name='description' content='#{description || "Default desc"}')
  body
    p hello

// index.pug
extends includes/layout
-
    var title = 'Mario'
    var description = 'Luigi'

// <your markup here>

【讨论】：

是否可以使用 append/prepend 来做我需要的任何事情——或者我需要走 Mixins 路线吗？
追加或前置不会合并您的变量范围。它只是在 A 之前或之后渲染 B。
查看我的编辑，了解如何在不过度使用块或 mixins 的情况下获得所需内容

【解决方案2】：

进行了如下所述的一系列修复。

layout.pug

- var desc = 'default meta desc'
block variables
doctype
html
  head
    block title
      meta(name='description' content=desc)
  body
    p hello

index.pug

extends includes/layout
block variables
  - desc = "hello"
block append title
  title things

使用block append 代替block 作为标题
将变量放入布局中并在页面中覆盖它们
直接引用desc，不用插值语法

【讨论】：