Jekyll-메뉴 모음에서 현재 탭을 자동으로 강조 표시

나는 github를 사용하여 정적 사이트를 호스팅하고 Jekyll을 사용하여 생성합니다.

메뉴 모음 ( <ul>)이 있고 <li>현재 페이지에 해당하는 CSS 강조 표시를 위해 다른 클래스를 할당하고 싶습니다 .

그래서 유사 코드 :

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

또는 <ul>Jekyll 에서 전체 를 생성 할 수도 있습니다.

위반 사항이 아닌 최소한의 변경으로 어떻게이 작업을 수행 할 수 <ul>있습니까?

네, 할 수 있습니다.
이를 위해 우리는 현재 페이지가 page템플릿에서 항상 liquid 변수로 표현된다는 사실 과 각 게시물 / 페이지의 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 프레임 워크 의 일부입니다 . 여기에 설명 된 코드에 대한 정확한 문서를 볼 수 있습니다. http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

마지막으로 웹 사이트 자체에서 작동하는 모습을 볼 수 있습니다. 오른쪽 탐색을 보면 현재 페이지가 녹색으로 강조 표시된 것을 볼 수 있습니다. 강조 표시된 탐색 링크의 예

가장 간단한 탐색 요구 사항은 나열된 솔루션이 지나치게 복잡하다고 생각합니다. 다음은 전면 문제, 자바 스크립트, 루프 등을 포함하지 않는 솔루션입니다.

페이지 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가 시연 한 것과 같은 머리말을 사용해야합니다.

@ 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="https://stackoverflow.com/">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>

내비게이션의 링크 수가 매우 좁기 때문에 이것은 나를 위해 작동합니다.

다음은 현재 페이지를 강조하는 가장 좋은 방법이라고 생각하는 내 솔루션입니다.

다음 과 같이 _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>

그리고 equals = 연산자 대신 contains 연산자를 사용하기 때문에 '/ blog / post-name /' 또는 'projects / project-name / ' 과 같은 URL에서 작동하도록 추가 코드를 작성할 필요가 없습니다. ' . 그래서 정말 잘 작동합니다.

추신 : 페이지에 퍼머 링크 변수 를 설정하는 것을 잊지 마십시오 .

이를 위해 약간의 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>

이 자바 스크립트 스 니펫은 현재 해당 페이지를 강조합니다.

$(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");
});

내 접근 방식은 페이지의 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>

페이지 머리말에서 페이지 ID를 설정합니다.

---
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");
}

웹 사이트의 탐색은 순서가없는 목록이어야합니다. 목록 항목이 활성 상태 일 때 밝게 표시되도록하기 위해 다음 액체 스크립트는 '활성'클래스를 추가합니다. 이 클래스는 CSS로 스타일을 지정해야합니다. 활성화 된 링크를 감지하기 위해 스크립트는 아래 코드에서 볼 수 있듯이 '포함'을 사용합니다.

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

이 코드는 Jekyll의 모든 영구 링크 스타일과 호환됩니다. 'contains'문은 다음 URL에서 첫 번째 메뉴 항목을 성공적으로 강조 표시합니다.

• 시작하기/
• getting-started.html
• getting-started / index.html
• 시작하기 / 하위 페이지 /
• getting-started / subpage.html

출처 : http://jekyllcodex.org/without-plugin/simple-menu/

여기에 많은 혼란스러운 대답이 있습니다. 나는 단순히 다음을 사용합니다 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>

끝난. 빨리.

나는 page.path파일 이름을 사용 하고 제거했습니다.

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

많은 좋은 답변이 이미 있습니다.

이 시도.

위의 답변을 약간 변경합니다.

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

jekyll에 Minima 테마를 사용하는 경우 header.html의 클래스 속성에 삼항 만 추가하면됩니다.

 <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">

전체 발췌 :

        <div class="trigger">
        {%- for path in page_paths -%}
          {%- assign my_page = site.pages | where: "path", path | first -%}
          {%- if my_page.title -%}
          <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
          {%- endif -%}
        {%- endfor -%}
      </div>

이것을 _config.yml에 추가하십시오.

header_pages:
  - classes.markdown
  - activities.markdown
  - teachers.markdown

그리고 물론 귀하의 CSS :

   a.active {
                color: #e6402a;
            }

다음은 동일한 작업을 수행하는 jQuery 메서드입니다.

  var pathname = window.location.pathname;

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