Jekyll – 自动突出显示菜单栏中的当前选项卡
我正在使用github主持一个静态网站和Jekyll生成它。
我有一个菜单栏（如<ul> ），并希望为当前页面的<li>分配一个不同的CSS高亮显示类。
所以像伪代码的东西：
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
或者甚至可以在Jekyll中生成整个<ul> 。
如何在违规的<ul>之外进行微小的更改呢？
是的，你可以做到这一点。
为了实现这一点，我们将利用这样一个事实，即当前页面总是由模板中的液体variablespage表示，并且每个post/页面在其page.url属性中都有一个唯一的标识符。
这意味着我们只需要使用一个循环来build立我们的导航页面，通过这样做，我们可以检查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>
例子
这个function是Jekyll-Bootstrap框架的一部分。 您可以在此处查看代码的确切文档： http : //jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
最后，你可以看到它在网站本身的行动。 只要看右边的导航，你会看到当前页面以绿色突出显示 ： 示例高亮显示的导航链接
我觉得最简单的导航要求，列出的解决scheme过于复杂。 这里有一个解决scheme，不涉及前面的问题，JavaScript，循环等
由于我们可以访问页面的URL，所以我们可以对URL进行规范化和分割，并对这些段进行testing，如下所示：
{% 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>
当然，这只有在静态段提供划定导航的方法时才有用。 任何更复杂的事情，你将不得不像罗伯特·肯尼（RobertoKenny）所说的那样使用前面的事情。
类似@ ben-foster的解决scheme，但不使用任何jQuery
我需要一些简单的东西，这就是我所做的。
在我的前面，我添加了一个名为active的variables
例如
--- 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>
这适用于我，因为导航中的链接数量非常窄。
这是我的解决scheme，我认为是突出显示当前页面的最佳方法：
在你的_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 =运算符，所以你不必编写额外的代码来使它与URL（比如'/ blog / post-name /'或'projects / project-name / ' 。 所以它工作得很好。
PS：不要忘记在你的页面上设置永久链接variables。
我使用了一点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"); });
我的方法是在页面的YAML前端定义一个自定义variables，并将其输出到<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"); }
这是一个jQuery方法来做同样的事情
var pathname = window.location.pathname; $(".menu.right a").each(function(index) { if (pathname === $(this).attr('href') ) { $(this).addClass("active"); } });
很多好的答案已经在那里了。
尝试这个。
我略微改变了上面的答案。
_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>
我一直在使用page.path并page.path文件名。
<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>
您的网站的导航应该是一个无序的列表。 为了让列表项在活动时变亮，下面的液体脚本为它们添加了“活动”类。 这个类应该用CSS来样式化。 要检测哪个链接处于活动状态，脚本使用“包含”，如下面的代码所示。
<ul> <li {% if page.url contains '/getting-started' %}class="active"{% endif %}> <a href="/getting-started/">Getting started</a> </li> ... ... ... </ul>
这个代码与Jekyll的所有永久链接样式兼容。 'contains'语句成功地突出显示了以下URL的第一个菜单项：
- 入门/
- 越来越-started.html
- 工具入门/ index.html的
- 越来越-开始/子页/
- 越来越-开始/ subpage.html
资料来源： http ： //jekyllcodex.org/without-plugin/simple-menu/
