我有一个像这样的文件夹层次结构:
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 版本。因此,导航栏上将包含电影脚本
、书籍
和软件
。单击Books
将展开两个子菜单:Fiction
和Nonfiction
,单击其中一个将显示该文件夹中的所有页面。
我已经阅读了 Jekyll 的文档并观看了有关它的 Pluralsight 类(class),并且我知道如何从页面文件夹渲染页面......但我不太清楚如何从这个目录结构创建导航。
有人可以给我一些建议吗?这是 Jekyll 本身支持的东西,还是我必须自己编写一些生成输出的东西?我从哪里开始呢?
最佳答案
我确信会有很多方法,但我会使用 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
将 Markdown 文件添加到集合的每个子文件夹中。
注意:您还应该使用 Front-Mater 创建将来可能需要过滤或搜索的类别。
添加一个文件夹_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
创建 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服务器,看看是否有效,进入下一步...
如果对您有帮助,请告诉我!
关于jekyll - 我可以使用 Jekyll 从文件夹结构生成导航吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34261890/