Html Jekyll 选择当前页面 url 并更改其类
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6366188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jekyll select current page url and change its class
提问by Nemo
I've been using Jekyll for a static site (so that its easy to maintain), and have been stuck at the following feature :
我一直在将 Jekyll 用于静态站点(以便于维护),并且一直坚持以下功能:
This is my link bar :
这是我的链接栏:
<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>
The active
class handles the coloring. What I want is this class be applied by jekyll depending on some variable set using liquid/YAML.
本active
类处理着色。我想要的是这个类由 jekyll 应用,具体取决于使用液体/YAML 的一些变量集。
Is there some easy way to go about this?
有什么简单的方法可以解决这个问题吗?
Since the bar is common to all the pages, it is now in the default layout. I could go around by using Javascript to detect the url, and do the highlighting but was wondering if there was any way of doing this in Jekyll.
由于该栏对所有页面都是通用的,因此它现在处于默认布局中。我可以通过使用 Javascript 来检测 url 并进行突出显示,但想知道在 Jekyll 中是否有任何方法可以做到这一点。
回答by kikito
I do this in two pages I have set up in Jekyll.
我在 Jekyll 中设置的两页中执行此操作。
The first thing I do is creating an entry inside _config.yml with the information of all the pages:
我做的第一件事是在 _config.yml 中创建一个条目,其中包含所有页面的信息:
# 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
Then, on my main layout, I use that information to generate the navigation links. On each link, I compare the url of the link with the url of the current page. If they are equal, the page is active. Otherwise, they are not.
然后,在我的主布局上,我使用该信息生成导航链接。在每个链接上,我将链接的 url 与当前页面的 url 进行比较。如果它们相等,则页面处于活动状态。否则,他们不是。
There's a couple special cases: all blog posts must highlight the "blog" link, and the front pages (English and Spanish) must not present the nav bar. For both cases, I rely on the fact that blog posts and front pages have specific layouts (notice that the "Blog" and "Project" links on the yaml have an extra parameter called "layout")
有一些特殊情况:所有博客文章都必须突出显示“博客”链接,并且首页(英语和西班牙语)不得显示导航栏。对于这两种情况,我都依赖于博客文章和首页具有特定布局的事实(注意 yaml 上的“博客”和“项目”链接有一个名为“布局”的额外参数)
The navigation code is generated like this:
导航代码是这样生成的:
{% 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 %}
I still have to remember adding an entry to _config.yaml every time I add a new page, and then restart Jekyll, but it happens very infrequently now.
每次添加新页面时,我仍然必须记住在 _config.yaml 中添加一个条目,然后重新启动 Jekyll,但现在很少发生。
I thinkthe navigation yaml could go inside an _include called "navigation" or something similar, but I haven't tried using yaml inside those so I don't know whether it will work. In my case, since I've got a multi-lingual site, it's easier to have everything inside config (missing translations are easier to spot)
我认为导航 yaml 可以进入名为“navigation”或类似的 _include 中,但我还没有尝试在其中使用 yaml,所以我不知道它是否有效。就我而言,由于我有一个多语言站点,因此将所有内容都放在配置中会更容易(缺少翻译更容易发现)
I hope this helps.
我希望这有帮助。
回答by Oli
As a further extension on the work of the other, here is a way to make it work without soggy index.html
showing on all your beautiful URLs:
作为另一个工作的进一步扩展,这里有一种方法可以使它工作而不会index.html
在所有漂亮的 URL 上显示潮湿:
---
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 %}
The gold is in the assign
statement which gets the page URL (which naturally includes the index.html and then strips it off to match the page.navigation pretty URLs.
黄金在assign
获取页面 URL的语句中(它自然包含 index.html,然后将其剥离以匹配 page.navigation 漂亮的 URL。
回答by John Mee
This may be a new feature since the question first appeared, but I've discovered this can all be done in one file:
自问题首次出现以来,这可能是一项新功能,但我发现这一切都可以在一个文件中完成:
- define the navigation as a variable in the yaml header
- loop over the variable using liquid
- 将导航定义为 yaml 标头中的变量
- 使用液体循环变量
So in my _layouts/base.html
I have:
所以在我的_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>
Which generates this on the Home
page:
在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>
And this on the Travel
page:
这在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>
回答by RobertKenny
I needed something simple, this is what I did.
我需要一些简单的东西,这就是我所做的。
In my front matter I added a variable called active
在我的前面,我添加了一个名为的变量 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.
这对我有用,因为导航中的链接数量非常少。
回答by kaiser
Same navigation on all pages
所有页面上的导航相同
After reading all that answers, I came up with a new and easier to maintain solution:
阅读完所有答案后,我想出了一个新的且更易于维护的解决方案:
- Add
{% include nav.html %}
to your_layouts/layout.html
file - Add a
nav.html
file to your_includes
folder Add the following content to your
nav.html
file. It will determine if your link is on the current page and add a class ofactive
as well as removeindex.html
from your link. It will also work with a subfolder like/repo-name
, which is needed for GitHubgh-pages
Pages branch.<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>
Then add the nav link array to your
_config.yml
file as following. Mind the right indentation, as YAML is pretty picky on that (Jekyll as well).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
- 添加
{% include nav.html %}
到您的_layouts/layout.html
文件 - 将
nav.html
文件添加到您的_includes
文件夹 将以下内容添加到您的
nav.html
文件中。它将确定您的链接是否在当前页面上并添加一类active
以及index.html
从您的链接中删除。它也适用于像GitHub Pages 分支/repo-name
所需的子文件夹。gh-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
Navigation only on home - "back" for others
仅在首页导航 - 为其他人“返回”
Assuming that the link to your "Home"-page (index.html
) is the first array part inside the _config.html
s navigation
array, you can use the following snippet to show the navigation to the different pages on the main/home page and a link back to the home page on all other pages:
假设指向您的“主页”页面 ( index.html
)的链接是_config.html
snavigation
数组中的第一个数组部分,您可以使用以下代码段来显示主页面/主页上不同页面的导航以及返回主页的链接所有其他页面上的页面:
<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>
回答by incarnate
Navigation highlighting logic is the last thing I would do in server side. I'd rather stick with nice, clean and unobtrusive approach using JS/jQuery (if this option works for you).
导航突出显示逻辑是我在服务器端做的最后一件事。我宁愿坚持使用 JS/jQuery 的漂亮、干净和不引人注目的方法(如果这个选项适合你)。
The elements which need to be highlighted go inside a common layout like this:
<nav> <a id="section1" href="#">Section 1</a> <a id="section2" href="#">Section 2</a> <a id="section3" href="#">Section 3</a> </nav>
In your page (or even in nested layouts) you place an element with
data-ref="#section1"
(in fact, any jQuery selector will work).Now, include following JS snippet (shown as jQuery, but any framework will do) in
<head>
:$(function() { $("[data-ref]").each(function() { $($(this).attr("data-ref")).addClass("current"); }); });
需要突出显示的元素位于一个通用布局中,如下所示:
<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"
(实际上,任何 jQuery 选择器都可以使用)。现在,将以下 JS 片段(显示为 jQuery,但任何框架都可以)包含在
<head>
:$(function() { $("[data-ref]").each(function() { $($(this).attr("data-ref")).addClass("current"); }); });
This approach is nice, because it makes no assumptions on underlying architecture, frameworks, languages and template engines.
这种方法很好,因为它不对底层架构、框架、语言和模板引擎做任何假设。
Update:As some folks pointed outyou might want to omit the $(function() { ... })
part which binds the script to DOM ready event — and just push the script down to the bottom of your <body>
.
更新:正如一些人指出的那样,您可能希望省略将$(function() { ... })
脚本绑定到 DOM 就绪事件的部分——只需将脚本推到<body>
.
回答by Damjan Pavlica
This works for me (sorry for non-english code):
这对我有用(抱歉非英文代码):
<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>
回答by Hyman Morris
With Jekyll 3.4.3, this works :
使用 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>
回答by bitconquer
Adding to the solution of incarnate, the simplest possible line of code with jQuery is this:
添加到 incarnate 的解决方案中,使用 jQuery 的最简单的代码行是这样的:
$( "a[href='{{ page.url | remove: "index.html" }}']" ).addClass("current");
Works perfectly for me.
非常适合我。
回答by Reg T
I took a simple CSS approach. First, add an identifier in the front matter...
我采用了一个简单的 CSS 方法。首先,在前面添加一个标识符...
---
layout: page
title: Join us
permalink: /join-us/
nav-class: join <-----
---
Add this as a class in <body>
andyour nav...
将此添加为一个类<body>
,您的导航...
<body class="{{ page.nav-class }}">
and
和
<li class="{{ page.nav-class }}">...</a></li>
Then link these for all pages in CSS, e.g:
然后将这些链接到 CSS 中的所有页面,例如:
.about .about a,
.join .join a,
.contact .contact a {
color: #fff;
}
The main downside being you need to hard code the style rules.
主要缺点是您需要对样式规则进行硬编码。