Html Jekyll 选择当前页面 url 并更改其类

Question

提问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 activeclass 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 中是否有任何方法可以做到这一点。

Answer 1

回答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.

我希望这有帮助。

Answer 2

回答by Oli

As a further extension on the work of the other, here is a way to make it work without soggy index.htmlshowing 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 assignstatement 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。

Answer 3

回答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.htmlI 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 Homepage:

在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 Travelpage:

这在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>

Answer 4

回答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.

这对我有用，因为导航中的链接数量非常少。

Answer 5

回答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.htmlfile
Add a nav.htmlfile to your _includesfolder

Add the following content to your nav.htmlfile. It will determine if your link is on the current page and add a class of activeas well as remove index.htmlfrom your link. It will also work with a subfolder like /repo-name, which is needed for GitHub gh-pagesPages 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.ymlfile 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.htmls navigationarray, 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.htmlsnavigation数组中的第一个数组部分，您可以使用以下代码段来显示主页面/主页上不同页面的导航以及返回主页的链接所有其他页面上的页面：

<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>

Answer 6

回答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>.

Answer 7

回答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>

Answer 8

回答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>

Answer 9

回答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.

非常适合我。

Answer 10

回答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.

主要缺点是您需要对样式规则进行硬编码。

Html Jekyll 选择当前页面 url 并更改其类

提问by Nemo

回答by kikito

回答by Oli

回答by John Mee

回答by RobertKenny

回答by kaiser

Same navigation on all pages

所有页面上的导航相同

Navigation only on home - "back" for others

仅在首页导航 - 为其他人“返回”

回答by incarnate

回答by Damjan Pavlica

回答by Hyman Morris

回答by bitconquer

回答by Reg T

相关推荐

最近更新

标签

Html Jekyll 选择当前页面 url 并更改其类

提问by Nemo

回答by kikito

回答by Oli

回答by John Mee

回答by RobertKenny

回答by kaiser

Same navigation on all pages

所有页面上的导航相同

Navigation only on home - "back" for others

仅在首页导航 - 为其他人“返回”

回答by incarnate

回答by Damjan Pavlica

回答by Hyman Morris

回答by bitconquer

回答by Reg T

相关推荐

Valign 在 Outlook HTML 电子邮件中不起作用

如何使用 HTML 和 CSS 创建浮雕边框？

Html 非常简单的 javascript 根本不起作用

HTML 5 页面转换

相关推荐

最近更新

标签