从降价文件中排序前文

Question

我对 jekyll 还很陌生，但我真的很喜欢你可以用它做的事情，以及部署速度。

所以，我的网站使用 siteleaf 进行管理并部署到 github 页面。现在，我正在构建页面来展示我过去的项目，并且我需要能够创建动态内容 - 能够添加多个具有相同名称的元字段，即多个名为 center_image 或 @987654322 的字段@ 我可以根据它们在创建页面的管理面板/降价文件中的排序顺序显示。这是我到目前为止编写的代码，它目前可以正确显示内容，但它不允许我 1. 对同一元字段进行多次迭代或 2. 动态排序内容。

{% for photo in page.project_content.full_width_image %}
<div class="fullwidth-image content-block">
  <img src="{{ photo }}">
</div>
{% endfor %}

{% for photo in page.project_content.center_image %}
<div class="center-image content-block">
<img src="{{ photo }}">
</div>
{% endfor %}

{% for photo in page.project_content.split_left_image %}
<div class="split-image-left content-block">
<img src="{{ photo }}">
</div>
{% endfor %}

{% for photo in page.project_content.split_right_image %}
<div class="split-image-right content-block">
<img src="{{ photo }}">
</div>
{% endfor %}

{% for content in page.project_content.text_content %}
<div class="text-block content-block">
  {{ content | markdownify }}
</div>
{% endfor %} 

所以，总而言之，我需要能够对这些内容进行排序，并且还需要包含相同内容类型的多次迭代。有人有什么想法吗？

谢谢！ 杰西

Answer 1

联系支持后，这是我发现的。

首先，我需要将 YAML 前端内容从关键字段更改为对象字段。这会创建一个内容数组，就像这样

project_content:
- type: full-width-image
  image: "/uploads/hero.jpg"
- type: text
  body: This is another test content block.
- type: text
  body: text two. 

那么，我的标记是这样的......

{% for block in project.content %}
  {% case block.type %}
  {% when 'full_width_image' %}
    <img src="{{ block.image }}">
  {% when 'text' %}
    {{ block.text | markdownify }}
  {% endcase %}
{% endfor %}

我的输出变成：

<div class="full-width-image content-block">
  <img src="/uploads/hero.jpg">
</div>

<div class="text content-block">
  <p>This is another test content block.</p>
</div>

<div class="text content-block">    
  <p>text two.</p>
</div>

这正是我需要做的，我可以在我的 siteleaf 管理员中更改项目的排序顺序！