【问题标题】:Why do images in Jekyll collections appear in the site root directory?为什么 Jekyll 合集中的图片会出现在站点根目录中?
【发布时间】:2018-06-25 19:09:54
【问题描述】:

我有一个 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/ 索引.md 数字/ 图01.jpg

生成的 HTML 如下所示:

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

而不是预期的:

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

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

感谢您的帮助!

【问题讨论】:

  • 似乎与您的问题无关,但事实并非如此。您是仅对一个项目使用集合还是要在该集合中显示多个项目?因为,如果您要创建多个集合 course001course002 等,最好将它们分组到一个集合中 courses

标签: jekyll


【解决方案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 文件夹。

【讨论】:

  • 感谢您非常详细的回复。我尝试将 figures 文件夹重命名为 assets 并发现它没有任何区别。我确实发现只有当永久链接值为theme-structure/:name 时才会发生这种行为。使用theme-structure/:path 不会发生这种情况(我已经更新了问题)。我对您建议的结构更改很感兴趣。但我不明白有什么好处?我猜这会使 _config.yml 更简单,但不确定是否会有所帮助。
  • 我不知道这是否是您项目的最佳结构。我应该知道更多关于你想做什么。基本区别在于,这种结构允许您伪造多个嵌套集合,并且一个讲座可以属于多个课程。而使用你的,你被困在一个级别的集合中(当然,如果这是你需要的,就没有必要改变)。
  • 这是一个了不起的解释。 OP 应该接受它。
  • @cryptic0 不幸的是,我什至没有明白问题的重点。 :(
  • @cryptic0 我很高兴不时对某人有所帮助。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-01-07
  • 1970-01-01
  • 1970-01-01
  • 2014-07-06
  • 2018-12-26
  • 1970-01-01
  • 2021-04-22
相关资源
最近更新 更多