Есть ли способ установить класс CSS на основе имени текущей страницы, используя Liquid и условные операторы? - PullRequest
Новая
       13

Есть ли способ установить класс CSS на основе имени текущей страницы, используя Liquid и условные операторы?

0 голосов
/ 29 марта 2019

Я пытаюсь преобразовать шаблон HTML-сайта (https://html5up.net/massively) в Jekyll-готовую тему для использования на страницах GitHub (https://pages.github.com/) и в других местах), и у меня возникли небольшие проблемы с "Jekyll-izing" навигационной панелью темы.

В теме HTML был CSS-класс под названием «активный», который назначается странице, которую просматривает пользователь (т. Е. Если пользователь просматривал «/index.html», навигация <li> для URL-адреса "/ index) .html "будет иметь класс" активный ", который выделит фон белого" текстового поля "на панели навигации и оставит другие текстовые поля навигации в качестве их исходных цветов).

Однако на сайте Jekyll мне не нужно (и не нужно) дублировать код навигации (<ul><li></li></ul>) и ссылки для каждой страницы, поэтому вместо них все навигационные ссылки удобно расположены в "_include / nav.html". msgstr "где я могу вставить файл в любой макет HTML, используя Liquid (" {% include nav.html %} ").

Поскольку я включаю все навигационные ссылки в один файл HTML, который в настоящее время используется всеми страницами моего сайта (я «включил» файл nav.html в свой макет default.html, который я использую как минимум для две страницы), я изо всех сил пытаюсь найти способ выделить страницу, на которой находится пользователь, путем изменения цвета фона элемента.

Я уже пытался использовать условное выражение с Liquid, но я не знаю, что я делаю неправильно (возможно, я не получаю правильный синтаксис или какая-то другая ошибка).

Вот оригинальный код (до того, как я его подделал): 

<nav id="nav">
    <ul class="links">
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
    </ul>
    {% include social.html %}
</nav>

Я попытался «исправить» мою проблему, создав, как я надеялся, безошибочный условный оператор с Liquid, который проверял, находится ли пользователь на странице с тем же именем, что и страница, которую я хотел выделить (т. Е. Если пользователь находится на странице с именем / URL «index») (как показано здесь https://jekyllrb.com/docs/variables/ в официальных документах Jekyll). Если это так, то он будет представлять ссылку с «активным» классом, а если нет, то он будет представлять ссылку в {% else %}, который не имеет «активного» класса: 

<nav id="nav">
    <ul class="links">
        {% if page.name == /index.md %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}

        {% if page.name == /about.md %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>
</nav>

Цель состоит в том, чтобы, например, слово «Домашняя страница» было выделено, когда пользователь находится на странице «Домашняя страница», и чтобы слово «О программе» было выделено, когда пользователь находится на странице «О программе». страницы и т. д.

Заранее спасибо, и я прошу прощения, если этот вопрос сбивает с толку. Я в замешательстве, но я был бы рад уточнить.

РЕДАКТИРОВАТЬ Когда я изменил файл следующим образом, ссылки исчезли: 

<nav id="nav">
    <ul class="links">
        {% if page.name == index.html %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}
        {% if page.name == about.html %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>

Возможно, это из-за того, что я неправильно вызываю файл index.html или about.html? Я уже пробовал варианты, такие как index.md (файл на самом деле называется index.md, но я думал, что Jekyll меняет его на index.html), /index.md, /index.html, index, / index, но ни один из них похоже, вызывает оператор if.

1 Ответ

0 голосов
/ 29 марта 2019

Ура! Итак, что бы я ни делал, следующий код решает мою проблему: 

<nav id="nav">
    <ul class="links">
        {% if page.title == "Home" %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}
        {% if page.title == "About" %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>

Я считаю, что предыдущие операторы if не работали, потому что я не помещал index.html в кавычки (""). Вместо этого я проверил, совпадает ли заголовок страницы (основной текст YAML) с заголовком, для которого я хотел изменить класс на «активный», и это сработало.

...