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

Question

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

---

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

//- mixins.pug

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

---

在我的 header.pug 模板中，我尝试为电话号码编写一个默认链接，我将其插入到右侧小部件块中；使用三列标题。当第三方服务器处理时，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>