从Jekyll导航栏中排除页面

Question

我正在建立一个基本的Github托管的Jekyll网站(这么简单,我甚至不打算改变默认主题).我有一个嵌套的网站,其中包含少量的第一层页面,我想在导航栏中显示(即默认的操作模式).我还有一些第二层页面,我不想破坏导航栏.

虽然多级导航系统会很好,但我试图避免使用插件.因此,我认为最简单的解决方案是完全从导航系统中排除第二层页面.

这是一个假设的页面结构(减去其他Jekyll文件):

jekyllsite
jekyllsite/bar
jekyllsite/bar/alice
jekyllsite/bar/alice/index.md
jekyllsite/bar/bob
jekyllsite/bar/bob/index.md
jekyllsite/bar/index.md
jekyllsite/baz
jekyllsite/baz/index.md
jekyllsite/foo
jekyllsite/foo/eggs
jekyllsite/foo/eggs/index.md
jekyllsite/foo/index.md
jekyllsite/foo/spam
jekyllsite/foo/spam/index.md
jekyllsite/index.md

按照令人敬畏的降序排列,这就是我想要这样做的方式:

1. 最好的情况,上下文敏感的导航(没有插件可能不会想到):访问jekyllsite/index.md时,我会得到一个单层导航栏,提供指向foo,bar和baz的链接.访问jekyllsite/bar/index.md时,我会在顶层看到一个包含foo,bar和baz的双层导航栏,第二层包含alice和bob.

2. 下一个最佳选择是让我在全局范围内进行更改,以便只将顶级目录(foo,bar,baz)添加到导航栏.alice,bob,spam和eggs等子目录将自动从导航栏中排除.

3. 最后(我认为这可能是最简单的)将是YAML frontmatter标志来排除页面.类似于nonav: true要排除的页面前端的东西.

这似乎是一个相当常见的用例,尽管我找不到任何看起来像这三个选项中的任何一个的短路径的东西.我希望更熟悉Jekyll的人有一个"阻力最小的道路"的答案.

Answer 1

我亲自做;

主菜单中显示的页面的正面内容

---
layout: default
title: Home
menu: main
weight: 10
---

主菜单模板(类来自twitter bootstrap):

<ul class="nav navbar-nav">
  {% comment %}Jekyll can now sort on custom page key{% endcomment %}
  {% assign pages = site.pages | sort: 'weight' %} 
  {% for p in pages %}
    {% if p.menu == 'main' %}
      <li{% if p.url == page.url %} class="active"{% endif %}>
         <a href="{{ site.baseurl }}{{ p.url }}">{{ p.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

然后,您可以通过在yaml前端设置自定义var来在任何级别复制该内容:

menu : foo

并将值传递给菜单模板

{% include navbar.html  menuLevel="foo" %}

并截取它像这样:

{% if p.menu == menuLevel %}

任何不显示菜单的页面:toto都不会出现在导航中.

Answer 2

这是可能就像你没有插件的描述来创建一个多层次的,上下文敏感的导航,我都做到了.

唯一需要注意的是,您需要使用菜单层次结构维护YAML数据文件 - 使用我的方法,无法从目录结构自动生成此文件.

我会在这里展示简短版本,但我在博客上有更详细的解释:

• 使用Jekyll构建伪动态树菜单
• Bitbucket上的示例项目

1.创建一个/_data/menu.yml包含菜单层次结构的YAML数据文件():

- text: Home
  url: /
- text: First menu
  url: /first-menu/
  subitems:
    - text: First menu (sub)
      url: /first-menu/first-menu-sub/
      subitems:
        - text: First menu (sub-sub)
          url: /first-menu/first-menu-sub/first-menu-sub-sub/
- text: Second menu
  url: /second-menu/
  subitems:
    - text: Second menu (sub)
      url: /second-menu/second-menu-sub/

2. 使用以下内容创建包含文件(/_includes/nav.html):

{% assign navurl = page.url | remove: 'index.html' %}
<ul>
{% for item in include.nav %}
    <li>
        <a href="{{ item.url }}">
            {% if item.url == navurl %}
                <b>{{ item.text }}</b>
            {% else %}
                {{ item.text }}
            {% endif %}
        </a>
    </li>
    {% if item.subitems and navurl contains item.url %}
        {% include nav.html nav=item.subitems %}
    {% endif %}
{% endfor %}
</ul>

这个包含文件将负责显示每个页面的正确导航:

• 仅显示当前页面的下一级子项
• 以粗体显示当前页面

如果你不明白包含文件在封面上做了什么,请阅读我的博客文章 - 我在那里详细解释了它(在"递归包含文件"一节中).

3.在主布局文件中,嵌入包含文件:

{% include nav.html nav=site.data.menu %}

这将显示那里的导航.
请注意,我将完整的数据文件从步骤1传递到include.

就这样!

正如我在开头所说:

这种方法的唯一缺点是每次创建新页面时,还需要将页面的标题和URL插入数据文件中.

但另一方面,这使得从导航中排除某些页面非常容易:您只是不将它们添加到数据文件中.

Answer 3

如果您来自基本的Jekyll主题,从标题网站导航中排除页面的最简单方法是添加unless page.exclude例外.

(page.exclude是一个新的Yaml frontmatter属性.)

默认情况下,它位于_includes/header.html:

{% for page in site.pages %}
    {% unless page.exclude %}
       {% if page.title %}
         <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
       {% endif %}
    {% endunless %}
{% endfor %}

以及任何页面的Yaml frontmatter的相应标记:

---
... other attributes ...
exclude: true
---

感谢Michael Chadwick.