我可以使用Jekyll从文件夹结构生成导航吗? [英] Can I generate navigation from folder structure with Jekyll?

问题描述

我有这样的文件夹层次结构:

I have a folder hierarchy like this:

movie scripts/
    Independence Day.md
    Alien.md
    The Omega Man.md
books/
    fiction/
        Dune.md
        Childhood's End.md
    nonfiction/
        Unended Quest.md
software/
    Photoshop.md
    Excel.md

您明白了.

我的目标是使用Jekyll生成一个静态的非博客网站，该网站使我可以浏览所有Markdown文件的HTML版本.因此，导航栏上将具有Movie Scripts，Books和Software.单击Books将取消卷曲两个子菜单Fiction和Nonfiction，然后单击其中一个将显示该文件夹中的所有页面.

My goal is to use Jekyll to generate a static non-blog site that lets me browse HTML versions of all my Markdown files. So the navbar would have Movie Scripts, Books, and Software on it. Clicking Books would unfurl two submenus, Fiction and Nonfiction, and clicking one of those would show all pages in that folder.

我已经阅读了Jekyll的文档，并观看了Pluralsight的课程，并且我知道如何从页面文件夹中呈现页面...但是我还不太清楚如何从该目录结构创建导航.

I've read Jekyll's documentation and watched the Pluralsight course on it, and I know how to render pages from a pages folder... but I can't quite work out how to create navigation from this directory structure.

有人可以给我一些提示吗?这是Jekyll本机支持的东西，还是我必须写一些自己生成输出的东西?我从哪里开始呢?

Could anyone give me some tips? Is this something Jekyll natively supports, or will I have to write something that generates the output myself? Where do I start with this?

推荐答案

我敢肯定会有很多方法，但是我会使用Jekyll集合.

I'm sure there will be many approaches, but I would use Jekyll collections.

如果是您第一次来，我会非常详细:

If is your first time, I will be very detailed:

1. 在您的 _config.yml 文件上配置集合

collections:
  movie-scripts:
    output: true

  books:
    output: true

  software:
    output: true

将文件夹添加到项目目录的根目录(与每个集合的名称相同)

Add folders to the root of the project directory (same name as each one of the collections)

_movie-scripts
_books
_software

为每个类别创建子文件夹.例如:

Create subfolder for each categorie. For e.g.:

_movie-scripts/sci-fi
_books/fiction
_software/Jekyll

将降价文件添加到集合的每个子文件夹中.

Add the markdown files to each of the collection’s subfolders.

注意:您还应该使用Front-Mater来创建将来可能需要过滤或搜索的类别.

添加一个文件夹_data 并创建3个 YAML文件，其中包含电影脚本，书籍和软件的所有数据.例如movie-scripts.yml:

Add a folder _data and create 3 YAML files with all the data for your movie-scripts, books and software. For e.g the movie-scripts.yml:

- title: Back to the Future
  image-path: /images/movie-scripts/back-to-the-future.jpg
  url: http://www.imdb.com/title/tt0088763/
  short-description: This is a 1980s sci-fi classic about traveling through time
  year: 1980
  categorie: sci-fi

- title: Star Wars
  image-path: /images/movie-scripts/start-wars.jpg
  url: http://www.imdb.com/title/tt0076759/
  short-description: Star Wars is an American epic space opera franchise centered on a film series created by George Lucas
  year: 1977
  categorie: sci-fi 

创建3个 HTML页面，以访问您的3个收藏集(电影脚本，书籍和软件).例如电影脚本，这是您网站上最近添加的10条内容:

Create 3 HTML's pages to access your 3 collections (movie-scripts, books and software). For e.g. the movie-scripts, the 10 most recent additions to your site:

---
layout: page
permalink: /movie-scripts/top-ten/
---
{% for movie in site.data.movie-scripts limit:10 %}
    <li>
            <img src="{{ movie.image-path }}" alt="{{ movie.title }}"/>
        <a href="{{ movie.url }}">{{ movie.title }}</a>
        <p>{{ movie.short-description }}</p>
        <p>{{ movie.year }}</p>
        <p>{{ movie.categorie }}</p>
     </li>
{% endfor %}

建议:如果这是您的第一次，请执行婴儿步骤.尝试首先进行第一次收集，逐步执行，每次运行Jekyll服务器并查看是否可行，然后继续下一步...

请让我知道它是否对您有帮助！

Let me know if it help you, please!

这篇关于我可以使用Jekyll从文件夹结构生成导航吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！