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

2023-11-21

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

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, and Software在上面。点击Books将展开两个子菜单,Fiction and Nonfiction,然后单击其中之一将显示该文件夹中的所有页面。

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

有人可以给我一些建议吗?这是 Jekyll 本身支持的东西,还是我必须自己编写一些生成输出的东西?我从哪里开始呢?


我确信会有很多方法,但我会使用 Jekyll 集合。

如果是第一次,我会很详细:

  1. 在您的设备上配置集合_config.yml file

    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. 添加 Markdown 文件到该集合的每个子文件夹。

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

  5. Add a 文件夹_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服务器,看看是否有效,进入下一步……

如果对您有帮助,请告诉我!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我可以使用 Jekyll 从文件夹结构生成导航吗? 的相关文章

随机推荐