简体   繁体   English

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

[英]How to pass {% captured %} variable from a view to the layout in Jekyll/Liquid?

I am trying to rebuild a blog in Jekyll and I have stubled upon a simple task.我正在尝试在 Jekyll 中重建一个博客,但我偶然发现了一项简单的任务。

Provided I have the following set of templates:如果我有以下一组模板:

default.html:默认.html:

{{ head }}

{{ content }}

frontpage.html: frontpage.html:

---
layout: default
---

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

{{ content }}

index.html:索引.html:

---
layout: frontpage
---

Other stuff

I was expecting that {% capture head %} would pass a variable to layout.我期待{% capture head %}会将变量传递给布局。 But it seems only variables from the Front Matter are actually being passed as page.variable_name .但似乎只有来自 Front Matter 的变量实际上是作为page.variable_name传递的。

Is there a way to pass capture -d var to the layout in Jekyll?有没有办法将capture -d var 传递给 Jekyll 中的布局?

Guess I could make 2 different layouts for frontpage and normal_page that would replace the whole {{head}}{{content}} block in the layout.猜猜我可以为frontpagenormal_page制作 2 种不同的布局,它们将替换布局中的整个{{head}}{{content}}块。 But that's like twice the html, so I'd rather solve it with capture if possible.但这就像 html 的两倍,所以如果可能的话,我宁愿用capture来解决它。

You can't do this with a capture, but you can using an include.你不能用捕获来做到这一点,但你可以使用包含。 Every level of the page hierarchy can override the head key to point to a different include file as required.页面层次结构的每个级别都可以根据需要覆盖head键以指向不同的包含文件。 This example wraps the include with a condition so if no head key is specified the page will still generate.此示例使用条件包装包含,因此如果未指定head键,页面仍将生成。

default.html默认.html

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

{{ content }}

frontpage.html首页.html

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

{{ content }}

_includes/header1.html _includes/header1.html

(Frontpage header content)

If your use-case is like mine and you want to include add'l content inside your template, you can include multiline content from your front matter into the template using YAML's block scalar feature.如果您的用例和我的一样,并且您想在模板中包含添加的内容,则可以使用 YAML 的块标量功能将前端内容中的多行内容包含到模板中。 A |一个| keeps line-breaks while a > removes ("folds") line-breaks.保留换行符,而 a >删除(“折叠”)换行符。 (Note that the block indicator must be followed by a blank line.) (注意块指示符后面必须跟一个空行。)

index.html索引.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默认.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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM