Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Includes with args/parameters #848

Closed
paulmsmith opened this Issue · 7 comments

4 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
Owner

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
Owner

Holy crap @maul-esel that was weird.

@zachgersh

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

@parkr
Owner

@zachgersh Still on-going in #1204.

@parkr
Owner

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

This can be closed with the merge of #1204.

@parkr
Owner

Thanks, @maul-esel!

@parkr parkr closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.