Вопрос №55392 от пользователя Kirill Kozedub в уроке «Циклы», курс «HTML: Препроцессор Pug»

Kirill Kozedub

Никита, добрый день!

Вопрос по дополнительному заданию: не совсем понятно как правильно использовать интерполяцию переменных для вывода пути до файлов иконок в кавычках. Как правильно буферизовать/интерполировать следующий код, чтобы кавычки корректно выводились?

a(href="#{icon.url}") #{icon.name}

Сейчас он выводит:

<a class="class" href="#{icon.url}">dog</a>

У меня получилось добиться требуемого результата вот таким кодом внутри двойного цикла:

li
  <a href="#{icon.url}">#{icon.name}</a>

Но что-то мне подсказывает, что вставлять html-теги в код - это не лучший вариант.

4 0

Nikita Mikhaylov

Здравствуйте

Да, вставлять HTML — не лучшая идея, так как теряется смысл использования препроцессора. А можете пример своего кода залить куда-нибудь на CodePen и приложить ссылку? Возможно где-то закралась ошибка

0

Kirill Kozedub

Вот ссылка на Codepen

Как и говорил после компиляции выводит вот так:

<a class="class" href="#{icon.url}">dog</a>
0

Nikita Mikhaylov

Обратите внимание, что указывая атрибуты в скобках, вы уже можете подставлять переменные. Это не текст, в котором нужно использовать интерполяцию. Она используется именно внутри текстового содержимого элемента. Поэтому, для корректности, нужно использовать вот такую запись a(href=icon.url) #{icon.name}

1

Kirill Kozedub

Супер! Спасибо за разъяснения.

0

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
1 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
1 июня 5 месяцев