Jekyllselect当前页面的url并更改其类别
我一直在使用Jekyll做一个静态的站点（所以很容易维护），并且一直停留在以下function上：
这是我的链接吧：
<ul id="links"> <li class="first"><a class="active" href="/">Home</a></li> <li><a href="./associate.html">Associate With Us</a></li> <li><a href="./media.html">Media</a></li> <li><a href="./clients.html">Clients</a></li> <li class="last"><a href="./contact.html">Contact Us</a></li> </ul> active类处理着色。 我想要的是这个类由jekyll应用取决于使用液体/ YAML设置的一些variables。
有一些简单的方法可以去解决这个问题吗？
由于栏是所有页面共有的，因此它现在处于默认布局。 我可以通过使用Javascript来检测url，做突出显示，但想知道是否有任何方式在Jekyll这样做。
我在杰基尔build立了两个页面。
我做的第一件事是在_config.yml里面用所有页面的信息创build一个条目：
# this goes inside _config.yml. Change as required navigation: - text: What we do url: /en/what-we-do/ - text: Who we are url: /en/who-we-are/ - text: Projects url: /en/projects/ layout: project - text: Blog url: /en/blog/ layout: post
然后，在我的主布局上，我使用这些信息来生成导航链接。 在每个链接上，我将链接的url与当前页面的url进行比较。 如果相等，则该页面处于活动状态。 否则，他们不是。
有几个特殊情况：所有博客文章都必须突出显示“博客”链接，前台页面（英文和西class牙文）不能显示导航栏。 对于这两种情况，我都依赖于博客文章和首页具有特定布局的事实（请注意，yaml上的“Blog”和“Project”链接有一个额外的参数，称为“layout”）
导航代码是这样生成的：
{% unless page.layout == 'front' %} <ul class="navigation"> {% for link in site.navigation %} {% assign current = nil %} {% if page.url == link.url or page.layout == link.layout %} {% assign current = 'current' %} {% endif %} <li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}"> <a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a> </li> {% endfor %} </ul> {% endunless %}
每次添加一个新页面时，我仍然需要记得在_config.yaml中添加一个条目，然后重新启动Jekyll，但现在很less发生。
我认为导航yaml可以进入一个名为“导航”或类似的_include，但我没有尝试在内部使用yaml，所以我不知道它是否会工作。 在我的情况下，由于我有一个多语言的网站，所以configuration中的一切都更容易（缺less翻译更容易发现）
我希望这有帮助。
作为对方的工作的进一步延伸，这里有一个方法可以让你的网站在所有漂亮的url上都没有潮湿的index.html ：
--- navigation: - text: Home url: / - text: Blah url: /blah/ --- {% assign url = page.url|remove:'index.html' %} {% for link in page.navigation %} <li {% if url == link.url %}class="active"{% endif %}> <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a> </li> {% endfor %}
黄金是在assign声明获取页面的URL（这自然包括index.html，然后剥离它匹配的page.navigation漂亮的url。
自问题第一次出现以来，这可能是一个新function，但是我发现这可以在一个文件中完成：
- 将导航定义为yaml标题中的variables
- 使用液体循环variables
所以在我的_layouts/base.html我有：
--- navigation: - text: Home url: /index.html - text: Travel title: Letters home from abroad url: /travel.html --- <ul> {% for link in page.navigation %} <li {% if page.url == link.url %}class="current"{% endif %}> <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a></li> {% endfor %} </ul>
这在Home上生成这个：
<ul> <li class="current"><a href="/index.html" title="">Home</a></li> <li><a href="/travel.html" title="Letters home from abroad">Travel</a></li> </ul>
这在Travel页面上：
<ul> <li><a href="/index.html" title="">Home</a></li> <li class="current"><a href="/travel.html" title="Letters home from abroad">Travel</a></li> </ul>
我需要一些简单的东西，这就是我所做的。
在我的前面，我添加了一个名为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：
- 将
{% include nav.html %}添加到{% include nav.html %}_layouts/layout.html文件中 - 将
nav.html文件添加到nav.html文件夹 -
将以下内容添加到您的
nav.html文件。 它将确定您的链接是否在当前页面上，并添加一个active类以及从链接中删除index.html。 它也将使用像/repo-name这样的子文件夹，这是GitHubgh-pages页面分支需要的 。<nav> <ul class="nav"> {% assign url = page.url|remove:'index.html' %} {% for link in site.navigation %} {% assign state = '' %} {% if page.url == link.url %} {% assign state = 'active ' %} {% endif %} <li class="{{ state }}nav-item"> <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a> </li> {% endfor %} </ul> </nav> -
然后将导航链接数组添加到
_config.yml文件中，如下所示。 注意正确的缩进，因为YAML对此非常挑剔（Jekyll也是如此）。navigation: - text: Home title: Back to home page url: /index.html - text: Intro title: An introduction to the project url: /intro.html - text: etc. title: ... url: /foo.html
仅在家中导航 – 为他人“回”
假设指向“Home”页面（ index.html ）的链接是_config.html navigation数组中的第一个数组部分，您可以使用以下代码片段来显示导航到主/主页上的不同页面并链接到所有其他页面上的主页：
<nav> <ul class="grid"> {% assign url = page.url | remove:'/index.html' %} {% assign home = site.navigation.first %} {% if url == empty %} {% for link in site.navigation %} {% assign state = '' %} {% if page.url == link.url %} {% assign state = 'active ' %} {% endif %} {% if home.url != link.url %} <li class="{{ state }}nav-item"> <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a> </li> {% endif %} {% endfor %} {% else %} <li class="nav-item active"> <a href="{{ home.url }}" title="{{ home.title }}">{{ home.text }}</a> </li> {% endif %} </ul> </nav>
导航高亮逻辑是我在服务器端做的最后一件事情。 我宁愿使用JS / jQuery（如果这个选项适合你），使用干净而不显眼的方法。
-
需要突出显示的元素进入一个共同的布局，如下所示：
<nav> <a id="section1" href="#">Section 1</a> <a id="section2" href="#">Section 2</a> <a id="section3" href="#">Section 3</a> </nav> -
在你的页面（甚至是嵌套的布局）中，你可以放置一个元素
data-ref="#section1"（实际上，任何jQueryselect器都可以）。 -
现在，在
<head>包含以下JS代码片段（显示为jQuery，但任何框架都可以）：$(function() { $("[data-ref]").each(function() { $($(this).attr("data-ref")).addClass("current"); }); });
这种方法很好，因为它没有对底层架构，框架，语言和模板引擎做任何假设。
更新：正如一些人指出的，你可能想省略$(function() { ... })部分，将脚本绑定到DOM就绪事件 – 只需将脚本推到你的<body>的底部。
添加到肉身的解决scheme，与jQuery最简单的可能的代码行是这样的：
$( "a[href='{{ page.url | remove: "index.html" }}']" ).addClass("current");
为我完美的作品。
我采取了一个简单的CSS方法。 首先，在前面添加一个标识符…
--- layout: page title: Join us permalink: /join-us/ nav-class: join <----- ---
添加这个作为一个类在<body> 和你的导航…
<body class="{{ page.nav-class }}">
和
<li class="{{ page.nav-class }}">...</a></li>
然后将这些链接到CSS中的所有页面，例如：
.about .about a, .join .join a, .contact .contact a { color: #fff; }
主要的缺点是你需要硬编码样式规则。
用Jekyll 3.4.3，这个工作：
<ul> {% for my_page in site.pages %} {% if my_page.title %} <li {% if my_page.url == page.url %} class="active" {% endif %}> <a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }} </a> </li> {% endif %} {% endfor %} </ul>
我做了这个（非英文代码对不起）：
<nav> <a href="/kursevi" {% if page.url == '/kursevi/' %} class="active"{% endif %}>Kursevi</a> <a href="/radovi" {% if page.url == '/radovi/' %} class="active"{% endif %}>Radovi</a> <a href="/blog" {% if page.url == '/blog/' %} class="active"{% endif %}>Blog</a> <a href="/kontakt" {% if page.url == '/kontakt/' %} class="active"{% endif %}>Kontakt</a> </nav>
