Jekyll 在帖子布局中动态包含新部分？答案

【问题标题】：Jekyll include new sections on a post layout dynamically?Jekyll 在帖子布局中动态包含新部分？
【发布时间】：2015-12-01 22:14:00
【问题描述】：

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

这些额外的 html 部分起到了作用，因此单个项目的页面内容不必显式地驻留在为 {{ content }} 变量定义的唯一容器/包装器中。

所以（从视觉上讲）我可以将任何 html 内容放在 <section></section> 中，并相应地设置其样式，single-project.html 布局可以通过全角容器/元素等来丰富。但是，我坚持只能在 {{ content }} 变量的上方和下方注入全角内容的可能性。

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

在 project.md 文档中

对于每个我想要有额外 html 部分的单个项目，我在文档的前面定义了我在 single-project.html 布局中的 html 文件的名称 {% include %}。

---
### 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 部分。

【问题讨论】：

您只需要 Markdown 内容中的部分吗？喜欢<section class="someclass"> ... content ... </section>？如果只是它，你可以直接做，如这个article
实际上不是。虽然我可以直接插入结构化 html，但它仍然会绑定到降价（待处理）并通过 {{ content }} 变量输出，所以我需要复制/粘贴并手动更改每个 html 部分 <section class="someclass"></section> 我' d 在特定页面上插入。我真正想要实现的是一种完全模板化页面的方法，它使用动态 html 部分（其内容是从文档的前端抓取的），而不需要在每个 markdown 文档中弄乱 html。
我认为我已经这样做的方式现在适合我的模板需求，我的意思是我可以完全通过（包括）我想要的 html 部分来构建一个页面，同时保留每个文档的降价为空，因此{{ content }} 变量将输出“无”。这种解决方法将导致页面上的那些 html 部分将被 Liquid 逻辑感知，因此在每个 .markdown 文档的 front-matter 上，我将定义变量以使用每个项目页面所需的内容填充这些部分。
我想我明白你的意思了。但是您的 Liquid 标记无法正常工作？好吧，如果前面的内容来自一个帖子，你应该使用` {% if post.something %}` 而不是page，明白了吗？对于您的 yaml，当您处理特殊字符时，您始终可以像这样使用：title: "Something complicated" 。但我不确定我是否回答了你的问题......
您还可以在模板中使用 Jekyll includes。

标签： html twitter-bootstrap-3 jekyll liquid

【解决方案1】：

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

您可以用您的 {{ content }} 标签替换其中的一个。

如果您（真的）希望内容编辑器能够选择部分及其顺序，则必须在 .md 文件顶部创建一个带有部分名称的 YAML 数组并循环遍历它们。

【讨论】：