CODEWITHSUNDEEP
rubytemplatesjekyllpartials
Alberto Pettarin
Alberto Pettarin

Reputation: 954

Jekyll: parametric (partial?) include

In Jekyll, I would like to include a block of HTML code (creating a bootstrap multiple tabs structure) in my output page. Since the content of each tab is quite long, I would like to keep writing it in markdown, with support for named links.

However, I have different pages with a different number of tabs, so I would like to pass the captured contents as parameters of the include statement. For example, I want my .md files to be something like:

---
layout: default
title: Test 
keywords: Test 
description: Test
datecreated: 24 Apr 2014
---

# Test Page

{% capture content1 %}
Some content here.

I want to be able to render **markdown markup**, like _this_.
{% endcapture %}

{% capture content2 %}
Some more content.

I want to be able to have [links][google] as well.

[google]: http://www.google.it/
{% endcapture %}

{% include myparametrictemplate.html sections="content1,content2" %}

So far, I have created the following myparametrictemplate.html:

## This is a test, to confirm that "content1" and "content2" are accessible

### Section1

<div class="mytab">
{{ content1 | markdownify }}
</div>

### Section2

<div class="mytab">
{{ content2 | markdownify }}
</div>

<hr/>


## Here is the part I would like to have working

Check that `include.sections = "content1,content2"`: {{ include.sections }}

{% assign arr = include.sections | split:"," %}

{% for item in arr %}

Here I got printed the string "content1" (or "content2"), not the actual content of that Liquid tag:

<div class="mytab">
{{ item | markdownify }}
</div>

{% endfor %}

<hr/>



## The ugly workaround

{% if content1 %}
### Section1

<div class="mytab">
{{ content1 | markdownify }}
</div>
{% endif %}


{% if content2 %}
### Section2

<div class="mytab">
{{ content2 | markdownify }}
</div>
{% endif %}


{% if content3 %}
### Section3

<div class="mytab">
{{ content3 | markdownify }}
</div>
{% endif %}

As you can see, {{ item }} prints the name (either content1 or content2 in the above example), while I would like to output the contents of content1 or content2. Is the latter achievable in some way? I was not able to locate anything in the Liquid documentation.

The last part of the example shows the ugly workaround I devised, which I am not happy with (because that way I cannot have multiple includes --- each with a different set of tabs --- on the same page).

EDIT: a slightly less ugly workaround (yet, still not elegant) is the following:

## The slightly less ugly workaround

{% assign arr = include.sections | split:"," %}

{% if arr contains "content1" %}
### Section1

<div class="mytab">
{{ content1 | markdownify }}
</div>
{% endif %}


{% if arr contains "content2" %}
### Section2

<div class="mytab">
{{ content2 | markdownify }}
</div>
{% endif %}


{% if arr contains "content3" %}
### Section3

<div class="mytab">
{{ content3 | markdownify }}
</div>
{% endif %}

I admit I am rather novice to Jekyll, hence I might be taking a wrong path to solve my problem. Any directions will be appreciated, thanks.

NOTE: I would like to avoid the solution proposed in https://stackoverflow.com/a/14247353/2452440 ( or http://wolfslittlestore.be/2013/10/rendering-markdown-in-jekyll/ ) because I would like to keep the contents sections on the same page .md file.

Upvotes: 2

Views: 312

Answers (1)

NoRkin
NoRkin

Reputation: 1

One simple way to do that would be: 

# myparametrictemplate.html

<div class="mytab">
{{ content1 | markdownify }}
</div>

<div class="mytab">
{{ content2 | markdownify }}
</div>

<div class="mytab">
{{ content3 | markdownify }}
</div>

You don't need to pass parameters to include as the included file will inherit the scope of the including file.

So you can just call:

{% include myparametrictemplate.html %}

Unfortunately there is no way to pass or to create a new array within a liquid template. So there is no way you can loop through your "contents".

Upvotes: 0

Related Questions