CODEWITHSUNDEEP
jekyll
GreenTriangle
GreenTriangle

Reputation: 2460

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

You get the idea.

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.

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.

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?

Upvotes: 10

Views: 2803

Answers (1)

Maria Coding
Maria Coding

Reputation: 121

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. Configure Collections on your _config.yml file

    collections:
  movie-scripts:
    output: true

  books:
    output: true

  software:
    output: true

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

    _movie-scripts
_books
_software

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

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

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

    Note: You should use also the Front-Mater to create categories that you might need to filter or search in the future.

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

  6. 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 %}

Advice: If this is your first time, do baby steps. Try to do the first colection first, step by step, run the Jekyll server at each time and see if works, go to the next step...

Let me know if it help you, please!

Upvotes: 11

Related Questions