我可以使用 Jekyll 从文件夹结构生成导航吗？

Question

我有一个这样的文件夹层次结构：

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，单击其中一个将显示该文件夹中的所有页面。

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

谁能给我一些建议？这是 Jekyll 原生支持的，还是我必须自己编写一些生成输出的东西？我从哪里开始？

Answer 1

我相信会有很多方法，但我会使用 Jekyll 集合。

如果你是第一次，我会很详细的：

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

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

2. 将文件夹添加到项目目录的根目录（与每个集合同名）

   _movie-scripts
   _books
   _software
   

3. 为每个类别创建子文件夹。例如：

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

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

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

5. 添加 文件夹 _data 并创建 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 
   

6. 创建 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服务器，看看是否有效，进入下一步...

如果对你有帮助，请告诉我！