Используя Pugjs, как правильно включить миксин в атрибут ссылки href?

1

tl; dr: Каков правильный способ вставки mixin в атрибут href ссылок?

Я начинаю использовать 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, просто чтобы посмотреть, что произойдет. При поиске я ничего не вижу, обсуждая это. Решения, которые я пробовал, были из этой записи qaru.site/questions/13018526/.... Оба однолинейных и многолинейных решения должны быть устаревшими, потому что они не работают для меня.

Какой лучший способ сделать это?

Теги:
templates
pug

1 ответ

0
Лучший ответ

Миксины предназначены для использования на уровне тегов. Простой Mixin для a теге может быть:

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>
Поделиться
  • 0
    Спасибо за ответ, Шон, я действительно ценю это. Итак, вы бы порекомендовали установить все ~ 20 таких коротких кодов в одном файле и просто включать функции в любое время, когда их нужно использовать, а не использовать миксины, поскольку некоторые из них должны использоваться в атрибутах? Что-то вроде Third-Party-Shortcodes.pug с тем, что вы упомянули выше? Может быть, лучше определить класс с ними? Будут ли оба из них идеально подходить для работы с Pug / js?
  • 0
    Можете ли вы расширить свой вопрос с помощью полного набора «коротких кодов» и как вы хотите их использовать? Может быть более эффективный способ сделать это, но это трудно понять из ограниченного примера
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню