Question

我刚刚在Jekyll创建了一个投资组合集合，并且我已经设法在我的 single-project.html 布局中包含额外的 html部分一个简单的Liquid语法。

这些额外的html部分得到了拯救，因此单个项目的页面内容不会明确地驻留在为{{ content }}变量定义的唯一容器/包装器中。

所以（从视觉上讲）我可以将任何html内容放在<section></section>中，并相应地设置样式，以single-project.html布局可以使用全宽容器/元素来丰富等等。但是，我仍然只能在{{content}}变量之上注入全宽内容。

是否有解决方法可以实现动态布局结构以在Jekyll中包含页面上的部分？

在 project.md 文档

中

对于每个单个项目，我希望有更多的html部分，我在文档的前端定义了{% include %}中html文件的名称single-project.html布局。

---
### Project Details
layout: project
title: Cards Mockup project

# Project Extra Sections
sections_top:
  sections: ['section-intro.html', 'section-services-provided.html']
#
sections_bottom:
  sections: ['section-fullwidth-figure.html']
---

在 single-project.html 布局

中

我有条件地包含前面提供的html部分，每个文档的正面内容如下：

<div class="main-container">
{% if page.sections_top %}
<div class="container-fluid no-pad">
{% assign sections_top = page.sections_top['sections'] %}
 {% for section in sections_top %}
  {% include {{ section }} %}
 {% endfor %}
</div>
{% endif %}


<!-- Section main content -->
<section class="article-body">

<div class="container">
 <div class="row">
  <div class="col-sm-12">
  {{ content }}
  </div>
 </div>
</div><!-- end .container -->                 

</section><!-- end section main content -->

{% if page.sections_bottom %}
<div class="container-fluid no-pad">
{% assign sections_bottom = page.sections_bottom['sections'] %}
 {% for section in sections_bottom %}
  {% include {{ section }} %}
 {% endfor %}
</div>
{% endif %}

</div><!-- end .main-container -->

这是一个截图：https://cloudup.com/cK-_jbTdTqU（全宽图像之间的所有内容都是{{content}}，全宽图像是html部分。

Answer 1

我想你想要这样的东西：https://github.com/y7kim/agency-jekyll-theme/blob/gh-pages/_layouts/default.html

您只需使用{{content}}标记替换其中一个包含。

如果您（确实）希望内容编辑器能够选择部分及其顺序，则必须创建一个YAML数组，其中部分名称位于.md文件的顶部并循环显示。

Jekyll动态地在帖子布局中包含新的部分？

1 个答案: