我有一个像这样的文件夹层次结构:
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原生支持的东西,还是我必须自己写一些产生输出的东西?我从哪里开始呢?
答案 0 :(得分:7)
我相信会有很多方法,但我会使用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
将降价文件添加到每个集合的子文件夹中。
注意:您还应该使用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服务器,看看是否有效,转到下一步......
请告诉我它是否对您有所帮助!