Can I generate navigation from a folder structure using Jekyll?

Question

I have a folder hierarchy, for example:

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

You get the idea.

My goal is to use Jekyll to create a static non-blog site that allows me to view the HTML versions of all my Markdown files. Thus, the navigator will have Movie Scripts, Booksand Software. When pressed Books, two submenus Fictionand will expand Nonfiction, and when you click one of them, all pages in this folder will be displayed.

I read the Jekyll documentation and looked at the Pluralsight course, and I know how to display pages from folder folders ... but I cannot figure out how to create navigation from this directory structure.

- ? , Jekyll, , ? ?

Answer 1

, , Jekyll.

, :

• _config.yml

  collections:
    movie-scripts:
      output: true
  
    books:
      output: true
  
    software:
      output: true
  

• ( , )

  _movie-scripts
  _books
  _software
  

• . , :

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

• .

  . Front-Mater , .

• _data​​strong > 3 YAML , . , , 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 :

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

, , !