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

Question

我一直在使用Jekyll作为静态站点(因此易于维护),并且一直坚持以下功能:

这是我的链接栏:

<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设置的一些变量.

有一些简单的方法可以解决这个问题吗？

由于条形图对所有页面都是通用的,因此它现在处于默认布局中.我可以通过使用Javascript来检测网址,并进行突出显示但是想知道在Jekyll中是否有任何方法可以做到这一点.

Answer 1

我在Jekyll设置的两页中这样做.

我要做的第一件事是在_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

然后,在我的主要布局上,我使用该信息来生成导航链接.在每个链接上,我将链接的url与当前页面的url进行比较.如果它们相等,则页面处于活动状态.否则,他们不是.

有几个特殊情况:所有博客帖子都必须突出显示"博客"链接,并且首页(英语和西班牙语)不得出现导航栏.对于这两种情况,我依赖于博客帖子和首页具有特定布局的事实(请注意,yaml上的"博客"和"项目"链接有一个额外的参数,称为"布局")

导航代码生成如下:

{% 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,但现在很少发生.

我认为导航yaml可以进入一个名为"导航"的_include或类似的东西,但我没有尝试过使用yaml,所以我不知道它是否会起作用.在我的情况下,因为我有一个多语言网站,所以更容易将所有内容配置(缺少翻译更容易发现)

我希望这有帮助.

Answer 2

作为对方工作的进一步扩展,这里有一种方法可以让它在没有潮湿的情况下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 %}

黄金位于assign获取页面URL 的语句中(自然包含index.html,然后将其剥离以匹配page.navigation漂亮的URL.

Answer 3

自问题首次出现以来,这可能是一个新功能,但我发现这可以在一个文件中完成:

1. 将导航定义为yaml标头中的变量
2. 使用液体循环变量

所以在我的_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>

Answer 4

我需要一些简单的东西,这就是我所做的.

在我的前面,我添加了一个名为的变量 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="/">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>

这对我有用,因为导航中的链接数量非常窄.