从 markdown 文件中排序前面的内容
sorting front matter from markdown file
我是 jekyll 的新手,但我真的很喜欢你可以用它做的事情,以及部署的速度。
所以,我的网站是用 siteleaf 管理的,并部署到 github 个页面。现在,我正在努力构建页面来展示我过去的项目,我需要能够创建动态内容 - 能够添加多个具有相同名称的元字段,即多个名为 center_image
或text_block
我可以根据它们在创建页面的管理 panel/markdown 文件中的排序顺序显示。这是我到目前为止编写的代码,它目前可以正确显示内容,但它不允许我 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 %}
所以,总而言之,我需要能够对这些内容进行排序,并且还包括相同内容类型的多个迭代。有人有什么想法吗?
谢谢!
杰西
联系支持人员后,我发现了以下内容。
首先,我需要将 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 管理员中更改项目的排序顺序!
我是 jekyll 的新手,但我真的很喜欢你可以用它做的事情,以及部署的速度。
所以,我的网站是用 siteleaf 管理的,并部署到 github 个页面。现在,我正在努力构建页面来展示我过去的项目,我需要能够创建动态内容 - 能够添加多个具有相同名称的元字段,即多个名为 center_image
或text_block
我可以根据它们在创建页面的管理 panel/markdown 文件中的排序顺序显示。这是我到目前为止编写的代码,它目前可以正确显示内容,但它不允许我 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 %}
所以,总而言之,我需要能够对这些内容进行排序,并且还包括相同内容类型的多个迭代。有人有什么想法吗?
谢谢! 杰西
联系支持人员后,我发现了以下内容。
首先,我需要将 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 管理员中更改项目的排序顺序!