Jekyll - Automatically highlight current tab in menu bar

后端未结

关注

 12  936

鱼传尺愫

I am using github to host a static site and Jekyll to generate it.

I have a menu bar (as

correspo

相关标签:

12条回答

谎友^

2020-12-22 15:41

I used a little bit of JavaScript to accomplish this. I have the following structure in the menu:

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

This javascript snippet highlights the current corresponding page:

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

0 讨论(0)

忘掉有多难

2020-12-22 15:42
The navigation of your website should be an unordered list. To get the list items to lighten up when they are active, the following liquid script adds an 'active' class to them. This class should be styled with CSS. To detect which link is active, the script uses ‘contains’, as you can see in the code below.
```
<ul>
  <li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
    <a href="/getting-started/">Getting started</a>
  </li>
  ...
  ...
  ...
</ul>
```
This code is compatible with all permalink styles in Jekyll. The ‘contains’ statement succesfully highlights the first menu item at the following URL’s:
- getting-started/
- getting-started.html
- getting-started/index.html
- getting-started/subpage/
- getting-started/subpage.html
Source: http://jekyllcodex.org/without-plugin/simple-menu/
0 讨论(0)
发布评论:

提交评论
- 加载中...

野的像风

2020-12-22 15:43

My approach is to define a custom variable in the YAML front matter of the page and output this on the <body> element:

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

My navigation links include the identifier of the page that they link to:

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

In the page front matter we set the page id:

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

And finally a bit of jQuery to set the active link:

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

0 讨论(0)

-上瘾入骨i

2020-12-22 15:48

if you're using the Minima theme for jekyll, you only need to add a ternary on the class attribute in header.html:

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

the full excerpt:

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

add this to your _config.yml

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

And then of course your css:

   a.active {
                color: #e6402a;
            }

0 讨论(0)

北海茫月

2020-12-22 15:50

Similar to @ben-foster's solution but without using any jQuery

I needed something simple, this is what I did.

In my front matter I added a variable called active

e.g.

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

I have a navigation include with the following section

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

This works for me as the amount of links in the navigation are very narrow.

0 讨论(0)

感动是毒

2020-12-22 15:50
Here's my solution which I think is the best way to highlight the current page:

Define a navigation list on your _config.yml like this:
```
navigation:
  - title: blog
    url: /blog/
  - title: about
    url: /about/
  - title: projects
    url: /projects/
```
Then in your _includes/header.html file you must loop through the list to check if the current page (page.url) resembles any item of the navigation list, if so then you just set the active class and add it to the <a> tag:
```
<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>
```
And because you're using the contains operator instead of the equals = operator, you don't have to write extra code to make it work with URLs such as '/blog/post-name/' or 'projects/project-name/'. So it works really well.

P.S: Don't forget to set the permalink variable on your pages.
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页