Question

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

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

//- mixins.pug

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

在header.pug模板中，我尝试为电话号码的默认链接编写代码，该链接将插入到right-widget块中；使用三列标题。由第三方服务器处理时，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>

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

1 个答案: