杰基尔。液体：为特殊导航项指定 active/current 状态

Question

网站有多个背景。为了使导航更直观，需要将额外的 class（在本例中 CSS 中的目标 .active.projects）添加到其中一个导航项（在本例中为 /projects/）。

我的第 2 个 elsif 不起作用。 /用于主页。

      {% assign links = site.data.navigation %}
      {% for link in links %}
        {% assign class = nil %}
        {% if page.url == link.url %}
          {% assign class = 'active' %}
          {% elsif link.url != '/' and page.url contains link.url %}
          {% assign class = 'active' %}
          {% elsif link.url == '/projects/' and page.url contains link.url %}
          {% assign class = 'active projects' %}
        {% endif %}
          <li class="{{ class }}">
            <a href="{{ site.url }}{{ site.baseurl }}{{ link.url }}">{{ link.name }}</a>
          </li>
      {% endfor %}

navigation.yml

- name: Home
  url:  /
- name: Blog
  url: /blog/
- name: Projects
  url: /projects/
- name: About
  url: /about/

如何为特殊导航项指定活动状态？

Answer 1

更改顺序：

  {% assign links = site.data.navigation %}
  {% for link in links %}
    {% assign class = nil %}
    {% if page.url == link.url and link.url != '/projects/' %}
      {% assign class = 'active' %}
    {% elsif link.url == '/projects/' and page.url contains link.url %}
      {% assign class = 'active projects' %}
    {% elsif link.url != '/' and page.url contains link.url %}          
      {% assign class = 'active' %}
    {% endif %}
  {% endfor %}

杰基尔。液体：为特殊导航项指定 active/current 状态

Jekyll. Liquid: Specify active/current state for exceptional nav item

liquid

jekyll