19

I am trying to rebuild a blog in Jekyll and I have stubled upon a simple task.

Provided I have the following set of templates:

default.html:

{{ head }}

{{ content }}

frontpage.html:

---
layout: default
---

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

{{ content }}

index.html:

---
layout: frontpage
---

Other stuff

I was expecting that {% capture head %} would pass a variable to layout. But it seems only variables from the Front Matter are actually being passed as page.variable_name.

Is there a way to pass capture-d var to the layout in Jekyll?

Guess I could make 2 different layouts for frontpage and normal_page that would replace the whole {{head}}{{content}} block in the layout. But that's like twice the html, so I'd rather solve it with capture if possible.

CodingIntrigue
  • 65,670
  • 26
  • 159
  • 166
firedev
  • 19,222
  • 18
  • 58
  • 91
  • 2
    I am not sure what you want to accomplish here. Why can't you use an include? Why do you want to capture the whole head in the first place? Some more context would be nice. – Polygnome Jul 22 '13 at 07:48
  • Because I wanted to replace the head section in the main layout from templates depending on the page – firedev Jul 22 '13 at 09:23
  • Why don#t you simply put the things that change in the Front Matter? – Polygnome Jul 23 '13 at 11:30
  • 1
    Don't want to keep html in Front Matter, for now I have added another template. – firedev Jul 23 '13 at 12:16
  • 3
    I agree that this would be useful. I want to have a page with two columns, a main column and a sidebar with additional page content. It's not possible to use markdown inside html tags, so I can't just wrap my two markdown blocks in the column markup. The other option I thought of is to use `capture` like Nick was trying to do above, to provide a `sidebar` area usable by any page. It's seriously unfortunate that this isn't supported, since it makes composing multi-element markdown pages very awkward. – Eric Drechsel Aug 16 '13 at 05:36
  • Another option for my use case might be to create a two column layout which includes an additional sidebar markdown file whose name is parameterized by page.path (maybe page.path + ".sidebar.md"). – Eric Drechsel Aug 16 '13 at 05:48
  • It looks like the best way to do this may be to include a markdown block in the page's YAML front matter. Check out [this previous question](http://stackoverflow.com/questions/13086569/jekyll-templates-using-django-like-liquid-blocks-inheritance) and [this issue thread](https://github.com/mojombo/jekyll/issues/246) for more detail. – Eric Drechsel Aug 16 '13 at 17:02
  • Guess that sums it up: "[You should use includes for this...posts and pages don't have multiple content sections by design.](https://github.com/mojombo/jekyll/issues/246#issuecomment-11798916)" – firedev Aug 17 '13 at 02:34
  • Liquid templates are stateless. The Capture'd variable only exists in the context of `frontpage.html`. – RobertKenny Sep 11 '13 at 19:20
  • I wanted to use this to add add'l stylesheets to the head and add'l scripts to the end of the page. – Carl G Nov 10 '14 at 01:37

2 Answers2

9

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. This example wraps the include with a condition so if no head key is specified the page will still generate.

default.html

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

{{ content }}

frontpage.html

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

{{ content }}

_includes/header1.html

(Frontpage header content)
David Hutchison
  • 2,233
  • 1
  • 17
  • 23
6

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. A | keeps line-breaks while a > removes ("folds") line-breaks. (Note that the block indicator must be followed by a blank line.)

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>
Carl G
  • 14,291
  • 12
  • 78
  • 103