从Jekyll导航栏中排除页面

问题描述

我正在建立一个由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，第二层包含爱丽丝和鲍勃.

2. 下一个最好的选择是对我进行全局更改，以便仅将顶级目录(foo，bar，baz)添加到导航栏中.诸如爱丽丝，鲍勃，垃圾邮件和鸡蛋之类的子目录将自动从导航栏中排除.

3. 最后(我认为这可能是最简单的)是将YAML前置标志排除在页面之外.页面最前面的nonav: true之类的东西要排除在外.

这似乎必须是一个相当普通的用例，尽管我无法找到任何看起来像通向这三个选项的捷径的东西.我希望对Jekyll更为熟悉的人能找到阻力最小的途径".

解决方案

可以创建像您描述的没有插件的多级，上下文相关的导航，我已经做到了. /p>

唯一的警告是，您需要使用菜单层次结构维护 YAML数据文件-用我的方法，不可能从您的目录结构中自动生成它.

我将在此处显示简短版本，但我的博客上提供了更详细的说明:

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

---

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

- 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>

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

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

如果您不了解包含文件到底是做什么的，请阅读我的博客文章-我在这里详细解释了(在递归包含文件"部分). /p>

---

3.在您的主要布局文件中，嵌入包含文件:

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

这将在其中显示导航.
请注意，我要将完整的数据文件从步骤1传递到包含文件.

---

仅此而已！

就像我一开始所说的:

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

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

I am setting up a basic Github-hosted Jekyll website (so minimal, I am not even bothering to change the default theme). I have a nested site with a small number of first-tier pages that I would like to appear in the navigation bar (i.e. the default mode of operation). I also have some second-tier pages that I would like to NOT junk up the navigation bar.

While a multi-level navigation system would be nice, I'm trying to avoid using plugins. Therefore, I believe the simplest solution is to just exclude tier two pages from the navigation system entirely.

Here's a hypothetical page structure (minus the other Jekyll files):

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

In descending order of awesome, this is how I'd like this to go down:

1. Best case, context sensitive navigation (don't think possible without plugins): When visiting jekyllsite/index.md, I would get a single layer navigation bar offering me links to foo, bar, and baz. When visiting jekyllsite/bar/index.md, I would see a two-tiered navigation bar containing foo, bar, and baz at the top level, and with alice and bob in the second tier.

2. The next best option would be for me to change something globally, such that only top-level directories (foo, bar, baz) got added to the nav bar. Subdirectories such as alice, bob, spam, and eggs would be automatically excluded from the nav bar.

3. Finally (and I think this might be the easiest) would be for a YAML frontmatter flag to exclude a page. Something like nonav: true in the frontmatter of the page to be excluded.

This seems like it would have to be a fairly common use case, though I haven't been able to find anything that looks like a short path to either of these three options. I'm hoping someone more familiar with Jekyll has a "path of least resistance" answer.

解决方案

It is possible to create a multi-level, context-sensitive navigation like you described without plugins, I have done it.

The only caveat is that you need to maintain a YAML data file with your menu hierarchy - with my approach, it's not possible to generate this automatically from your directory structure.

I'll show the short version here, but I have a way more detailed explanation on my blog:

• Building a pseudo-dynamic tree menu with Jekyll
• Example project on GitHub

---

1. Create a YAML data file (/_data/menu.yml) which contains your menu hierarchy:

- 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. Create an include file (/_includes/nav.html) with the following content:

{% 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>

This include file will take care of showing the correct navigation for each page:

• showing the next level of subitems only for the current page
• displaying the current page in bold

If you don't understand what exactly the include file is doing under the covers, read my blog post - I explained it there, in great detail (in the section "The recursive include file").

---

3. In your main layout file, embed the include file:

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

This will display the navigation there.
Note that I'm passing the complete data file from step 1 to the include.

---

That's all!

As I said in the beginning:

The only disadvantage of this approach is that each time you create a new page, you also need to insert the page's title and URL into the data file.

But on the other hand, this makes it very easy to exclude some pages from the navigation: you just don't add them to the data file.

这篇关于从Jekyll导航栏中排除页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！