我正在使用github托管一个静态站点,并使用Jekyll生成它。
我有一个菜单栏(如<ul>
),并希望将<li>
与当前页面相对应的菜单分配给CSS高亮显示一个不同的类。
所以像伪代码:
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
甚至<ul>
在Jekyll中生成整体。
如何在违规之外进行最小限度的更改<ul>
?
Answers:
是的,您可以这样做。
为此,我们将利用以下事实:当前页面始终由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框架的一部分。您可以查看此处概述的代码的确切文档:http : //jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
最终,您可以在网站本身中看到它的运行情况。只需查看右侧导航,您就会看到当前页面以绿色突出显示:示例突出显示的导航链接
jekyll 2.4.0 | Error: The included file '/Users/joelglovier/project/jekyllsite/_includes/pages_list' should exist and should not be a symlink
.html
扩展名添加到pages_list并包括扩展名
我觉得对于最简单的导航要求,列出的解决方案过于复杂。这是一个不涉及前端,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演示的前端问题。
classs="active"
吗?
.active
,则为是。在上面的答案中,作者说她/他的样式表中要调用的类是.current
。没什么大不了的。
类似于@ 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>
并且由于使用的是contains运算符而不是equals =运算符,因此无需编写额外的代码即可使其与诸如'/ blog / post-name /'或'projects / project-name / '。所以它真的很好。
PS:请不要忘记在页面上设置永久链接变量。
/
因为所有页面网址均包含前导斜杠。以下作品: {% for link in site.navigation %} {% assign class = nil %} {% if page.url == link.url %} {% assign class = 'active' %} {% elsif page.url != '/' and page.url contains link.url %} {% assign class = 'active parent' %} {% endif %} <a href="{{link.url}}" class="{{class}}">{{link.title}}</a> {% endfor %}
我使用了一些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前端定义一个自定义变量,并将其输出到<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设置样式。要检测哪个链接处于活动状态,脚本将使用“ contains”,如下面的代码所示。
<ul>
<li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
<a href="https://stackoverflow.com/getting-started/">Getting started</a>
</li>
...
...
...
</ul>
此代码与Jekyll中的所有永久链接样式兼容。“包含”语句成功突出显示了以下URL处的第一个菜单项:
很多好的答案已经在那里。
试试这个。
我稍微改变了以上答案。
_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中的class属性上添加一个三进制:
<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;
}