liquid
Use the hyphen {{-
, -}}
, {%-
, and -%}
over the default to avoid unnecessary whitespace.
SNIPPETS
Commonly used snippets for projects and/or development.
1
2
3
4
5
| {% if logged_in %}
<a href="/pages/settings/{{ p.id }}" onclick="window.open('/pages/settings/{{ p.id }}', '_blank', 'width=600,height=650,scrollbars=yes');return false;">
Settings
</a>
{% endif %}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // page.liquid
// in a for loop
{% for p in page.children %}
{% if logged_in %}
{% assign edit_description_form_page = p %}
{% include 'edit_description_form' %}
{% endif %}
{% endfor %}
// as a single
{% if logged_in %}
{% assign edit_description_form_page = page %}
{% include 'edit_description_form' %}
{% endif %}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| // _edit_description_form.liquid
<p><a href="#" onclick="return false;" data-toggle="modal" data-target="#edit_page_{{ edit_description_form_page.id }}_modal">Edit Description</a></p>
<!-- Modal -->
<div class="modal fade" id="edit_page_{{ edit_description_form_page.id }}_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form id="edit_page_{{ edit_description_form_page.id }}">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="patch">
</div>
<div class="form-group">
<label for="page_description">Edit {{ edit_description_form_page.name }} Description</label>
<textarea class="form-control" id="page_description" name="page[description]" rows="4">{{ edit_description_form_page.description }}</textarea>
</div>
<div class="form-group">
<img alt="loading" id="spinner" src="/images/spinner_3bars_onblack.gif" style="display:none">
<input class="btn btn-default" id="edit_page_{{ edit_description_form_page.id }}_btn" name="commit" type="submit" value="Save">
</div>
</form>
<script>
$(function() {
var pageUrl = "/pages/settings/{{ edit_description_form_page.id }}",
formId = "edit_page_{{ edit_description_form_page.id }}";
var $form = $("#" + formId);
$form.on('submit', function(e) {
e.preventDefault();
$('#' + formId + ' #spinner').show();
$('#edit_page_{{ p.id }}_btn').hide();
$.ajax({
url: pageUrl,
method: 'post',
data: $form.serialize(),
success: function(data) {
location.reload();
}
});
});
});
</script>
</div>
</div>
</div>
</div>
|
flat nav
To create a nav like the one this site, Next Previous across the tree.
This however only supports 1-2 levels
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| {% capture string %}{% for p in page.root.menu %}{{ p.url }} {% if p.has_visible_children? %}{% for child in p.visible_children %}{{ child.url }}{% endfor %}{% endif %}{% endfor %}{% endcapture %}
{% assign items = string | split:" " %}
{% for item in items %}
{% if item == page.url %}
{% if forloop.first %}
{% else %}
{% assign pi = forloop.index0 | minus:1 %}
{% assign previous = items[pi] %}
{% endif %}
{% if forloop.last %}
{% else %}
{% assign ni = forloop.index0 | plus:1 %}
{% assign next = items[ni] %}
{% endif %}
{% break %}
{% endif %}
{% endfor %}
<div id="navigation">
{% if previous %}
<a class="nav nav-prev" href="{{ previous }}"> <i class="fa fa-chevron-left"></i></a>
{% endif %}
{% if next %}
<a class="nav nav-next" href="{{ next }}"><i class="fa fa-chevron-right"></i></a>
{% endif %}
</div>
|
nav using a recursive loop
This is a simple nav, using a macro for the loop render.
1
2
3
4
5
6
7
8
9
| // _nav_side.liquid
<div class="nav-side">
{% assign nav_loop = page.root.menu %}
<h3><a href="{{ page.root.url }}">{{ page.root.name }}</a></h3>
<ul class="nav">
{% include 'nav_side_loop' %}
</ul>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // _nav_side_loop.liquid
{% for p in nav_loop %}
{% if p.id == page.id %}
{% assign current_page = 'active' %}
{% else %}
{% assign current_page = '' %}
{% endif %}
<li class="{{ current_page }}">
<a href="{{ p.url }}">
{% if p.id == page.id %}
<i class="fa fa-caret-right"></i>
{% endif %}
<span>{{ p.name }}</span>
</a>
{% assign ancestors = page.ancestors | map: "id" | join: ' ' %}
{% if p.id == page.id or ancestors contains p.id %}
{% if p.has_visible_children? %}
<ul class="nav">
{% assign nav_loop = p.visible_children %}
{% include 'nav_side_loop' %}
</ul>
{% endif %}
{% endif %}
</li>
{% endfor %}
|
row loop
If you want modulo a different loop then change the modulo:4
to something else like 2,3,4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // _row_loop.liquid
{% assign count = 1 %}
{% for page in page.root.menu %}
{% if page.has_visible_children? %}
{% assign countTop = count | modulo:4 %}
{% if countTop == 1 %}
<div class="row">
{% endif %}
<div class="col-md-3">
<h3>{{ page.name }}</h3>
</div>
{% assign countBottom = count | modulo:4 %}
{% if countBottom == 0 %}
</div>
{% endif %}
{% if page.has_visible_children? %}
{% assign count = count | plus:1 %}
{% endif %}
{% endif %}
{% endfor %}
{% assign countEnd = count | modulo:4 %}
{% if countBottom != 1 %}
</div>
{% endif %}
|
result :)
1
2
3
4
5
6
7
8
9
10
11
| <div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
|
with a regular loop you would get something like this
1
2
3
4
5
6
7
8
9
| <div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
|