如何将 Express.js 变量传递给 Jade/Pug 无缓冲代码？

Question

我有一个带有以下代码的 index.js：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index',{
      "title":"Homepage",
      "navIndex":"reg",
      "navItems":[
         {"title":"Home", "link":"/" },
         {"title":"Register", "link":"/reg"}
      ]
  });
});

module.exports = router;

我有 index.pug：

doctype html
html
    head
        title Welcome!
        link(rel='stylesheet' href='css/materialize.min.css')
        link(rel='stylesheet' href='css/style.css')
        script(src='js/jquery-3.2.1.min.js')
        script(src='js/materialize.min.js')
    body
        block content
        nav
            div(class='nav-wrapper')
                a(href='#' class='brand-logo' class='right') Logo
                ul(id='nav-mobile' class='left hide-on-med-and-down')
                -
                    var navItems = #{navItems}

                    for(x = 0; x < navItems.length; x++)
                        li
                            a(href=navItems[x].link) navItems[x].title

由于某种原因，我不断收到“意外的块内容”错误。

我已尝试调整间距，但似乎无法正常工作。我查看了有关无缓冲代码的文档，但我只是不确定如何将 navItems 对象从 index.js 传递到 pug 文件的无缓冲代码部分。我假设您像我一样定义一个变量 ex .var navItems = #{navItems}。有没有这方面的具体文档？如果没有，我到底做错了什么？提前致谢。

编辑：

更新的 index.pug 如下。但它会逐字输出“navItems[x].title”，而不是变量的值。

doctype html
html
    head
        title Welcome!
        link(rel='stylesheet' href='css/materialize.min.css')
        link(rel='stylesheet' href='css/style.css')
        script(src='js/jquery-3.2.1.min.js')
        script(src='js/materialize.min.js')
    body
        nav
            div(class='nav-wrapper')
                a(href='#' class='brand-logo' class='right') Logo
                ul(id='nav-mobile' class='left hide-on-small-only')
                    - for(x = 0; x < navItems.length; x++)
                    li
                        a(href=navItems[x].link) navItems[x].title

Answer 1

您的index.pug 文件中有block 语句，这表明该文件通常打算被其他模板继承，这些模板将为您的block content 提供内容。

我认为从您的 index.pug 中删除 block content 语句应该可以解决您的错误。或者您可以为您的block content 提供默认内容。

你可以read more here about Template Inheritance in Pug。

关于您更新的代码，我认为 #{variableName} 语法仅适用于属性（即在属性插值中）。

当作为内容的一部分使用时，您可以使用以下任意一种：

a(href=navItems[x].link)= navItems[x].title
a(href=navItems[x].link) #{navItems[x].title}

现在，关于 for 循环的缩进差异，如果您使用 Pug 循环，即在开头没有破折号 (-)，则需要适当的缩进。

当您在行首添加破折号 (-) 时，该行将被视为纯 javascript，然后在大多数情况下您无需缩进下一行。