Jekyll - автоматически выделяет текущую вкладку в строке меню - PullRequest
75 голосов
/ 01 декабря 2011

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

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

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

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

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

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

Ответы [ 11 ]

111 голосов
/ 04 февраля 2012

Да, вы можете сделать это.
Для этого мы воспользуемся преимуществом того факта, что текущая страница всегда представлена ​​жидкой переменной: 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"
---    

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

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

Примеры

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

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

44 голосов
/ 09 октября 2013

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

17 голосов
/ 11 сентября 2013

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

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

15 голосов
/ 21 января 2015

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

Определить список навигации в вашем _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>

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

PS: Не забудьте установить на своих страницах переменную permalink .

6 голосов
/ 02 августа 2012

Я использовал немного 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");
});
4 голосов
/ 18 августа 2013

Мой подход заключается в определении пользовательской переменной в основном тексте 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");
}
1 голос
/ 29 декабря 2018

Здесь много запутанных ответов.Я просто использую if:

{% if page.name == 'limbo-anim.md' %}active{% endif %} 

Я обращаюсь непосредственно к странице и помещаю ее в нужный класс

<li><a class="pr-1 {% if page.name == 'limbo-anim.md' %}activo{% endif %} " href="limbo-anim.html">Animación</a></li>

ГотовоБыстрый.

1 голос
/ 18 марта 2017

Я использовал page.path и ушел от имени файла.

<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>
0 голосов
/ 28 октября 2017

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

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

Этот код совместим со всеми стилями постоянных ссылок в Jekyll.Оператор «содержит» успешно выделяет первый пункт меню по следующим URL:

  • Getting-Start /
  • Getting-Start.html
  • Getting-Start /index.html
  • Начало работы / подстраница /
  • Начало работы / subpage.html

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

0 голосов
/ 30 июля 2016

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

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

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

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