dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made requested updates 

- made `{{ }}` formatting more readable by adding spacing. 
- added formatting to code samples to properly reflect line breaks for readability
This commit is contained in:
Tom Johnson 2016-12-26 18:28:27 -08:00 committed by Frank Taillandier
parent 240ea13576
commit 8289b61316
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/_docs/includes.md
View File

@ -55,11 +55,12 @@ You can also pass parameters to an include. For example, suppose you have a file
```liquid
{% raw %}<div markdown="span" class="alert alert-info" role="alert">
<i class="fa fa-info-circle"></i> <b>Note:</b> {{include.content}}
<i class="fa fa-info-circle"></i> <b>Note:</b>
{{ include.content }}
</div>{% endraw %}
```
The {% raw %}`{{include.content}}`{% endraw %} is a parameter gets populated when you call the include and specify a value for that parameter, like this:
The `{% raw %}{{ include.content }}{% endraw %}` is a parameter gets populated when you call the include and specify a value for that parameter, like this:
```liquid
{% raw %}{% include note.html content="This is my sample note." %} {% endraw %}
@ -72,18 +73,23 @@ Passing parameters to includes is especially helpful when you want to hide away
For example, suppose you have a special image syntax with complex formatting, and you don't want your authors to remember the complex formatting. As a result, you decide to simplify the formatting by using an include with parameters. Here's an example of the special image syntax you want to populate with an include:
```html
<figure><a href="http://jekyllrb.com"><img src="logo.png"
style="max-width: 200px;" alt="Jekyll logo" /><figcaption>
This is the Jekyll logo</figcaption></figure>
<figure>
<a href="http://jekyllrb.com">
<img src="logo.png" style="max-width: 200px;"
alt="Jekyll logo" />
<figcaption>This is the Jekyll logo</figcaption>
</figure>
```
You could templatize this content in your include and make each value available as a parameter, like this:
```liquid
{% raw %}<figure><a href="{{include.url}}"><img src="{{include.file}}"
style="max-width: {{include.max-width}};"
alt="{{include.alt}}"/><figcaption>{{include.caption}}
</figcaption></figure>{% endraw %}
{% raw %}<figure>
<a href="{{ include.url }}">
<img src="{{ include.file }}" style="max-width: {{ include.max-width }};"
alt="{{ include.alt }}"/>
<figcaption>{{ include.caption }}</figcaption>
</figure>{% endraw %}
```
This include contains 5 parameters:
@ -97,12 +103,15 @@ This include contains 5 parameters:
You could also use `if` tags to safeguard scenarios where either the parameter is optional or where the author doesn't include the parameter:
```liquid
{% raw %}<figure>{% if {{include.url}} %}<a href="{{include.url}}">
{% endif %}<img src="{{include.file}}" {% if {{include.max-width}}
%} style="max-width: {{include.max-width}}" {% endif %}
{% raw %}<figure>
{% if {{ include.url }} %}<a href="{{ include.url }}">{% endif %}
<img src="{{ include.file }}" {% if {{ include.max-width }} %}
style="max-width: {{ include.max-width }}" {% endif %}
alt="{{ include.alt }}" />{% if {{ include.url }} %}</a>{% endif %}
{% if {{include.caption}} %}<figcaption>{{include.caption}}
</figcaption>{% endif %}</figure>{% endraw %}
{% if {{ include.caption }} %}
<figcaption>{{ include.caption }}</figcaption>
{% endif %}
</figure>{% endraw %}
```
In this example, `{% raw %}if {{ include.url }}{% endraw %}` will include the `url` only if the `url` parameter is specified in the include. You could also create default values using [Liquid's default filter](https://help.shopify.com/themes/liquid/filters/additional-filters#default).