未在 href 標簽上評估 pug 變量

Question

在我的 Express JS Web 應用程序中， login路由將一些變量呈現給登錄 pug 視圖。

在login.js

router.get('/login', function(req, res, next) {
  var locations = ["Location 1", "Location 2"];
  var count = 0;
  var title = 'Login';
  console.log("req.originalUrl=" + req.originalUrl);

  res.render('login', {
           title: title, // Give a title to our page
           jsonData: locations, // Pass data to the View
           count: locations.length,
           originalUrl: req.originalUrl
      });
});

在login.pug

extends layout

block content
  div(class='container mt-3')
    h2 Welcome to #{title}, #{count}, #{originalUrl}
    a(class="btn btn-primary" href="/location/new" role="button") NEW
    br
    br
    ul#locList(class='list-group')
      for location in jsonData
        li(class="list-group-item")
          a(href='#{originalUrl}' + '?' + location, class='list-group-item list-group-item-action')
            h2=location

a href的originalUrl變量未被評估為“ http://localhost:3000/login?Location%201 ”，而是“ http://localhost:3000/login#{originalUrl}?Location%201 ”。

然后我不得不將其更改為 ' a(href=originalUrl + '?' + location, class='list-group-item list-group-item-action') ' 以使其工作。

簡而言之， a(href='#{originalUrl}')不起作用，而a(href=originalUrl)起作用，對於a href 。

但是，同一變量在“ h2 Welcome to #{title}, #{count}, #{originalUrl} ”行正確計算為“ Welcome to Login, 2, /login ”。

同一個變量在來自h2 a href上a href評估方式有何不同？

Answer 1

這是幾個版本前出現的已知行為（我認為是 2016 年）。 屬性中不支持此#{style}插值：

警告

以前版本的 Pug/Jade 支持插值語法，例如：

a(href="/#{url}") Link 此語法不再受支持。 替代方法見下文。 （查看我們的遷移指南，了解有關 Pug v2 和以前版本之間其他不兼容性的更多信息。）

更多信息請參見： https : //pugjs.org/language/attributes.html

您應該能夠使用常規模板文字：

a(href=`${originalUrl}`)

Answer 2

有一種簡單的方法可以做到這一點，直接寫入變量，而不使用引號、方括號、$、! 或 #，如下所示：

a(href=originalUrl) !{originalURL}

這樣做的結果是一個帶有 originalURL 中文本的鏈接

示例：如果 originalUrl = 'www.google.es'

a(href='www.google.es') www.google.es

最后你得到了鏈接： www.google.es