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 ```liquid
{% raw %}<div markdown="span" class="alert alert-info" role="alert"> {% 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 %} </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 ```liquid
{% raw %}{% include note.html content="This is my sample note." %} {% endraw %} {% 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: 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 ```html
<figure><a href="http://jekyllrb.com"><img src="logo.png" <figure>
style="max-width: 200px;" alt="Jekyll logo" /><figcaption> <a href="http://jekyllrb.com">
This is the Jekyll logo</figcaption></figure> <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: You could templatize this content in your include and make each value available as a parameter, like this:
```liquid ```liquid
{% raw %}<figure><a href="{{include.url}}"><img src="{{include.file}}" {% raw %}<figure>
style="max-width: {{include.max-width}};" <a href="{{ include.url }}">
alt="{{include.alt}}"/><figcaption>{{include.caption}} <img src="{{ include.file }}" style="max-width: {{ include.max-width }};"
</figcaption></figure>{% endraw %} alt="{{ include.alt }}"/>
<figcaption>{{ include.caption }}</figcaption>
</figure>{% endraw %}
``` ```
This include contains 5 parameters: 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: 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 ```liquid
{% raw %}<figure>{% if {{include.url}} %}<a href="{{include.url}}"> {% raw %}<figure>
{% endif %}<img src="{{include.file}}" {% if {{include.max-width}} {% if {{ include.url }} %}<a href="{{ include.url }}">{% endif %}
%} style="max-width: {{include.max-width}}" {% endif %} <img src="{{ include.file }}" {% if {{ include.max-width }} %}
style="max-width: {{ include.max-width }}" {% endif %}
alt="{{ include.alt }}" />{% if {{ include.url }} %}</a>{% endif %} alt="{{ include.alt }}" />{% if {{ include.url }} %}</a>{% endif %}
{% if {{include.caption}} %}<figcaption>{{include.caption}} {% if {{ include.caption }} %}
</figcaption>{% endif %}</figure>{% endraw %} <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). 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).