jekyll - 为什么 Jekyll 合集中的图片会出现在站点根目录中?
问题描述
我有一个 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
集合的目录结构如下所示: course001/index.mdfigures/figure01.jpg
生成的 HTML 如下所示:
_site/
figure01.jpg
theme-structure/
index.html
而不是预期的:
_site/
theme-structure/
index.html
figure01.jpg
为什么图像会出现在站点根文件夹中?由于可能存在名称冲突,我不希望图像出现在根文件夹中。这只是图像的问题,而不是最终在预期位置的文档。
谢谢你的帮助!
解决方案
我不知道这是否是你真正想要的。无论如何,我为你的项目建议一个新的结构,假设你要创建很多课程,每个课程都有自己的讲座。如果您也有子讲座,则代码很容易扩展和处理它们。
首先是你的_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
如您所见,您的文件夹assets
中需要一个文件_lecture
夹。您可以使用文件夹lecture.html
中的_layout
文件来包含您的模板。以下只是一个示例,基本上与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
文件夹,还指您收藏目录中的文件夹。
推荐阅读
- angular - Angular6创建模板并将其从父组件传递给子组件
- python-2.7 - 使用 itertools.permutations() 缺少排列
- python - 在后台运行返回列表的函数
- kubernetes - {ambassador ingress} 不能在同一个映射中使用 canary 和 add_request_headers
- c++ - 局部变量无需操作即可更改
- sql - 使用 Cast 和 SUM 时的嵌套案例
- javascript - 如何在带有 HTML 渲染的 NestJs 中使用验证?
- node.js - 使用索引时 MongDB 查询排序超过内存限制
- windows - IFilter 在 Microsoft Server 2012 R2 x64 上不起作用
- javascript - 如何在 gulp 4 中同时观看 sass 和 javascript