Проблема при загрузке внешнего CSS в тимилиф при создании шаблона для сервиса электронной почты

Question

Я использую JHipster и ищу пример шаблонного письма с Thymleaf.Моя проблема в том, что CSS и JS (статические файлы) не внедряются в мои шаблоны ..

<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"
       rel="stylesheet" media="screen" />

Я получаю следующую ошибку:

org.thymeleaf.exceptions.TemplateProcessingException: База ссылок "/css/Boostrap.min.css" не может быть относительной по отношению к контексту (/) или относительной по отношению к странице, если вы не реализуете интерфейс org.thymeleaf.context.IWebContext

Ниже приведен мойСтруктура ресурсов весенней загрузки:

--- resources
     |--- i18n
     |--- mails
     |--- static
           |--- css
                 |--- boostrap.min.css

В чем здесь проблема?

Answer 1

Для шаблонов электронной почты, очевидно, вы должны удалить предыдущее "/"

<link href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" media="screen" />

Answer 2

Ваш шаблон сообщения должен ссылаться на абсолютный внешний URL вашего CSS с именем домена, он не должен использовать относительный URL.Если вы этого не сделаете, программа чтения почты не знает, откуда можно загрузить этот CSS.

Именно поэтому в application-prod.yml

есть свойство jhipster.mail.base-url * Сгенерированные шаблоны уже используютэто для favicon:

<link rel="shortcut icon" th:href="@{|${baseUrl}/favicon.ico|}" />

Я бы добавил, что внешний CSS может быть заблокирован читателями почты в зависимости от настроек пользователя, особенно когда не используется https, и вы ничего не можете с этим поделать.Вот почему большинство людей будут рекомендовать встраивание стилей, а не ссылки на внешние таблицы стилей.Стилизовать HTML-почту сложно, и вы найдете множество ресурсов, объясняющих, почему и как обойти некоторые из этих проблем.Просматривайте исходные HTML-письма, которые вы получили в папке «Входящие», чтобы получить представление.