javascript - 使用 Pugjs，在链接 href 属性中包含混合的正确方法是什么？

Question

tl;dr:在链接 href 属性中插入混合的正确方法是什么？

---

我开始使用 Pug，但是当我尝试使用 mixin 生成属性值时遇到了问题。在我的模板中，我需要使用来自第三方网站的简码来动态包含电话号码(和其他设置)；我创建了一个简单的 mixin 来生成:

//- mixins.pug

mixin setting(value)
    | [setting:#{value}]

---

在我的 header.pug 模板中，我试图为电话号码编写一个默认链接，我将其插入到右侧小部件 block 中；使用三列标题。 mixin 生成的短代码在由第三方服务器处理时会从他们的数据库中获取电话号码。

//- header.pug

block right-widget
    h3.title
        | Call:
        a(href='tel:' +setting('Company Phone'))
            +setting('Company Phone')
    +button_reserve

当我尝试包含设置 mixin 以便它为电话号码创建短代码时，它最终被作为字符串插入。下面是生成的 HTML 的示例:

<h3 class="title">
    Call: <a href="tel:" settings('Company="settings('Company" Phone')="Phone')">companyPhone</a>
</h3>

而不是想要的结果:

<h3 class="title">
    Call: <a href="tel:[setting:Company Phone]">[setting:Company Phone]</a>
</h3>

---

我尝试过的一个解决方案是使用无缓冲代码来包含 mixin，如下所示:

//- header.pug

block right-widget
    - var phone = +setting('Company Phone')
    h3.title
        | Call:
        a(href='tel:' + phone)
            phone
    +button_reserve

但是当我这样做时，我收到一条错误消息，指出设置(mixin)不是一个函数。我也在没有 var 的情况下尝试过，只是为了看看会发生什么。搜索时，我看不到任何讨论。我尝试的解决方案来自这个 stackoverflow post .单线和多线解决方案都已过时，因为它们对我不起作用。

进行此设置的最佳方法是什么？

Answer 1

Mixins 旨在用于标记级别。 a 标签的简单 mixin 可以是:

mixin setting(value)
  a(href= 'tel:[setting:' + value + ']')= '[setting:' + value + ']'

您还可以使用javascript 函数 来执行诸如字符串操作之类的操作:

- let settingString = (value) => { return '[setting:' + value + ']'}

将它们结合起来会很强大，而且很可能就是您要找的东西:

// function
- let settingString = (value) => { return '[setting:' + value + ']'}

// mixin (that uses the function)
mixin settingLink(value)
  a(href= 'tel:' + settingString(value))= settingString(value)

// mixin call
h3.title
  | Call: 
  +settingLink('Company Phone')

这呈现:

<h3 class="title">
  Call: <a href="tel:[setting:Company Phone]">[setting:Company Phone]</a>
</h3>