Includes with args/parameters #848

Closed
paulmsmith opened this Issue Mar 9, 2013 · 7 comments

Projects

None yet

5 participants

@paulmsmith

I know there is feeling that Jekyll shouldn't be pushed in this direction but it would make Jekyll the dream front-end development tool for creating modular prototypes and apps.

OOCSS, Smacss, BEM are becoming more and more prevalent working practices combined with AMD style Javascript. I've been using Jekyll for a few years now and feel its missing the scenario described below:

For example. I have the following component in an include file _(includes/tabs.html)

<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li class="tab__active"><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>

I'd use

{% include tabs.html %} 

and everything would work swimmingly.

However, if I wanted to use the same include again but this time have a modifier class "tabs--large" on the tabs component (BEM style). As here:

<ul class="tabs tabs--large">
<li><a href="#">Tab 1</a></li>
<li class="tab__active"><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>

I can currently only do that at page level by doing:

<ul class="tabs{% if page.largeTabs %} tabs--large{% endif %}">
<li><a href="#">Tab 1</a></li>
<li class="tab__active"><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>

However that falls down if I want to have more than one set of tabs on the page that differ (e.g, one with the modifier and one without). What I'd like to be able to do is:

{% include tabs.html modifierClass="tabs--large" %}
<ul class="tabs{% if include.modifierClass %} {{ include.modifierClass }}{% endif %}">
<li><a href="#">Tab 1</a></li>
<li class="tab__active"><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>

Pretty please

This in my eyes would make Jekyll complete. Being able to provide generated static templates of HTML with that kind of power would be a revelation. Is there anybody that could do this? Or could somebody at least explain why this would be unacceptable?

@parkr
Member
parkr commented Mar 19, 2013

This is a pretty cool feature. Reminds me a lot of the way in which Rails handles passing variables to partials.

Have you coded a solution for this up?

@parkr
Member
parkr commented Mar 19, 2013

Holy crap @maul-esel that was weird.

@zachgersh
Contributor

@parkr This was also successfully merged! Can close this as well?

@parkr
Member
parkr commented Jun 13, 2013

@zachgersh Still on-going in #1204.

@parkr
Member
parkr commented Jun 15, 2013

This is available presently if you set the variables you're interested in in the parent object and reference them in the include. It's the reason this works:

{% for post in site.posts %}
  {% include post.html %}
{% endfor %}

# in post.html
{{ post.title }} >> {{ post.date }}

That post variable is set in the for loop of the parent template. How does this add value?

@maul-esel
Contributor

This can be closed with the merge of #1204.

@parkr
Member
parkr commented Aug 17, 2013

Thanks, @maul-esel!

@parkr parkr closed this Aug 17, 2013
@jekyllbot jekyllbot locked and limited conversation to collaborators Feb 27, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.