Jekyll - автоматически выделяет текущую вкладку в строке меню

Я использую github для размещения статического сайта и Jekyll для его создания.

У меня есть панель меню (как <ul>) и хотелось бы, чтобы <li>, соответствующему текущей странице, был назначен другой класс для выделения CSS.

Итак, что-то вроде псевдокода:

<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>

Или, возможно, даже сгенерируйте целое <ul> в Jekyll.

Как это можно сделать с минимальными изменениями вне оскорбительного <ul>?

ОТВЕТЫ

Ответ 1

Да, вы можете это сделать.
Для этого мы воспользуемся тем фактом, что текущая страница всегда представлена ​​жидкой переменной: page в шаблоне, а также что каждый пост/страница имеет уникальный идентификатор в своем атрибуте page.url.

Это означает, что нам просто нужно использовать цикл для создания нашей навигационной страницы, и тем самым мы можем проверить page.url на каждый член цикла. Если он находит совпадение, он знает, чтобы выделить этот элемент. Здесь мы идем:

  {% for node in site.pages %}
    {% if page.url == node.url %}
      <li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
    {% else %}
      <li><a href="{{node.url}}">{{node.title}}</a></li>
    {% endif %}
  {% endfor %}

Это работает так, как ожидалось. Однако вы, вероятно, не хотите, чтобы вся ваша страница находилась в вашем навигационном баре. Чтобы подражать странице "группировка", вы можете что-то вроде этого:

## Put the following code in a file in the _includes folder at: ./_includes/pages_list

{% for node in pages_list %}
  {% if group == null or group == node.group %}
    {% if page.url == node.url %}
      <li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
    {% else %}
      <li><a href="{{node.url}}">{{node.title}}</a></li>
    {% endif %}
  {% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}

Теперь страницы могут быть сгруппированы. Чтобы предоставить страницу группе, вам необходимо указать ее на страницах YAML Front Matter:

---
title: blah
categories: blah
group: "navigation"
---

Наконец, вы можете использовать свой новый код! Где бы вы ни находились, чтобы перейти к вашему шаблону, просто "вызовите" свой файл include и передайте ему несколько страниц и группу, которую вы хотите отобразить:

<ul>
  {% assign pages_list = site.pages %}
  {% assign group = 'navigation' %}
  {% include pages_list %}
</ul>

Примеры

Эта функциональность является частью структуры Jekyll-Bootstrap. Вы можете увидеть точную документацию для кода, описанного здесь: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

Наконец, вы можете увидеть его в действии на самом веб-сайте. Просто взгляните на правую навигацию, и вы увидите, что текущая страница выделена зеленым цветом: Пример выделенной ссылки навигации

Ответ 2

Мне кажется, что для простейшего навигационного требования перечисленные решения слишком сложны. Здесь решение, которое не включает в себя передний элемент, javascript, петли и т.д.

Поскольку у нас есть доступ к URL-адресу страницы, мы можем нормализовать и разделить URL-адрес и протестировать сегменты, например:

{% assign current = page.url | downcase | split: '/' %}

<nav>
  <ul>
    <li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
    <li><a href='/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
    <li><a href='/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
  </ul>
</nav>

Конечно, это полезно, только если статические сегменты предоставляют средства для определения навигации. Все сложнее, и вам придется использовать фронт-материал, как показано на рисунке @RobertKenny.

Ответ 3

Аналогично решению @ben-foster, но без использования jQuery

Мне нужно было что-то простое, вот что я сделал.

В моем первом вопросе я добавил переменную с именем active

например.

---
layout: generic
title:  About
active: about
---

У меня есть навигация, включающая следующий раздел

    <ul class="nav navbar-nav">
        {% if page.active == "home" %}
            <li class="active"><a href="#">Home</a></li>
        {% else %}
            <li><a href="/">Home</a></li>
        {% endif %}
        {% if page.active == "blog" %}
            <li class="active"><a href="#">Blog</a></li>
        {% else %}
            <li><a href="../blog/">Blog</a></li>
        {% endif %}
        {% if page.active == "about" %}
            <li class="active"><a href="#">About</a></li>
        {% else %}
            <li><a href="../about">About</a></li>
        {% endif %}
    </ul>

Это работает для меня, поскольку количество ссылок в навигации очень узкое.

Ответ 4

Здесь мое решение, которое я считаю лучшим способом выделить текущую страницу:

Определите список навигации на _config.yml следующим образом:

navigation:
  - title: blog
    url: /blog/
  - title: about
    url: /about/
  - title: projects
    url: /projects/

Затем в вашем файле _includes/header.html вы должны просмотреть список, чтобы проверить, соответствует ли текущая страница (page.url) любому элементу навигационного списка, если это так, то вы просто установили активный класс и добавьте его в тег <a>:

<nav>
  {% for item in site.navigation %}
      {% assign class = nil %}
      {% if page.url contains item.url %}
          {% assign class = 'active' %}
      {% endif %}
      <a href="{{ item.url }}" class="{{ class }}">
          {{ item.title }}
      </a>
  {% endfor %}
</nav>

И поскольку вы используете оператор contains вместо оператора equals =, вам не нужно писать дополнительный код, чтобы он работал с URL-адресами, такими как '/blog/post-name/' или 'projects/project -имя/'. Так что он работает очень хорошо.

P.S: Не забудьте указать постоянную ссылку на своих страницах.

Ответ 5

Я использовал немного JavaScript для этого. У меня есть следующая структура в меню:

<ul id="navlist">
  <li><a id="index" href="index.html">Index</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="videos.html">Videos</a></li>
</ul>

Этот фрагмент javascript выделяет текущую соответствующую страницу:

$(document).ready(function() {
    var pathname = window.location.pathname;

    $("#navlist a").each(function(index) {
        if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
            $(this).addClass("current");
    });

    if ($("a.current").length == 0)
        $("a#index").addClass("current");
});

Ответ 6

Мой подход заключается в определении пользовательской переменной в элементе управления YAML на странице и выводе этого элемента <body>:

<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}>

Мои навигационные ссылки включают идентификатор страницы, на которую они ссылаются:

<nav>
    <ul>
        <li><a href="artists.html" data-page-id="artists">artists</a></li>
        <li><a href="#" data-page-id="contact">contact</a></li>
        <li><a href="#" data-page-id="about">about</a></li>
    </ul>
</nav>

В начальном вопросе страницы мы устанавливаем идентификатор страницы:

---
layout: default
title: Our artists
id: artists
---

И, наконец, немного jQuery для установки активной ссылки:

// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
    $("a[data-page-id='" + currentPage + "']").addClass("active");
}

Ответ 7

Вот метод jQuery для выполнения того же

  var pathname = window.location.pathname;

  $(".menu.right a").each(function(index) {
    if (pathname === $(this).attr('href') ) {
      $(this).addClass("active");
    }
  });

Ответ 8

Много хороших ответов уже есть.

Попробуйте это.

Я немного изменяю приведенные выше ответы.

_data/navigation.yaml

- name: Home
  url: /
  active: home
- name: Portfolio
  url: /portfolio/
  active: portfolio
- name: Blog
  url: /blog/
  active: blog

На странице → portfolio.html (То же самое для всех страниц с относительным активным именем страницы)

---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---

<div>
  <h2>Portfolio</h2>
</div>

Navigation html part

<ul class="main-menu">
  {% for item in site.data.navigation %}
    <li class="main-menu-item">
      {% if {{page.active}} == {{item.active}} %}
        <a class="main-menu-link active" href="{{ item.url }}">{{ item.name }}</a>
      {% else %}
        <a class="main-menu-link" href="{{ item.url }}">{{ item.name }}</a>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Ответ 9

Я использовал page.path и удалял имя файла.

<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>

Ответ 10

Навигация вашего сайта должен быть неупорядоченным. Чтобы элементы списка были освещены, когда они активны, следующая жидкость script добавляет к ним "активный" класс. Этот класс должен быть разработан с помощью CSS. Чтобы определить, какая ссылка активна, используется script use ', как вы можете видеть в приведенном ниже коде.

<ul>
  <li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
    <a href="/getting-started/">Getting started</a>
  </li>
  ...
  ...
  ...
</ul>

Этот код совместим со всеми стилями permalink в Jekyll. "Сводная заявка успешно выделяет первый пункт меню по следующим URL-адресам:

  • получение стартером /
  • посаживания started.html
  • получение стартером /index.html
  • получение стартером/подстраниц/
  • получение стартером /subpage.html

Источник: http://jekyllcodex.org/without-plugin/simple-menu/