Как подставить класс в Thymeleaf?

Question

[postya]

Приложение на Spring Boot. Шаблонизатор Thymeleaf
В контроллере есть url, по которому появляется страница html
Имеется на странице меню с линками.На каждой странице меню одинаковое, за исключением того,что меняется цвет активного линка. Чтобы не создавать каждый раз меню на странице, я сделал fragment, и уже его использую на каждой странице.
Проблема в том,что линки на странице динамические. При попадании на текущую страницу линка, его цвет изменяется, тем самым показывая, на какой странице находится пользователь.

Как можно добавить класс с цветом для активного линка в css, согласно URL?

Controller:

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("condition", "link-active");
        return "home";
    }    
}

home.html:

<!-- NAVIGATION MENU-->
    <div th:replace="fragments/navbar :: navbar">
    </div>

fragment:

<div th:fragment="navbar">
        <header class="header">
            <a class="header-logo" href="#" th:href="@{/}"><img src="/images/logo.png" alt="">
            </a>

                <ul class="header-links">
                    <li><a th:href="@{/}">Home</a></li>
                    <li><a href="#" class="link-item">Get Library<i class="fab fa-github"></i></a></li>
                    <li><a href="#" class="link-item">Examples</a></li>
                    <li><a href="#" class="link-item">Tutorials</a></li>
                </ul>

        </header>
</div>

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Вы можете сделать это на уровне thymeleaf

Что-то типа такого должно сработать:

<li><a href="#" class="link-item" th:classapend="${#strings.contains(#httpServletRequest.requestURI, '/tutorials')} ? colorClass : baseClass">Tutorials</a></li>

Тут мы из запроса получаем URL, проверяем содержится ли в URL /tutorials и если да, то добавляем класс colorClass, а если нет, то baseClass.

Изучите th:class & th:classappend

Comments

[postya]

У меня сработал такой вариант:

<ul class="header-links">
            <li th:class="${#httpServletRequest.requestURI.contains('/')} ? 'link-active' : 'link-inactive'"><a th:href="@{/}">Home</a></li>
            <li><a href="#" target="_blank">Get Library<i class="fab fa-github"></i></a></li>
            <li th:class="${#httpServletRequest.requestURI.contains('/examples')} ? 'link-active' : 'link-inactive'"><a th:href="@{/examples}">Sketch Examples</a></li>
            <li th:class="${#httpServletRequest.requestURI.contains('/tutorials')} ? 'link-active' : 'link-inactive'"><a th:href="@{/tutorials}">Video Tutorials</a></li>
        </ul>

Но проблема в том,что меняет цвет не только выбранный линк но и линк Home,

видимо потому,что указано

th:class="${#httpServletRequest.requestURI.contains('/')}

Как можно этого избежать, чтобы только выбранная ссылка меняла цвет?

[Орхан Гасанлы]

th:class="${#httpServletRequest.requestURI.contains('/')} ? 'link-active' : 'link-inactive'"

по факту вы добавили класс на уровень li элемента, а не анкорной ссылки.
classappend добавляет класс к существующему атрибуту class
class добавляет атрибут класс и класс для выбранного элемента

Как можно этого избежать, чтобы только выбранная ссылка меняла цвет?

Не уверен отработает ли такой вариант... В общем, чтобы обойтись без редиректа вам надо применить регулярное выражение к этому выражению выше...
т.е. вместо '/' использовать что-то типа '/$'
В общем, смотрите в сторону применения регулярного выражения. Выражение выше скорее всего не сработает. Поищите решение при помощи регулярки (regex)

[postya]

azerphoenix, добавление класса на тэг li у меня работает. Спасибо за совет с регулярными выражениеями, посмотрю!

Answer 2

[postya]

Пока нашёл такое решение:

Добавил ещё один url для редиректа в контроллере:

@GetMapping("/home")
    public String home() {
        return "home";
    }

    @GetMapping("/")
    public String homePage() {
        return "forward:/home";
    }

<ul class="header-links">
            <li th:class="${#httpServletRequest.requestURI.contains('/home')} ? 'link-active' : 'link-inactive'"><a th:href="@{/home}">Home</a></li>
            <li><a href="https://github.com/tttapa/Control-Surface" target="_blank">Get Library<i class="fab fa-github"></i></a></li>
            <li th:class="${#httpServletRequest.requestURI.contains('/examples')} ? 'link-active' : 'link-inactive'"><a th:href="@{/examples}">Sketch Examples</a></li>
            <li th:class="${#httpServletRequest.requestURI.contains('/tutorials')} ? 'link-active' : 'link-inactive'"><a th:href="@{/tutorials}">Video Tutorials</a></li>
        </ul>