首页 文章

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

提问于
浏览 次
0

这非常烦人 . 我试图在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/"
html jekyll liquid

1 回答

  • 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>
    回复于

相关问题