Блог

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

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

Однако на сайте Jekyll мне не нужно (и не хочется) дублировать код навигации ( <ul><li></li></ul> ) и ссылки для каждой страницы, поэтому вместо этого все навигационные ссылки удобно расположены в «_includes/nav.html «где я могу вставить файл в любые 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>
  

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

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

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

 <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.

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

 <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) с заголовком, который я хотел изменить для класса на «active», и это сработало.