我可以使用Jekyll从文件夹结构生成导航吗？-Java 学习之路

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

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原生支持的东西，还是我必须自己写一些产生输出的东西？我从哪里开始呢？

1 回答

我相信会有很多方法，但我会使用Jekyll系列 .

如果你是第一次，我将非常详细：

在 _config.yml 文件上配置集合

collections:
  movie-scripts:
    output: true

  books:
    output: true

  software:
    output: true

Add folders to the root of the project directory （与每个集合的名称相同）

_movie-scripts
_books
_software

Create subfolder for each categorie . 例如：

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

Add the markdown files 到每个集合的子文件夹 .

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

添加 folder _data 并创建3 YAML files ，其中包含电影脚本，书籍和软件的所有数据 . 例如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's pages 以访问您的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服务器，看看是否有效，转到下一步......

请告诉我它是否对你有所帮助！

回复于 2024-05-12T13:08:39+08:00

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

1 回答

相关问题