如何将 {% capture %} 变量从视图传递到 Jekyll/Liquid 中的布局？答案

【问题标题】：How to pass {% captured %} variable from a view to the layout in Jekyll/Liquid?如何将 {% capture %} 变量从视图传递到 Jekyll/Liquid 中的布局？
【发布时间】：2013-07-21 13:52:32
【问题描述】：

我正在尝试在 Jekyll 中重建一个博客，但遇到了一个简单的任务。

如果我有以下一组模板：

default.html：

{{ head }}

{{ content }}

frontpage.html：

---
layout: default
---

{% capture head %}
  Frontpage
{% end %}

{{ content }}

index.html：

---
layout: frontpage
---

Other stuff

我原以为{% capture head %} 会将变量传递给布局。但似乎只有 Front Matter 中的变量实际上是作为 page.variable_name 传递的。

有没有办法将capture-d var 传递给 Jekyll 中的布局？

我想我可以为 frontpage 和 normal_page 制作 2 种不同的布局，这将替换布局中的整个 {{head}}{{content}} 块。但这就像 html 的两倍，所以如果可能的话，我宁愿用capture 解决它。

【问题讨论】：

我不确定你想在这里完成什么。为什么不能使用包含？为什么要首先捕获整个头部？更多的上下文会很好。
因为我想根据页面从模板中替换主布局中的头部部分
你为什么不简单地把改变的东西放在前面？
不想在 Front Matter 中保留 html，现在我添加了另一个模板。
我同意这很有用。我想要一个包含两列的页面，一个主列和一个带有附加页面内容的侧边栏。不能在 html 标签中使用 markdown，所以我不能只将我的两个 markdown 块包装在列标记中。我想到的另一个选择是使用capture，就像尼克在上面尝试做的那样，提供一个可供任何页面使用的sidebar 区域。很遗憾，这不受支持，因为它使编写多元素 Markdown 页面非常尴尬。

标签： jekyll liquid liquid-layout jekyll-extensions

【解决方案1】：

您不能使用捕获来执行此操作，但可以使用包含。页面层次结构的每一级都可以根据需要覆盖head 键以指向不同的包含文件。此示例使用条件包装包含，因此如果未指定 head 键，页面仍将生成。

default.html

{% if page.head %}
  {% include {{ page.head }} %}
{% endif %}

{{ content }}

frontpage.html

---
layout: default
head: header1.html
---

{{ content }}

_includes/header1.html

(Frontpage header content)

【讨论】：

【解决方案2】：

如果您的用例与我的类似，并且您想在模板中包含 add'l 内容，您可以使用 YAML 的块标量功能将 include multiline content from your front matter 放入模板中。 | 保留换行符，而 > 删除（“折叠”）换行符。（注意，块指示符后面必须有一个空行。）

index.html

---
layout: default
head: |
  <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
  <style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
  </style>
script: |
  <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
  <script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='PHONE';ftypes[3]='phone';fnames[4]='ORG';ftypes[4]='text';fnames[5]='MMERGE5';ftypes[5]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
---
<!-- Content, maybe a MailChimp signup form? -->

default.html

<!DOCTYPE html>
<html>
<head>
  <title>
    {{page.title}}
  </title>
  <link rel="stylesheet" type="text/css" href="/css/main.css">

  <!-- here you can have add'l arbitrary head content -->
  {{ page.head }}
</head>
<body>
  {{content}}

  <script>
    // Google Analytics, perhaps?
  </script>

  <!-- here you can have add'l arbitrary content at the end of the page, good for scripts -->
  {{page.script}}
</body>
</html>

【讨论】：