Question

这很烦人。我试图在Jekyll中从静态切换到动态导航，但现在我不再能够根据其URL为链接分配类。

这是怎么回事。

<nav class="site-nav">
               <a href="{{ site.baseurl }}/about/" class="{% if page.url == '/about/' %}active{% endif %}">About</a>
                <a href="{{ site.baseurl }}/archive/" class="{% if page.url == '/archive/' %}active{% endif %}">Archive</a>
                <a href="{{ site.baseurl }}/resources/" class="{% if page.url == '/resources/' %}active{% endif %}">Resources</a>
                <a href="{{ site.baseurl }}/books/" class="{% if page.url == '/books/' %}active{% endif %}">Books</a>
                <a href="{{ site.baseurl }}/subscribe/" class="{% if page.url == '/subscribe/' %}active{% endif %}">Subscribe</a>
                <a href="{{ site.baseurl }}/sample/" class="{% if page.url == '/sample/' %}active{% endif %}">sample</a>
  </nav>

有效。然后，我将其改为

<nav>
          {% for menu in site.data.navigation[page.lang] %}
          <a href="{{site.baseurl}}{{ menu[1].url }}" class="{% if page.url == '{{ menu[1].url | prepand: site.baseurl }}' %}active{% endif %}">{{ menu[1].title }}</a>
          {% endfor %}
</nav>

现在它不起作用。任何的想法？目标是针对导航菜单URL（menu [1] .url）检查page.url，如果它的相同应用类“active”。 menu [1] .url是指_data / navigation的内容，是一个yml文件，带有基于page.lang的两个不同导航的菜单列表。

数据文件如下所示：

en:
  about:
    title: "about"
    url: "/about/"
  archive:
    title: "archive"
    url: "/archive/"
  resources:
    title: "resources"
    url: "/resources/"
  books:
    title: "books"
    url: "/books/"
  sample:
    title: "sample"
    url: "/sample/"

it:
  about:
    title: "about"
    url: "/about/"
  archive:
    title: "archive"
    url: "/archive/"
  resources:
    title: "resources"
    url: "/resources/"
  books:
    title: "books"
    url: "/books/"
  sample:
    title: "sample"
    url: "/sample/"

Answer 1

这是我实现这一目标的方式。

文件架构

en或fr文件夹中的所有帖子和页面

--fr
   |--_posts
   |--about.html
   |--...
--en
   |--_posts
   |--about.html
   |--...

Lang配置

在_config.yml添加：

defaults:
# default lang is set to en
  -
    scope:
      path: ""
    values:
      lang: "en"
# lang is set to fr in the fr folder      
  -
    scope:
      path: "fr"
    values:
      lang: "fr"

主要导航

为了在导航栏中对我的页面进行排序，我在页面前面添加了weight变量。

---
...
weight: 10
---

代码将根据当前页面lang生成导航。

<nav>
{% assign pages = site.pages | where: 'lang', page.lang | sort: 'weight' %}
{% for p in pages %}
  {% if p.title %}
    <a {% if p.url == page.url %} class="active"{% endif %} href="{{ site.baseurl }}{{ p.url }}">
      {{ p.title }}
    </a>
  {% endif %}
{% endfor %}
</nav>

Jekyll中的动态导航（使用_data yml）

1 个答案:

文件架构

Lang配置

主要导航