Jekyll-自动突出显示菜单栏中的当前选项卡
我正在使用github托管一个静态站点,并使用Jekyll生成它 我有一个菜单栏(如Jekyll-自动突出显示菜单栏中的当前选项卡,jekyll,Jekyll,我正在使用github托管一个静态站点,并使用Jekyll生成它 我有一个菜单栏(如),希望为当前页面对应的分配一个不同的类以进行CSS突出显示 比如伪代码: 或者甚至可以在Jekyll中生成整个 如何在有问题的之外进行最小的更改就可以做到这一点?是的,您可以做到这一点。 为了实现这一点,我们将利用以下事实:当前页面始终由液态变量表示:page在模板中,并且每个帖子/页面在其page.url属性中都有一个唯一的标识符 这意味着我们只需要使用一个循环来构建导航页面,这样我们就可以根据循环的每个成
),希望为当前页面对应的
分配一个不同的类以进行CSS突出显示
比如伪代码:
或者甚至可以在Jekyll中生成整个
如何在有问题的
之外进行最小的更改就可以做到这一点?是的,您可以做到这一点。
为了实现这一点,我们将利用以下事实:当前页面始终由液态变量表示: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 %}
最后你可以使用你的新代码了!
在模板中需要导航的地方,只需“调用”include文件并向其传递一些页面和要显示的组:
<ul>
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include pages_list %}
</ul>
{%assign pages\u list=site.pages%}
{%assign group='导航'%}
{%include pages\u list%}
例子
此功能是框架的一部分。
您可以查看此处概述的代码的确切文档:
最后,您可以在网站本身中看到它的作用。只要看看右边的导航,您就会看到当前页面以绿色突出显示:我使用了一点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>
我的方法是在页面的YAML前端定义一个自定义变量,并将其输出到
元素:
<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}>
最后,使用jQuery设置活动链接:
// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
$("a[data-page-id='" + currentPage + "']").addClass("active");
}
类似于@ben foster的解决方案,但不使用任何jQuery
我需要一些简单的东西,这就是我所做的
在前面的内容中,我添加了一个名为active
e、 g
我有一个包含以下部分的导航
<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>
{%if page.active==“home”%}
{%else%}
{%endif%}
{%if page.active==“blog”%}
{%else%}
{%endif%}
{%if page.active==“关于”%}
{%else%}
{%endif%}
这对我来说很有效,因为导航中的链接数量非常有限。我觉得对于最简单的导航要求,列出的解决方案过于复杂。这里有一个解决方案,它不涉及前台、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>
{%assign current=page.url | downcase | split:'/'%}
当然,这只有在静态段提供了描绘导航的方法时才有用。任何更复杂的内容,您都必须使用像@RobertKenny displated这样的首页。以下是我的解决方案,我认为这是突出显示当前页面的最佳方式:
在\u config.yml上定义导航列表,如下所示:
## 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 %}
navigation:
- title: blog
url: /blog/
- title: about
url: /about/
- title: projects
url: /projects/
然后在您的\u includes/header.html文件中,您必须在列表中循环检查当前页面(page.url)是否与导航列表中的任何项目相似,如果相似,则只需设置活动类并将其添加到
{%endfor%}
因为您使用的是contains操作符而不是equals=操作符,所以不必编写额外的代码来处理诸如“/blog/post name/”或“projects/project name/”之类的URL。所以它工作得很好
注意:别忘了在页面上设置permalink变量。这里有一个jQuery方法可以实现同样的功能
var pathname = window.location.pathname;
$(".menu.right a").each(function(index) {
if (pathname === $(this).attr('href') ) {
$(this).addClass("active");
}
});
已经有很多好的答案了
试试这个
我稍微改变了上述答案
\u数据/导航.yaml
- name: Home
url: /
active: home
- name: Portfolio
url: /portfolio/
active: portfolio
- name: Blog
url: /blog/
active: blog
在页面->portfolio.html
(对于具有相对活动页面名称的所有页面相同)
我一直在使用page.path
并关闭文件名
<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>
您的网站导航应该是一个无序列表。为了在列表项处于活动状态时使其变亮,下面的液体脚本向其添加了一个“活动”类。这个类应该使用CSS设置样式。要检测哪个链接处于活动状态,脚本使用“contains”,如下面的代码所示
<ul>
<li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
<a href="/getting-started/">Getting started</a>
</li>
...
...
...
</ul>
-
...
...
...
此代码与Jekyll中的所有permalink样式兼容。“contains”语句成功地突出显示了以下URL处的第一个菜单项:
- 开始/
- getting-started.html
- 入门/index.html
- 入门/子页面/
- 入门/subpage.html
来源:这里有很多令人困惑的答案。
如果
,我只需使用:
{% 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>
完成了。快速。如果要为jekyll使用最小值主题,只需在header.html中的class属性上添加三元值:
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">
当然还有你的css:
a.active {
color: #e6402a;
}
好问题,好答案,谢谢。对于手动选择的选项卡列表也可以直接修改它。花了一点时间才意识到page.url包含“/”,例如“/index.html”,而不是“index.html”。这种方法会导致
---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---
<div>
<h2>Portfolio</h2>
</div>
<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>
<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>
<ul>
<li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
<a href="/getting-started/">Getting started</a>
</li>
...
...
...
</ul>
{% 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>
<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>
header_pages:
- classes.markdown
- activities.markdown
- teachers.markdown
a.active {
color: #e6402a;
}