为什么 Jekyll 集合中的图像显示在网站根目录中?

Question

我有一个 Jekyll 项目设置，使用多个集合将文档分组在一起。我的_config.yml如下所示：

collections:
course001:
output: true
title: "Theme structure"
relative_url: "/theme-structure"    # The subpath of the the site, 
permalink: /theme-structure/:name

course001集合的目录结构如下所示： 课程001/index.md 数字/图01.jpg

生成的 HTML 如下所示：

_site/
figure01.jpg
theme-structure/
index.html

而不是预期的：

_site/
theme-structure/
index.html
figure01.jpg

为什么图像显示在站点根文件夹中？由于名称冲突的可能性，我不希望图像出现在根文件夹中。这只是图像的问题，而不是最终出现在预期位置的文档。

感谢您的任何帮助！

Answer 1

我不知道这是否是你真正想要的。无论如何，我建议你为你的项目建立一个新的结构，假设你要创建很多课程，每个课程都有自己的讲座。如果你也有子讲座，代码很容易扩展和处理它们。

第一件事是你的_config.yml文件。您应该为课程和讲座创建两个集合(不幸的是，Jekyll 不处理子集合(。

collections:
courses:
output: true
lectures:
output: true

您必须同时创建_courses文件夹和_lectures文件夹。

在_lecture文件夹中，您应该放置讲座的降价文件。每个讲座都应该有一个它所属课程的标签。我还为讲座添加了一个标签，以方便处理路径。这是带有图像的讲座文件的示例。

---
layout: lecture
title: My first lecture
course: 001
lecture: my-first-lecture
---
This is my first lecture!!
![fish][fish]
[fish]: assets/img/{{page.lecture}}/fish.png

如您所见，您需要在_lecture文件夹中assets文件夹。您可以使用_layout文件夹中的文件lecture.html来包含模板。下面的只是一个示例，基本上与page布局相同。

---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">    
{{ content }}
</div>
</article>

现在，您需要按课程对它们进行分组。不幸的是，正如我之前所说，Jekyll 不处理嵌套集合，因此我们检查每个讲座中的标签course以查看每个课程中的讲座内容。因此，如果您想在每个课程页面的开头键入讲座列表，那么您应该_layout/course.html有一个类似于

---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
<ol>
{% for lecture in site.lectures %}
{% if lecture.course == page.course %}
<li><a href="{{lecture.url}}">{{lecture.title}}</a></li>
{% endif %}
{% endfor %}
</ol>
{{ content }}
</div>
</article>

课程的典型降价文件应存储在_courses中，类似于

---
layout: course
title: My first course
course: 001
---
This is my first course!!

唯一剩下的就是一个显示课程列表的页面。您可以使用此内容在项目文件夹中创建一个coursed.md文件。

---
layout: page
title: Courses
permalink: /courses/
---
These are my courses:
<ol>
{% for course in site.courses %}
<li><a href="{{course.url}}">{{course.title}}</a></li>
{% endfor %}
</ol>

我知道这可能比你在问题中提出的要多，你仍然想知道为什么会有这种奇怪的行为。我认为这是因为您应该将构建的站点中所需的文件存储在 assets 文件夹中。这是唯一的方法(我认为，但也许我错了(。我不仅指主目录中的assets文件夹，还指集合目录中的assets文件夹。