mirror of
https://github.com/kemko/liquid.git
synced 2026-01-06 10:15:40 +03:00
Merge pull request #820 from Shopify/autumn-cleaning
Misc. documentation updates
This commit is contained in:
Adam Hollett
2
Gemfile
2
Gemfile
@@ -1,3 +1,3 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gem 'github-pages', group: :jekyll_plugins
|
||||
gem 'github-pages', '>=100', group: :jekyll_plugins
|
||||
|
||||
126
Gemfile.lock
126
Gemfile.lock
@@ -1,8 +1,7 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
RedCloth (4.2.9)
|
||||
activesupport (4.2.6)
|
||||
activesupport (4.2.7)
|
||||
i18n (~> 0.7)
|
||||
json (~> 1.7, >= 1.7.7)
|
||||
minitest (~> 5.1)
|
||||
@@ -13,121 +12,134 @@ GEM
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.10.0)
|
||||
colorator (0.1)
|
||||
ethon (0.8.1)
|
||||
colorator (1.1.0)
|
||||
ethon (0.9.1)
|
||||
ffi (>= 1.3.0)
|
||||
execjs (2.6.0)
|
||||
execjs (2.7.0)
|
||||
faraday (0.9.2)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.9.10)
|
||||
ffi (1.9.14)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (2.1.0)
|
||||
github-pages (68)
|
||||
RedCloth (= 4.2.9)
|
||||
github-pages-health-check (= 1.1.0)
|
||||
jekyll (= 3.0.3)
|
||||
github-pages (104)
|
||||
activesupport (= 4.2.7)
|
||||
github-pages-health-check (= 1.2.0)
|
||||
jekyll (= 3.3.0)
|
||||
jekyll-avatar (= 0.4.2)
|
||||
jekyll-coffeescript (= 1.0.1)
|
||||
jekyll-feed (= 0.4.0)
|
||||
jekyll-feed (= 0.8.0)
|
||||
jekyll-gist (= 1.4.0)
|
||||
jekyll-github-metadata (= 1.10.0)
|
||||
jekyll-mentions (= 1.1.2)
|
||||
jekyll-github-metadata (= 2.2.0)
|
||||
jekyll-mentions (= 1.2.0)
|
||||
jekyll-paginate (= 1.1.0)
|
||||
jekyll-redirect-from (= 0.10.0)
|
||||
jekyll-redirect-from (= 0.11.0)
|
||||
jekyll-sass-converter (= 1.3.0)
|
||||
jekyll-seo-tag (= 1.3.3)
|
||||
jekyll-sitemap (= 0.10.0)
|
||||
jekyll-textile-converter (= 0.1.0)
|
||||
jemoji (= 0.6.2)
|
||||
kramdown (= 1.10.0)
|
||||
jekyll-seo-tag (= 2.1.0)
|
||||
jekyll-sitemap (= 0.12.0)
|
||||
jekyll-swiss (= 0.4.0)
|
||||
jemoji (= 0.7.0)
|
||||
kramdown (= 1.11.1)
|
||||
liquid (= 3.0.6)
|
||||
listen (= 3.0.6)
|
||||
mercenary (~> 0.3)
|
||||
rdiscount (= 2.1.8)
|
||||
redcarpet (= 3.3.3)
|
||||
rouge (= 1.10.1)
|
||||
minima (= 2.0.0)
|
||||
rouge (= 1.11.1)
|
||||
terminal-table (~> 1.4)
|
||||
github-pages-health-check (1.1.0)
|
||||
github-pages-health-check (1.2.0)
|
||||
addressable (~> 2.3)
|
||||
net-dns (~> 0.8)
|
||||
octokit (~> 4.0)
|
||||
public_suffix (~> 1.4)
|
||||
typhoeus (~> 0.7)
|
||||
html-pipeline (2.3.0)
|
||||
activesupport (>= 2, < 5)
|
||||
html-pipeline (2.4.2)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
i18n (0.7.0)
|
||||
jekyll (3.0.3)
|
||||
colorator (~> 0.1)
|
||||
jekyll (3.3.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 3.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 1.7)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-avatar (0.4.2)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-coffeescript (1.0.1)
|
||||
coffee-script (~> 2.2)
|
||||
jekyll-feed (0.4.0)
|
||||
jekyll-feed (0.8.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-gist (1.4.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-github-metadata (1.10.0)
|
||||
octokit (~> 4.0)
|
||||
jekyll-mentions (1.1.2)
|
||||
jekyll-github-metadata (2.2.0)
|
||||
jekyll (~> 3.1)
|
||||
octokit (~> 4.0, != 4.4.0)
|
||||
jekyll-mentions (1.2.0)
|
||||
activesupport (~> 4.0)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-redirect-from (0.10.0)
|
||||
jekyll-redirect-from (0.11.0)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.3.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-seo-tag (1.3.3)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-sitemap (0.10.0)
|
||||
jekyll-textile-converter (0.1.0)
|
||||
RedCloth (~> 4.0)
|
||||
jekyll-watch (1.3.1)
|
||||
listen (~> 3.0)
|
||||
jemoji (0.6.2)
|
||||
jekyll-seo-tag (2.1.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-sitemap (0.12.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-swiss (0.4.0)
|
||||
jekyll-watch (1.5.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
jemoji (0.7.0)
|
||||
activesupport (~> 4.0)
|
||||
gemoji (~> 2.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (>= 3.0)
|
||||
json (1.8.3)
|
||||
kramdown (1.10.0)
|
||||
kramdown (1.11.1)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.6)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9.7)
|
||||
mercenary (0.3.5)
|
||||
mini_portile2 (2.0.0)
|
||||
minitest (5.8.4)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.1.0)
|
||||
minima (2.0.0)
|
||||
minitest (5.9.1)
|
||||
multipart-post (2.0.0)
|
||||
net-dns (0.8.0)
|
||||
nokogiri (1.6.7.2)
|
||||
mini_portile2 (~> 2.0.0.rc2)
|
||||
octokit (4.3.0)
|
||||
sawyer (~> 0.7.0, >= 0.5.3)
|
||||
nokogiri (1.6.8.1)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
octokit (4.6.0)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.14.0)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (1.5.3)
|
||||
rb-fsevent (0.9.7)
|
||||
rb-fsevent (0.9.8)
|
||||
rb-inotify (0.9.7)
|
||||
ffi (>= 0.5.0)
|
||||
rdiscount (2.1.8)
|
||||
redcarpet (3.3.3)
|
||||
rouge (1.10.1)
|
||||
rouge (1.11.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.22)
|
||||
sawyer (0.7.0)
|
||||
addressable (>= 2.3.5, < 2.5)
|
||||
sawyer (0.8.0)
|
||||
addressable (>= 2.3.5, < 2.6)
|
||||
faraday (~> 0.8, < 0.10)
|
||||
terminal-table (1.5.2)
|
||||
terminal-table (1.7.3)
|
||||
unicode-display_width (~> 1.1.1)
|
||||
thread_safe (0.3.5)
|
||||
typhoeus (0.8.0)
|
||||
ethon (>= 0.8.0)
|
||||
tzinfo (1.2.2)
|
||||
thread_safe (~> 0.1)
|
||||
unicode-display_width (1.1.1)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages
|
||||
github-pages (>= 100)
|
||||
|
||||
BUNDLED WITH
|
||||
1.11.2
|
||||
1.13.1
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
title: Liquid Templating Engine
|
||||
description: "Liquid is a template language and accompanying rendering engine. It is built for security, so is perfect for rendering custom templates from your users."
|
||||
|
||||
repository: https://github.com/Shopify/liquid
|
||||
title: Liquid template language
|
||||
description: Liquid is a template language and accompanying rendering engine. It is built for security, so is perfect for rendering custom templates from your users.
|
||||
|
||||
# Build settings
|
||||
baseurl: /liquid # the subpath of your site, e.g. /blog/
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<div class="home-banner">
|
||||
<h1>Liquid</h1>
|
||||
<p>Safe, customer facing template language for flexible web apps.</p>
|
||||
<p>Safe, customer-facing template language for flexible web apps.</p>
|
||||
<p class="btn-row">
|
||||
<a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn"><i class="icon fa fa-2x fa-arrow-circle-down" aria-hidden="true"></i>Download</a>
|
||||
<a href="https://github.com/Shopify/liquid" target="_blank" class="btn"><i class="icon fa fa-2x fa-github" aria-hidden="true"></i>View on GitHub</a>
|
||||
<a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn">
|
||||
<span aria-hidden="true">{% include icons/desktop-download.svg %}</span> Download
|
||||
</a>
|
||||
<a href="https://github.com/Shopify/liquid" target="_blank" class="btn">
|
||||
<span aria-hidden="true">{% include icons/mark-github.svg %}</span> View on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -21,4 +21,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="home-users-blurb">...and <a href="https://github.com/Shopify/liquid/wiki#who-uses-liquid" target="_blank">many more!</a></p>
|
||||
<p class="home-users-blurb">...and <a href="https://github.com/Shopify/liquid/wiki#who-uses-liquid" target="_blank">many more</a></p>
|
||||
|
||||
1
_includes/icons/desktop-download.svg
Executable file
1
_includes/icons/desktop-download.svg
Executable file
@@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>desktop-download</title><desc>Created with Sketch.</desc><path d="M4 6h3v-6h2v6h3l-4 4-4-4zm11-4h-4v1h4v8h-14v-8h4v-1h-4c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2h5.34c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1z" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 372 B |
1
_includes/icons/mark-github.svg
Executable file
1
_includes/icons/mark-github.svg
Executable file
@@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>mark-github</title><desc>Created with Sketch.</desc><path d="M8 0c-4.42 0-8 3.58-8 8 0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38 3.16-1.06 5.45-4.06 5.45-7.59 0-4.42-3.58-8-8-8z" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 746 B |
1
_includes/icons/three-bars.svg
Executable file
1
_includes/icons/three-bars.svg
Executable file
@@ -0,0 +1 @@
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg"><title>three-bars</title><desc>Created with Sketch.</desc><path d="M11.41 9h-10.82c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4h-10.82c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm-10.82 6h10.81c.59 0 .59.41.59 1 0 .59 0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1 0-.59 0-1 .59-1z" fill="#000"/></svg>
|
||||
|
After Width: | Height: | Size: 455 B |
@@ -1,35 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.title }}</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
|
||||
<meta name="description" content="{{ page.description | default: site.description }}">
|
||||
<meta name="author" content="Shopify">
|
||||
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
|
||||
<link rel="stylesheet" href="{{ '/css/main.css' | prepend: site.baseurl }}">
|
||||
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-32x.png' | prepend: site.baseurl }}" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-64x.png' | prepend: site.baseurl }}" sizes="64x64">
|
||||
<link rel="canonical" href="{{ page.url | replace: 'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
|
||||
|
||||
<meta property="og:site_name" content="{{ site.title }}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="{{ site.url | append: site.baseurl }}">
|
||||
<meta property="og:title" content="{{ page.title | default: site.title }}">
|
||||
<meta property="og:description" content="{{ page.description | default: site.description }}">
|
||||
|
||||
<meta name="twitter:site" content="{{ site.title }}">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="{{ site.url | append: site.baseurl }}">
|
||||
<meta name="twitter:title" content="{{ page.title | default: site.title }}">
|
||||
<meta name="twitter:description" content="{{ page.description | default: site.description }}">
|
||||
|
||||
<script src="{{ '/js/vendor/jquery-3.1.1.slim.min.js' | prepend: site.baseurl }}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
{% include sidebar.html %}
|
||||
|
||||
<div class="content__overlay"></div>
|
||||
<main class="content__area" role="main">
|
||||
<div class="content">
|
||||
<button class="menu-button">
|
||||
<i class="icon fa fa-2x fa-bars" aria-hidden="true"></i>
|
||||
<span aria-hidden="true">{% include icons/three-bars.svg %}</span>
|
||||
<span>Menu</span>
|
||||
</button>
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
</main>
|
||||
<script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
|
||||
</body>
|
||||
<script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
|
||||
</html>
|
||||
|
||||
@@ -61,12 +61,6 @@ li {
|
||||
}
|
||||
}
|
||||
|
||||
/** Headings */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Links */
|
||||
a {
|
||||
color: $color-blue-5;
|
||||
@@ -80,19 +74,22 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
/** Headings */
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
text-decoration: underline;
|
||||
font-weight: 300;
|
||||
margin-top: $spacing-unit;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: $spacing-unit;
|
||||
font-size: 1em;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@@ -112,6 +109,7 @@ blockquote {
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: Menlo, Monaco, monospace;
|
||||
font-size: 15px;
|
||||
border-radius: 3px;
|
||||
background-color: lighten($color-blue-1, 0.9);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.btn {
|
||||
color: $color-white;
|
||||
fill: currentColor;
|
||||
display: flex;
|
||||
background: $color-blue-5;
|
||||
align-items: center;
|
||||
@@ -28,6 +29,14 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: $spacing-unit / 4;
|
||||
width: $base-font-size * 1.5;
|
||||
height: $base-font-size * 1.5;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn:visited {
|
||||
@@ -49,17 +58,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin-right: $spacing-unit / 4;
|
||||
}
|
||||
|
||||
|
||||
/*============================================================================
|
||||
Menu button
|
||||
==============================================================================*/
|
||||
.menu-button {
|
||||
display: inline-block;
|
||||
font-size: $small-font-size;
|
||||
background: none;
|
||||
border: none;
|
||||
margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1);
|
||||
@@ -69,4 +73,12 @@
|
||||
@include tablet-and-up {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: $spacing-unit / 4;
|
||||
width: $base-font-size;
|
||||
height: $base-font-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -2,14 +2,22 @@
|
||||
text-align: center;
|
||||
border-bottom: 1px solid lighten($color-slate, 50%);
|
||||
padding-bottom: $spacing-unit;
|
||||
margin-bottom: $spacing-unit;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 4em;
|
||||
|
||||
// &:after {
|
||||
// content: '\01F4A7'; // Water droplet emoji
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
|
||||
@include phone-and-up {
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: lighten($color-slate, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,13 +70,18 @@ body {
|
||||
|
||||
.sidebar__logo {
|
||||
font-size: $base-font-size * 2;
|
||||
font-weight: bold;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
height: $logo-height;
|
||||
line-height: $logo-height;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid $color-blue-4;
|
||||
|
||||
// &:after {
|
||||
// content: '\01F4A7'; // Water droplet emoji
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
text-decoration: none;
|
||||
@@ -119,10 +124,10 @@ body {
|
||||
}
|
||||
|
||||
.section__header {
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
text-decoration: none;
|
||||
color: $color-white;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-unit / 4;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
$base-font-family: 'Droid Sans', sans-serif;
|
||||
$base-font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
|
||||
$base-font-size: 18px;
|
||||
$small-font-size: $base-font-size * 0.875;
|
||||
$base-line-height: 1.5;
|
||||
$spacing-unit: 40px;
|
||||
|
||||
|
||||
3
basics/index.md
Normal file
3
basics/index.md
Normal file
@@ -0,0 +1,3 @@
|
||||
---
|
||||
redirect_to: /liquid/basics/introduction
|
||||
---
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Introduction
|
||||
redirect_from:
|
||||
- /basics/
|
||||
description: An overview of objects, tags, and filters in the Liquid template language.
|
||||
---
|
||||
|
||||
Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters).
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Operators
|
||||
description: Using operators to perform calculations in the Liquid template language.
|
||||
---
|
||||
|
||||
Liquid includes many logical and comparison operators.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Truthy and falsy
|
||||
description: An overview of boolean logic in the Liquid template language.
|
||||
---
|
||||
|
||||
In programming, anything that returns `true` in a conditional is called **truthy**. Anything that returns `false` in a conditional is called **falsy**. All object types can be described as either truthy or falsy.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Types
|
||||
description: An overview of data types in the Liquid template language.
|
||||
---
|
||||
|
||||
Liquid objects can have one of six types:
|
||||
|
||||
24
basics/variations.md
Normal file
24
basics/variations.md
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Variations of Liquid
|
||||
description: An overview of the different installations of Liquid and how Liquid can change depending on where you're using it.
|
||||
---
|
||||
|
||||
Liquid is a flexible, safe language, and is used in many different environments. Liquid was created for use in [Shopify](https://www.shopify.com) stores, and is also used extensively on [Jekyll](https://jekyllrb.com) websites. Over time, both Shopify and Jekyll have added their own objects, tags, and filters to Liquid. The most popular versions of Liquid that exist are **Liquid**, **Shopify Liquid**, and **Jekyll Liquid**.
|
||||
|
||||
This site documents the latest version of **Liquid** including betas and release candidates — that is, Liquid as it exists outside of Shopify and Jekyll. If you download the Liquid repository or install it as a [gem](https://rubygems.org/gems/liquid), you will get access to whatever objects, tags, and filters are in the version of Liquid that you chose.
|
||||
|
||||
## Shopify
|
||||
|
||||
Shopify always uses the latest version of Liquid as a base, but Shopify adds a significant number of objects, tags, and filters to Liquid for use in merchants' stores. These include objects representing store, product, and customer information, and filters for displaying store data and manipulating storefront assets like product images.
|
||||
|
||||
Shopify's version of Liquid is documented in the [Shopify Help Center](https://help.shopify.com/themes/liquid). If you want to try out Shopify's version of Liquid, you can [start a free trial of Shopify](https://www.shopify.com/signup) or use a sandbox like [DropPen](http://droppen.org/).
|
||||
|
||||
## Jekyll
|
||||
|
||||
[Jekyll](https://jekyllrb.com) is a static site generator, a command-line tool that creates websites by merging templates with content files. Jekyll uses Liquid as its template language, and adds a few objects, tags, and filters. These include objects representing content pages, tags for including snippets of content in others, and filters for manipulating strings and URLs.
|
||||
|
||||
Jekyll also powers [GitHub Pages](https://pages.github.com/), a web hosting service that lets you push a Jekyll installation to a GitHub repository and have the resulting website published. This website is built using GitHub Pages.
|
||||
|
||||
Jekyll might not be using the latest version of Liquid. This means that the tags and filters listed on this site may not work in Jekyll. Often the Jekyll project will wait for a stable release of Liquid rather than using a beta or release candidate version. To see what version of Liquid Jekyll is using, check the **runtime dependencies** section of [Jekyll's gem page](https://rubygems.org/gems/jekyll).
|
||||
|
||||
Jekyll's version of Liquid is documented in the [Templates section of Jekyll's documentation](http://jekyllrb.com/docs/templates/). If you want to try out Jekyll's version of Liquid, you can clone the Jekyll project or install Jekyll as a gem and test Liquid on a static site.
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Whitespace control
|
||||
description: An overview of controlling whitespace between code in the Liquid template language.
|
||||
---
|
||||
|
||||
In Liquid, you can include a hyphen in your tag syntax `{% raw %}{{-{% endraw %}`, `{% raw %}-}}{% endraw %}`, `{% raw %}{%-{% endraw %}`, and `{% raw %}-%}{% endraw %}` to strip whitespace from the left or right side of a rendered tag.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: abs
|
||||
description: Liquid filter that gets the absolute value of a number.
|
||||
---
|
||||
|
||||
Returns the absolute value of a number.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: append
|
||||
description: Liquid filter that appends a string to another string.
|
||||
---
|
||||
|
||||
Concatenates two strings and returns the concatenated value.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: capitalize
|
||||
description: Liquid filter that capitalizes the first character in a string.
|
||||
---
|
||||
|
||||
Makes the first character of a string capitalized.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: ceil
|
||||
description: Liquid filter that gets the ceiling of a number by rounding up to the nearest integer.
|
||||
---
|
||||
|
||||
Rounds the input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
|
||||
|
||||
53
filters/compact.md
Normal file
53
filters/compact.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: compact
|
||||
description: Liquid filter that removes nil values from an array.
|
||||
---
|
||||
|
||||
Removes any `nil` values from an array.
|
||||
|
||||
For this example, assume `site.pages` is an array of content pages for a website, and some of these pages have an attribute called `category` that specifies their content category. If we `map` those categories to an array, some of the array items might be `nil` if any pages do not have a `category` attribute.
|
||||
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
{% raw %}
|
||||
```liquid
|
||||
{% assign site_categories = site.pages | map: 'category' %}
|
||||
|
||||
{% for category in site_categories %}
|
||||
{{ category }}
|
||||
{% endfor %}
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
business
|
||||
celebrities
|
||||
|
||||
lifestyle
|
||||
sports
|
||||
|
||||
technology
|
||||
```
|
||||
|
||||
By using `compact` when we create our `site_categories` array, we can remove all the `nil` values in the array.
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
{% raw %}
|
||||
```liquid
|
||||
{% assign site_categories = site.pages | map: 'category' | compact %}
|
||||
|
||||
{% for category in site_categories %}
|
||||
{{ category }}
|
||||
{% endfor %}
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
business
|
||||
celebrities
|
||||
lifestyle
|
||||
sports
|
||||
technology
|
||||
```
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: date
|
||||
description: Liquid filter that prints and formats dates.
|
||||
---
|
||||
|
||||
Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](http://strftime.net).
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: default
|
||||
description: Liquid filter that specifies a fallback in case a value doesn't exist.
|
||||
---
|
||||
|
||||
Allows you to specify a fallback in case a value doesn't exist. `default` will show its value if the left side is `nil`, `false`, or empty.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: divided_by
|
||||
description: Liquid filter that divides a number by another number.
|
||||
---
|
||||
|
||||
Divides a number by the specified number.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: downcase
|
||||
description: Liquid filter that coverts a string to lowercase.
|
||||
---
|
||||
|
||||
Makes each character in a string lowercase. It has no effect on strings which are already all lowercase.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: escape
|
||||
description: Liquid filter that escapes URL-unsafe characters in a string.
|
||||
---
|
||||
|
||||
Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn't change strings that don't have anything to escape.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: escape_once
|
||||
description: Liquid filter that escapes URL-unsafe characters in a string once.
|
||||
---
|
||||
|
||||
Escapes a string without changing existing escaped entities. It doesn't change strings that don't have anything to escape.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: first
|
||||
description: Liquid filter that returns the first item of an array.
|
||||
---
|
||||
|
||||
Returns the first item of an array.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: floor
|
||||
description: Liquid filter that gets the floor of a number by rounding down to the nearest integer.
|
||||
---
|
||||
|
||||
Rounds a number down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
---
|
||||
title: Filters
|
||||
type: index
|
||||
redirect_to: /liquid/filters/abs
|
||||
---
|
||||
|
||||
**Filters** change the output of a Liquid object. You can append one or more filters to an object by separating the filter and its parameters by a pipe symbol `|`.
|
||||
|
||||
{% assign filter_pages = site.pages | where: 'type', 'filter' %}
|
||||
|
||||
{% for item in filter_pages %}
|
||||
## [{{ item.title }}]({{ item.url | prepend: site.baseurl }})
|
||||
|
||||
{{ item.content }}
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: join
|
||||
description: Liquid filter that joins an array of strings into a single string.
|
||||
---
|
||||
|
||||
Combines the items in an array into a single string using the argument as a separator.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: last
|
||||
description: Liquid filter that gets the last value in an array.
|
||||
---
|
||||
|
||||
Returns the last item of an array.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: lstrip
|
||||
description: Liquid filter that removes whitespace from the left side of a string.
|
||||
---
|
||||
|
||||
Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: map
|
||||
description: Liquid filter that creates an array of values by extracting a named property from an object.
|
||||
---
|
||||
|
||||
Creates an array of values by extracting the values of a named property from another object.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: minus
|
||||
description: Liquid filter that subtracts one number from another.
|
||||
---
|
||||
|
||||
Subtracts a number from another number.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: modulo
|
||||
description: Liquid filter that returns the remainder from a division operation.
|
||||
---
|
||||
|
||||
Returns the remainder of a division operation.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: newline_to_br
|
||||
description: Liquid filter that converts newlines in an input string to HTML <br> tags.
|
||||
---
|
||||
|
||||
Replaces every newline (`\n`) with an HTML line break (`<br>`).
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: plus
|
||||
description: Liquid filter that adds a number to another number.
|
||||
---
|
||||
|
||||
Adds a number to another number.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: prepend
|
||||
description: Liquid filter that prepends a string to the beginning of another string.
|
||||
---
|
||||
|
||||
Adds the specified string to the beginning of another string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: remove
|
||||
description: Liquid filter that removes all occurences of a given substring from a string.
|
||||
---
|
||||
|
||||
Removes every occurrence of the specified substring from a string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: remove_first
|
||||
description: Liquid filter that removes the first occurence of a given substring from a string.
|
||||
---
|
||||
|
||||
Removes only the first occurrence of the specified substring from a string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: replace
|
||||
description: Liquid filter that replaces all occurences of a given substring in a string.
|
||||
---
|
||||
|
||||
Replaces every occurrence of an argument in a string with the second argument.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: replace_first
|
||||
description: Liquid filter that replaces the first occurrence of a given substring in a string.
|
||||
---
|
||||
|
||||
Replaces only the first occurrence of the first argument in a string with the second argument.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: reverse
|
||||
description: Liquid filter that reverses an array, or a string converted to an array.
|
||||
---
|
||||
|
||||
Reverses the order of the items in an array. `reverse` cannot reverse a string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: round
|
||||
description: Liquid filter that rounds a number to the nearest integer.
|
||||
---
|
||||
|
||||
Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: rstrip
|
||||
description: Liquid filter that removes all whitespace from the right side of a string.
|
||||
---
|
||||
|
||||
Removes all whitespace (tabs, spaces, and newlines) from the right side of a string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: size
|
||||
description: Liquid filter that returns the number of characters in a string or the number of items in an array.
|
||||
---
|
||||
|
||||
Returns the number of characters in a string or the number of items in an array. `size` can also be used with dot notation (for example, `{% raw %}{{ my_string.size }}{% endraw %}`). This allows you to use `size` inside tags such as conditionals.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: slice
|
||||
description: Liquid filter that returns a substring from a given position in a string.
|
||||
---
|
||||
|
||||
Returns a substring of 1 character beginning at the index specified by the argument passed in. An optional second argument specifies the length of the substring to be returned.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: sort
|
||||
description: Liquid filter that sorts an array in case-sensitive order.
|
||||
---
|
||||
|
||||
Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive.
|
||||
|
||||
20
filters/sort_natural.md
Normal file
20
filters/sort_natural.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: sort_natural
|
||||
description: Liquid filter that sorts an array in case-insensitive order.
|
||||
---
|
||||
|
||||
Sorts items in an array by a property of an item in the array.
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
{% raw %}
|
||||
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
|
||||
|
||||
{{ my_array | sort_natural | join: ", " }}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
giraffe, octopus, Sally Snake, zebra
|
||||
```
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: split
|
||||
description: Liquid filter that splits a string into an array using separators.
|
||||
---
|
||||
|
||||
Divides an input string into an array using the argument as a separator. `split` is commonly used to convert comma-separated items from a string to an array.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: strip
|
||||
description: Liquid filter that removes whitespace from the left and right sides of a string.
|
||||
---
|
||||
|
||||
Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: strip_html
|
||||
description: Liquid filter that removes HTML tags from a string.
|
||||
---
|
||||
|
||||
Removes any HTML tags from a string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: strip_newlines
|
||||
description: Liquid filter that removes newline characters from a string.
|
||||
---
|
||||
|
||||
Removes any newline characters (line breaks) from a string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: times
|
||||
description: Liquid filter that multiplies a number by another number.
|
||||
---
|
||||
|
||||
Multiplies a number by another number.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: truncate
|
||||
description: Liquid filter that truncates a string to a given number of characters.
|
||||
---
|
||||
|
||||
`truncate` shortens a string down to the number of characters passed as a parameter. If the number of characters specified is less than the length of the string, an ellipsis (...) is appended to the string and is included in the character count.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: truncatewords
|
||||
description: Liquid filter that truncates a string to the given number of words.
|
||||
---
|
||||
|
||||
Shortens a string down to the number of words passed as the argument. If the specified number of words is less than the number of words in the string, an ellipsis (...) is appended to the string.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: uniq
|
||||
description: Liquid filter that removes duplicate items from an array.
|
||||
---
|
||||
|
||||
Removes any duplicate elements in an array.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: upcase
|
||||
description: Liquid filter that capitalizes every character in a string.
|
||||
---
|
||||
|
||||
Makes each character in a string uppercase. It has no effect on strings which are already all uppercase.
|
||||
|
||||
18
filters/url_decode.md
Normal file
18
filters/url_decode.md
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: url_decode
|
||||
description: Liquid filter that decodes percent-encoded characters in a string.
|
||||
---
|
||||
|
||||
Decodes a string that has been encoded as a URL or by [`url_encode`]({{ '/filters/url_encode' | prepend: site.baseurl }}).
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
{% raw %}
|
||||
{{ "%27Stop%21%27+said+Fred" | url_decode }}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
'Stop!' said Fred
|
||||
```
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: url_encode
|
||||
description: Liquid filter that encodes URL-unsafe characters in a string.
|
||||
---
|
||||
|
||||
Converts any URL-unsafe characters in a string into percent-encoded characters.
|
||||
|
||||
BIN
images/icons/water-drop-128x.png
Normal file
BIN
images/icons/water-drop-128x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
images/icons/water-drop-32x.png
Normal file
BIN
images/icons/water-drop-32x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
images/icons/water-drop-64x.png
Normal file
BIN
images/icons/water-drop-64x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
8
index.md
8
index.md
@@ -1,16 +1,14 @@
|
||||
---
|
||||
layout: default
|
||||
description: Documentation for the Liquid template language, created by Shopify.
|
||||
---
|
||||
|
||||
{% include home-banner.html %}
|
||||
|
||||
## What is Liquid?
|
||||
|
||||
Liquid is an open-source template language created by [Shopify](https://www.shopify.com) and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
|
||||
|
||||
Liquid has been in production use since June 2006 and is now used by many other hosted web applications.
|
||||
Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications.
|
||||
|
||||
## Who uses Liquid?
|
||||
## Used by
|
||||
|
||||
{% include home-users-grid.html %}
|
||||
|
||||
|
||||
4
js/vendor/jquery-3.1.1.slim.min.js
vendored
Normal file
4
js/vendor/jquery-3.1.1.slim.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
238
tags/_theme.md
238
tags/_theme.md
@@ -1,238 +0,0 @@
|
||||
---
|
||||
title: Theme
|
||||
---
|
||||
|
||||
|
||||
Theme Tags have various functions, including:
|
||||
|
||||
- Outputting template-specific HTML markup
|
||||
- Telling the theme which layout and snippets to use
|
||||
- Splitting a returned array into multiple pages.
|
||||
|
||||
|
||||
### comment
|
||||
|
||||
<p>Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing <code>comment</code> blocks will not be output, and any Liquid code within will not be executed.</p>
|
||||
|
||||
<div class="code-block code-block--input">
|
||||
{% highlight html %}{% raw %}
|
||||
My name is {% comment %}super{% endcomment %} Shopify.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="code-block code-block--output">
|
||||
{% highlight html %}{% raw %}
|
||||
My name is Shopify.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
### include
|
||||
|
||||
Inserts a snippet from the **snippets** folder of a theme.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% include 'snippet-name' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
Note that the <tt>.liquid</tt> extension is omitted in the above code.
|
||||
|
||||
When a snippet is included, the code inside it will have access to the variables within its parent template.
|
||||
|
||||
<h3 id="multi-variable-snippet">Including multiple variables in a snippet</h3>
|
||||
|
||||
There are two ways to include multiple variables in a snippet. You can assign and include them on different lines:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign snippet_variable = 'this is it' %}
|
||||
{% assign snippet_variable_two = 'this is also it' %}
|
||||
{% include 'snippet' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
Or you can consolidate them into one line of code:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<h2 class="parameter">parameters <span>include</span></h2>
|
||||
|
||||
### with
|
||||
|
||||
The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet.
|
||||
|
||||
For example, we can have a snippet named **color.liquid** which contains the following:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
color: '{{ color }}'
|
||||
shape: '{{ shape }}'
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
Within **theme.liquid**, we can include the **color.liquid** snippet as follows:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign shape = 'circle' %}
|
||||
{% include 'color' %}
|
||||
{% include 'color' with 'red' %}
|
||||
{% include 'color' with 'blue' %}
|
||||
{% assign shape = 'square' %}
|
||||
{% include 'color' with 'red' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
The output will be:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
color: shape: 'circle'
|
||||
color: 'red' shape: 'circle'
|
||||
color: 'blue' shape: 'circle'
|
||||
color: 'red' shape: 'square'
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
### form
|
||||
|
||||
Creates an HTML <code><form></code> element with all the necessary attributes (action, id, etc.) and <code><input></code> to submit the form successfully.
|
||||
|
||||
<h2 class="parameter">parameters <span>form</span></h2>
|
||||
|
||||
### new_comment
|
||||
|
||||
Generates a form for creating a new comment in the <a href="/themes/theme-development/templates/article-liquid/">article.liquid</a> template. Requires the <code>article</code> object as a parameter.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form "new_comment", article %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments" class="comment-form" id="article-10582441-comment-form" method="post">
|
||||
<input name="form_type" type="hidden" value="new_comment" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
### layout
|
||||
|
||||
Loads an alternate template file from the **layout** folder of a theme. If no alternate layout is defined, the **theme.liquid** template is loaded by default.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- loads the templates/alternate.liquid template -->
|
||||
{% layout 'alternate' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
If you don't want **any** layout to be used on a specific template, you can use <code>none</code>.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% layout none %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### paginate
|
||||
|
||||
Splitting products, blog articles, and search results across multiple pages is a necessary component of theme design as you are limited to 50 results per page in any <a href="/themes/liquid-documentation/tags/iteration-tags/#for">for</a> loop.
|
||||
|
||||
The <code>paginate</code> tag works in conjunction with the <code> for </code> tag to split content into numerous pages. It must wrap a <code>for</code> tag block that loops through an array, as shown in the example below:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% paginate collection.products by 5 %}
|
||||
{% for product in collection.products %}
|
||||
<!--show product details here -->
|
||||
{% endfor %}
|
||||
{% endpaginate %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
The <code>by</code> parameter is followed by an integer <strong>between 1 and 50</strong> that tells the <code>paginate</code> tag how many results it should output per page.
|
||||
|
||||
|
||||
Within <code>paginate</code> tags, you can access attributes of the <a href="/themes/liquid-documentation/objects/paginate/">paginate</a> object. This includes the attributes to output the links required to navigate within the generated pages.
|
||||
|
||||
|
||||
{% comment %}
|
||||
|
||||
Accessing any attributes of the array you are paginating <em>before</em> the opening <code>paginate</code> tag will cause errors. To avoid this, make sure any variables
|
||||
|
||||
|
||||
**Bad Example**
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.title }}
|
||||
{% paginate collection.products by 5 %}
|
||||
{% for product in collection.products %}
|
||||
{{ product.title }}
|
||||
{% endfor %}
|
||||
{% endpaginate %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
**Good Example**
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% paginate collection.products by 5 %}
|
||||
{% for product in collection.products %}
|
||||
<!--show product details here -->
|
||||
{% endfor %}
|
||||
{% endpaginate %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### raw
|
||||
|
||||
<p>Allows output of Liquid code on a page without being parsed.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
<div class="highlight"><pre><code class="html">{% raw %}{{ 5 | plus: 6 }}{% endraw %} is equal to 11.</code></pre></div>
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
<div class="highlight"><pre><code class="html">{{ 5 | plus: 6 }} is equal to 11.</code></pre></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -1,33 +1,10 @@
|
||||
---
|
||||
title: Control flow
|
||||
description: An overview of control flow and conditional tags in the Liquid template language.
|
||||
---
|
||||
|
||||
Control flow tags can change the information Liquid shows using programming logic.
|
||||
|
||||
## case/when
|
||||
|
||||
Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
{% raw %}
|
||||
{% assign handle = 'cake' %}
|
||||
{% case handle %}
|
||||
{% when 'cake' %}
|
||||
This is a cake
|
||||
{% when 'cookie' %}
|
||||
This is a cookie
|
||||
{% else %}
|
||||
This is not a cake nor a cookie
|
||||
{% endcase %}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
This is a cake
|
||||
```
|
||||
|
||||
## if
|
||||
|
||||
Executes a block of code only if a certain condition is `true`.
|
||||
@@ -96,3 +73,27 @@ Adds more conditions within an `if` or `unless` block.
|
||||
```text
|
||||
Hey Anonymous!
|
||||
```
|
||||
|
||||
## case/when
|
||||
|
||||
Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
{% raw %}
|
||||
{% assign handle = 'cake' %}
|
||||
{% case handle %}
|
||||
{% when 'cake' %}
|
||||
This is a cake
|
||||
{% when 'cookie' %}
|
||||
This is a cookie
|
||||
{% else %}
|
||||
This is not a cake nor a cookie
|
||||
{% endcase %}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
This is a cake
|
||||
```
|
||||
|
||||
@@ -1,16 +1,3 @@
|
||||
---
|
||||
title: Tags
|
||||
type: index
|
||||
redirect_to: /liquid/tags/control-flow
|
||||
---
|
||||
|
||||
**Tags** create the logic and control flow for templates. They are denoted by curly braces and percent signs: {% raw %}`{%` and `%}`{% endraw %}.
|
||||
|
||||
The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.
|
||||
|
||||
{% assign tag_pages = site.pages | where: 'type', 'tag' %}
|
||||
|
||||
{% for item in tag_pages %}
|
||||
## [{{ item.title }}]({{ item.url | prepend: site.baseurl }})
|
||||
|
||||
{{ item.content }}
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Iteration
|
||||
description: An overview of iteration or 'loop' tags in the Liquid template language.
|
||||
---
|
||||
|
||||
Iteration tags run blocks of code repeatedly.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Variable
|
||||
description: An overview of tags for creating variables in the Liquid template language.
|
||||
---
|
||||
|
||||
Variable tags create new Liquid variables.
|
||||
|
||||
Reference in New Issue
Block a user