如何在哈巴狗中插值变量?

Question

我有一个哈巴狗视图

section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text !{about}
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume

在快速服务器中，我使用"about"，"works"和"reviewsAmount"变量呈现它。 "关于"变量值为

const about = `
<p>
I have #{works.length} works and #{reviewsAmount} reviews.
</p>
`;

但在页面中，它的呈现方式是"我有#{works.length}作品和#{reviewsAmount}评论。变量值不会在段落标签中插值。那么，该怎么做呢？

Answer 1

你混淆了哈巴狗插值和JavaScript模板字符串。 当代码位于节点/快速路由中(而不是模板中(时，您需要使用 JavaScript 模板字符串。

如果您使用${}语法，这将修复它。

const about = `
<p>
I have ${works.length} works and ${reviewsAmount} reviews.
</p>
`;

话虽如此，我建议不要这样做，不要将所有 HTML 保留在 pug 中，而不是将其移动到节点/快速代码中。 这将使您的网页在出现问题时更难调试，并且还需要更多精力来长期维护。

Answer 2

只需将这些变量传递给 Pug 并在那里进行插值：

section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text
p I have #{works.length} works and #{reviewsAmount} reviews.
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume