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

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

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

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

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

или, возможно, даже создать целое <ul> в Джекила.

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

10 69
jekyll

10 ответов:

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

106

Я чувствую, что для самого простого требования к навигации перечисленные решения слишком сложны. Вот решение, которое включает в себя не перед вопросом, на 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 продемонстрировал.

40

похоже на решение @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>

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

17

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

определение список навигации на _config.в формате YML такой:

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

затем в _includes / header.HTML-код файл вы должны пройти через список, чтобы проверить, если текущая страница (страница.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>

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

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

13

я использовал немного 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");
});
5

мой подход заключается в том, чтобы определить пользовательскую переменную в 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");
}
4

вот метод jQuery, чтобы сделать то же самое

  var pathname = window.location.pathname;

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

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

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

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

_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>
0

Я использую page.path и происходит от имени.

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

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

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

этот код совместим со всеми стилями постоянных ссылок в Jekyll. Оператор 'contains' успешно выделяет первый пункт меню следующим образом URL-адреса:

  • начало начал/
  • начало-начал.HTML-код
  • начало работы / индекс.HTML-код
  • начало начал/подстраница/
  • начало начал/подстраница.HTML-код

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

0