Как использовать изображения из ассетов в HTML компонента темы на базе Glimmer?

Разработка
1

Ссылка Include assets (e.g. images, fonts) in themes and components, похоже, всё ещё описывает подход с использованием Handlebars, если я правильно понимаю. Доступен ли уже новый подход Glimmer для получения изображений из директории assets компонента темы, чтобы использовать их в HTML-шаблоне того же компонента темы?

Мой сценарий использования — замена сломанного устаревшего компонента темы, описанного в Templating of my "component" broke. How do I fix it?.

Что я пробовал

Я создал новый проект компонента темы с помощью команды discourse_theme new discourse-tc-geowebforum-sponsors, а затем попытался воспроизвести предыдущий плагин без условной логики и с встроенным шаблоном. Однако это привело к следующей ошибке в консоли браузера:

[THEME 6 'geowebforum-sponsors'] Error: [THEME 6 'geowebforum-sponsors'] Compile error: SyntaxError: /theme-6/discourse/api-initializers/geowebforum-sponsors.gjs: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-relative-url:

Также я пробовал различные комбинации:

  • вынесение шаблона в константу
  • использование одиночных (вместо двойных) фигурных скобок
  • вызов функции (themeRelativeUrl("asseco_berit.jpg")) внутри фигурных скобок
  • перемещение шаблона в javascripts/discourse/components/geowebforum-sponsors.gjs (и импорт его из инициализатора)
  • перемещение шаблона в javascripts/components/geowebforum-sponsors.gjs (и импорт его из инициализатора)
  • создание класса class GEOWebforumSponsorsComponent extends Component {} в этом файле и его импорт в инициализаторе (при этом экспорт шаблона из того же файла, что и класс, под именем template, как мне предложил LLM — я всё ещё не уверен, имеет ли это какой-либо смысл).

В результате я либо получал

  • ту же ошибку (хотя и из другого файла)
    или
  • klass is not an Ember component
    или
  • буквальное отображение плейсхолдеров шаблона в результирующем DOM, что, естественно, приводило к ошибкам 404 для источников изображений.
2 лайка
2

Хм, вы видели этот кусок?

1 лайк
3

Считается ли это «загрузкой», если я помещаю их в директорию assets проекта исходного кода компонента темы?

4

Да. Вы можете разместить их непосредственно в директории assets/.

1 лайк
5

С подсказками здесь и некоторой помощью от бота ask.discourse.com мне удалось заставить это работать:

  • Вот соответствующий коммит поверх того, что сгенерировал CLI discourse_theme.
  • Вот разница по сравнению с моей предыдущей неудачной попыткой, упомянутой в первом сообщении.

Спасибо, @NateDhaliwal!

Основные сложности, с которыми я столкнулся на этом пути:

  • В шаблонах ни произвольные выражения JavaScript (например, вызовы функций), ни выражения с фильтрами (вида some-transormation-function someVariableOrLiteral) не работают внутри двойных фигурных скобок. Там можно интерполировать только одиночные переменные.
  • Для одного из двух ресурсов я забыл включить имя директории assets/ в соответствующее значение пути к файлу в about.json. Это привело к тихой ошибке: соответствующая настройка стала undefined, что, видимо, вызвало полное игнорирование шаблона или что-то подобное.
  • На одном из этапов разработки компонент темы, синхронизируемый через discourse_theme watch ..., не оказывал никакого эффекта — ни в предпросмотре, ни при явной активации. Решение нашлось, когда я позволил discourse_theme watch ... создать новую копию компонента на инстансе (удалив предыдущую копию). Точно не знаю, что именно там произошло.
6

Вы проверили консоль браузера? Ошибки в вашем компоненте отображаются там, и если они есть, ваш компонент не будет отображаться (или будет отображаться не полностью).