Compare commits

...

149 Commits

Author SHA1 Message Date
Adam Hollett
e19019517a Merge pull request #1403 from EricFromCanada/gh-pages
Documentation updates for v5.0.0
2021-04-28 14:52:03 -03:00
EricFromCanada
b98d3d6097 Drop blank lines from input examples 2021-04-28 13:43:02 -04:00
EricFromCanada
77c2dfa989 Add new Template page for comment, raw, liquid, echo, render, include 2021-04-28 13:42:33 -04:00
EricFromCanada
d8f5d65e32 Avoid anchor name conflict with introduction page 2021-04-28 13:42:33 -04:00
EricFromCanada
c2fab68b85 Improve wording & formatting 2021-04-28 13:42:33 -04:00
EricFromCanada
c99ddcbfc8 Fix wrong space characters & hard returns 2021-04-28 13:42:33 -04:00
EricFromCanada
fb8432ca16 Mention usage of empty and EmptyDrop 2021-04-28 13:42:33 -04:00
EricFromCanada
1b53edf052 default now has an allow_false parameter 2021-04-28 13:42:33 -04:00
EricFromCanada
b318616a97 offset can have a continue value in for loops 2021-04-28 13:42:33 -04:00
EricFromCanada
fc5d02fe1c capitalize also downcases each remaining letter 2021-04-28 13:42:33 -04:00
EricFromCanada
0f83e333c4 Ranges can be assigned to variables 2021-04-28 13:42:33 -04:00
EricFromCanada
09e4fef712 slice can be used with arrays 2021-04-22 17:19:13 -04:00
EricFromCanada
9e0dc135ca {% when %} can have multiple cases 2021-04-22 17:19:13 -04:00
EricFromCanada
d4222ff2b6 Numbers and array indices can be negative 2021-04-22 17:19:13 -04:00
EricFromCanada
c4dce51f62 Filters can be used during variable assignment 2021-04-22 17:19:13 -04:00
EricFromCanada
9542f1d961 Show version badge on recently-added tags 2021-04-22 17:19:13 -04:00
EricFromCanada
32a327ed30 Update URLs 2021-04-22 17:19:13 -04:00
EricFromCanada
e47ea38940 Condense and improve examples 2021-04-22 17:19:13 -04:00
EricFromCanada
537f53ef7c Remove ignored Gemfile.lock 2021-04-22 08:48:52 -04:00
Dylan Thacker-Smith
bcf72e42d2 Merge pull request #1419 from ADTC/ghp-readme-install
Expanded instructions for getting started
2021-03-30 09:34:29 -07:00
ADTC
7cfa4aa8bc Update README with first-time install instructions
In order to use `bundle` you first have to install it with Ruby. The instructions are expanded to include this procedure.
2021-03-30 14:41:39 +08:00
ADTC
cd467810fb Install wdm Ruby gem in Windows
To avoid polling the file system for changes, Jekyll recommends installing the Windows Directory Monitor in a Windows environment.

After merging this, those on Windows will need to run `bundle install` again. This shouldn't affect other environments.
2021-03-30 10:03:25 +08:00
Dylan Thacker-Smith
109a1fe88a Ignore tags file to avoid conflicts with using ctags (#1411) 2021-03-17 03:44:19 -04:00
Dylan Thacker-Smith
67f086040a Merge pull request #1410 from Shopify/gh-pages-fix-ci
docs CI: Use github actions and non-EOL ruby version
2021-03-16 17:37:43 -04:00
Dylan Thacker-Smith
aa6240f43c Upgrade local dependencies to match what github pages uses
to match what is currently on https://pages.github.com/versions/
2021-03-08 11:39:19 -08:00
Dylan Thacker-Smith
40bf603bfb CI: Use github actions and non-EOL ruby version
* travis-ci.org is going away, so replace it with github actions
* ruby 2.4 is no longer supported upstream, so upgrade to 2.6
2021-03-08 10:25:28 -08:00
Justin Li
ca2050446c Merge pull request #1408 from ADTC/gh-patch-1
Make the documentation for increment/decrement clearer
2021-03-07 18:31:45 -05:00
ADTC
506df22f41 Put the initial values into a code container
It looks better and more readable this way.
2021-03-05 04:17:45 +08:00
ADTC
c63fcdfe0a Apply suggestions from code review
May as well keep the description of the initial render of the tag together.

Co-authored-by: Dylan Thacker-Smith <dylan.smith@shopify.com>
2021-03-05 04:14:17 +08:00
ADTC
95dca87f49 Make the documentation for increment/decrement clearer
The increment and decrement tags are special in that they would output or echo the variable's final value onto the page (or whatever output sink you're using). This needs to be mentioned in the documentation.

Please see Shopify#1399 for more info and discussion.
2021-03-05 02:53:01 +08:00
Mike Angell
6a01c98702 Merge pull request #1147 from EricFromCanada/gh-pages-updates
Documentation fixes & improvements
2019-09-20 03:48:24 +10:00
Mike Angell
515ea65511 Ignore vendor for travis (#1171) 2019-09-20 03:41:18 +10:00
EricFromCanada
a136b74803 Grammar and word choice improvements for readability 2019-09-11 10:46:41 -04:00
EricFromCanada
adf59df3d9 Prefer double quotes for strings 2019-09-09 23:06:39 -04:00
EricFromCanada
40ab3ef17c Fixes for URLs 2019-09-09 23:05:45 -04:00
EricFromCanada
bea649dc63 Auto-generate more code samples, plus other fixes and improvements 2019-09-09 23:01:21 -04:00
EricFromCanada
ea6b176363 Relocate {% raw %} tags inside code blocks 2019-09-09 22:59:33 -04:00
EricFromCanada
9ff1b88985 Adjust whitespace 2019-09-09 22:58:29 -04:00
EricFromCanada
4cfd19a27e Create .editorconfig 2019-09-09 22:52:34 -04:00
EricFromCanada
29d3ac003a Update README instructions 2019-09-09 22:49:19 -04:00
Mike Angell
3b7538566c Merge pull request #1140 from HayatoDoi/gh-pages-pre-wrap
The code is not wrapped when reading a document from a smartphone.
2019-09-04 14:36:36 +10:00
Adam Hollett
01d1f08c6a Merge pull request #1057 from EricFromCanada/gh-pages-updates
Add additional documentation
2019-08-30 10:09:55 -04:00
HayatoDoi
1577b29127 add pre-wrap (Wrap line feed with pre element) 2019-08-29 21:21:43 +09:00
EricFromCanada
58e6e416eb Add additional documentation
Includes descriptions of logical operator order, `else` in a `for` loop, `sort`'s parameter, and dot notation for `first`/`last`/`size`.
2019-08-26 15:35:04 -04:00
Justin Li
83ce52a5f1 Merge pull request #1121 from ZakCodes/scroll-to-section
Scroll to the section of the page
2019-08-06 19:23:57 -04:00
Zakary Kamal Ismail
ecfcbc3ed5 Scroll to the current section in the sidebar 2019-08-06 18:55:08 -04:00
Justin Li
ca3a1bf995 Merge pull request #1123 from ZakCodes/collections
Use collections for the sections of the site
2019-08-06 17:54:30 -04:00
Zakary Kamal Ismail
061dabed98 Use collections for the sections of the site 2019-07-28 16:27:13 -04:00
Abdulwahaab Ahmed
d4159b6069 Updating docs to recommend users to create a development store (#1116)
Updating docs to recommend users to create a development store
2019-07-22 14:49:34 -04:00
Abdulwahaab Ahmed
ecd707cb44 Update basics/variations.md
Co-Authored-By: Clayton Smith <clayton.smith@shopify.com>
2019-07-22 14:14:03 -04:00
Abdulwahaab Ahmed
7a0afa372e Update basics/variations.md
Co-Authored-By: Clayton Smith <clayton.smith@shopify.com>
2019-07-22 12:46:32 -04:00
Abdulwahaab Ahmed
1547da87a5 Updating docs to recommend users to create a development store and removing an expired link 2019-07-22 10:54:21 -04:00
liamgriffin
e0f4e8f232 Merge pull request #1081 from Shopify/adding-GA-tracking
Add GA tag for tracking
2019-03-28 15:25:32 +00:00
liamgriffin
f15825ac76 Add GA tag for tracking
Adding UA tracking tag received from data team to monitor site traffic on Google Analytics
2019-03-27 10:25:27 +00:00
Justin Li
a79240a909 Merge pull request #1039 from Shopify/where-filter-documentation
Add documentation for where filter
2019-03-08 15:32:48 -05:00
Samuel
fbad7cf377 Fix variable name 2019-01-07 13:13:02 -05:00
Samuel
ea0bf2d30b fix braces 2018-10-19 10:52:36 -04:00
Samuel Doiron
d18fc08323 Merge pull request #1043 from Shopify/firefox-scroll-bug
Fix scroll bug on firefox
2018-10-15 15:06:21 -04:00
Samuel
22cb0018a5 Fix scroll bug on firefox 2018-10-15 14:34:55 -04:00
Samuel
8845d1ada1 Add documentation for where filter 2018-10-12 16:19:19 -04:00
Justin Li
45e7d6b652 Merge pull request #1031 from DirtyF/redirects
Fix redirects
2018-09-21 13:15:30 -04:00
Frank Taillandier
15c6d74646 Exclude lock files 2018-09-21 18:37:09 +02:00
Frank Taillandier
d9a4a3d9d7 security: npm audit fix
fixed 2 low severity vulnerabilities
2018-09-21 18:34:33 +02:00
Frank Taillandier
e9e3e306ee upgrade to latest GitHub Pages 2018-09-21 18:27:13 +02:00
Frank Taillandier
cea42bd165 Use example.com as example 2018-09-21 18:26:50 +02:00
Frank Taillandier
725335bbc1 Fix redirection 2018-09-21 18:26:34 +02:00
Frank Taillandier
307c8befc5 Set default URL to GitHub
http://liquidmarkup.org returns 301
2018-09-21 18:25:50 +02:00
Adam Hollett
aed39a43f5 Merge pull request #1001 from DirtyF/spring-cleanup
Spring cleanup
2018-09-21 10:07:38 -04:00
Adam Hollett
a842b59246 Merge pull request #1011 from afeld/patch-1
add note about how date is parsed
2018-06-07 12:22:33 -04:00
Aidan Feldman
b669229f69 simplify language around date parsing 2018-06-07 12:03:15 -04:00
Aidan Feldman
b211fb67fb add note about how date is parsed
Was previously unclear what formats would be accepted.
2018-06-06 10:09:33 -04:00
Frank Taillandier
38a59f4c1d Fix properties order 2018-03-29 16:40:08 +02:00
Frank Taillandier
02364d1025 optimize with SVGO 2018-03-29 16:26:29 +02:00
Frank Taillandier
bed2727d60 No need for title on homepage 2018-03-29 16:26:05 +02:00
Frank Taillandier
ffb9206ef0 Specify document language 2018-03-29 16:25:39 +02:00
Frank Taillandier
9ac8895a1b Avoid link to self on homepage 2018-03-29 16:25:08 +02:00
Frank Taillandier
8959afe1a8 use URL filters 2018-03-29 16:23:49 +02:00
Frank Taillandier
c17cf534db Standard format 2018-03-29 16:21:56 +02:00
Frank Taillandier
9f74627676 update npm packages 2018-03-29 16:21:35 +02:00
Frank Taillandier
3b3be384df fix redirects 2018-03-29 16:21:18 +02:00
Frank Taillandier
daeb5b1e67 plugins is the new gems 2018-03-29 16:21:00 +02:00
Frank Taillandier
8a6f25f3da use latest GitHub Pages 2018-03-29 16:20:33 +02:00
Frank Taillandier
c2878c24c6 update Travis config 2018-03-29 16:20:14 +02:00
Adam Hollett
16c38e37eb Merge pull request #957 from Shopify/min-max-filter-docs
Add docs for at_least and at_most filters
2017-12-14 10:58:35 -05:00
Adam Hollett
0589cf4aac Remove raw tag from non-Liquid code blocks 2017-12-14 10:10:19 -05:00
Justin Li
aba49324c1 Merge pull request #962 from Arafatk/patch-4
Minor Doc fix
2017-12-07 16:00:35 -05:00
Arafat
c4ae2e9012 Update types.md 2017-12-07 21:35:17 +05:30
Nithin Bekal
7cdc482bc4 Add docs for at_least and at_most filters 2017-12-06 11:58:00 -05:00
Adam Hollett
fbe0b39d85 Merge pull request #906 from Shopify/add-concat-filter
Add documentation for concat filter
2017-06-29 10:45:00 -04:00
Adam Hollett
ebf7f9232f Add documentation for concat filter 2017-06-22 11:04:23 -04:00
Adam Hollett
a0b0c608c1 Merge pull request #872 from j-f1/patch-1
Wrap capture example in {% raw %} and highlight it as Liquid
2017-06-22 10:49:00 -04:00
Adam Hollett
1db4219d2f Merge pull request #879 from joshaidan/gh-pages-new-features
Fixes #852: Undocumented Things
2017-03-30 10:25:12 -04:00
Brian Jones
8b6f4d2a45 Change Any Contents to Anything 2017-03-30 10:12:18 -04:00
Brian Jones
cee4a2d7ae Change title and filename to singular 2017-03-30 10:11:04 -04:00
Brian Jones
4bd5446a4e Fix raw tag and correct output 2017-03-30 09:58:10 -04:00
Brian Jones
2f703b30db Document some of the undocumented features 2017-03-29 23:01:40 -04:00
J F
2f8d447d90 Wrap capture example in {% raw %} and highlight it as Liquid 2017-03-18 13:44:08 -04:00
Justin Li
7ecc10b989 Merge pull request #845 from mrmanc/gh-pages
Clarifies spelling of for’s reversed flag to address #843
2017-02-10 19:26:43 -05:00
Justin Li
406b1813cf Merge pull request #856 from sergeifilippov/patch-1
Added a use case example for capture tag
2017-01-25 10:23:29 -05:00
Sergei Filippov
058dc2021d Added a use case example for capture tag 2017-01-24 14:29:14 +13:00
Mark Crossfield
49a41a3f08 Clarifies spelling of for’s reversed flag to address #843
It should now be harder to read the docs and miss the extra letter required for reversed compared to reverse, which causes a fairly generic syntax warning when trying to reverse sort a collection in a for loop.
2017-01-08 12:45:05 +00:00
Adam Hollett
61848f980b Bump gems. Set a space as the heading to disable this awful plugin 2016-12-19 10:18:01 -05:00
Adam Hollett
962e312fdc Try removing the include to fix the title 2016-12-19 10:13:13 -05:00
Adam Hollett
4a6de520db Try some different Liquid 2016-12-19 10:00:27 -05:00
Adam Hollett
9745bf309e Try setting a title and using Liquid to hide it 2016-12-19 09:53:02 -05:00
Adam Hollett
2a847e52fa Add logic to hide page title on index 2016-12-19 09:47:33 -05:00
Adam Hollett
5953c07346 Add default title to index page 2016-12-19 09:38:00 -05:00
Adam Hollett
4ccfaa470d Merge pull request #839 from Shopify/ditch-jquery
Remove jQuery
2016-12-16 13:17:27 -05:00
Adam Hollett
d1aa9a1fa1 Remove dollar signs from variables 2016-12-16 13:13:38 -05:00
Adam Hollett
bfca97f54d Get rid of jQuery 2016-12-16 11:35:08 -05:00
Adam Hollett
e79f0f364d Merge pull request #820 from Shopify/autumn-cleaning
Misc. documentation updates
2016-11-30 08:47:10 -05:00
Adam Hollett
2360370d19 Remove water droplet icon for now 2016-11-30 08:44:59 -05:00
Adam Hollett
b86226c2f6 SVG optimization and CSS fixes 2016-11-14 09:04:38 -05:00
Adam Hollett
f62a3b26fc Mention GitHub Pages 2016-11-09 10:12:12 -05:00
Adam Hollett
5ffb286353 templating -> template 2016-11-09 10:06:22 -05:00
Adam Hollett
cacfe95c59 Add page outlining the most common variants of Liquid 2016-11-09 10:05:54 -05:00
Adam Hollett
1fe6b24d47 Add descriptions for remaining pages 2016-11-09 09:11:47 -05:00
Adam Hollett
d4d3d1a8e7 Delete tags aggregate index, remove hidden theme tags page 2016-11-09 09:11:38 -05:00
Adam Hollett
fd98f82a07 Bump jQuery, fix emoji CSS 2016-11-09 09:02:51 -05:00
Adam Hollett
4e42b08f3c Add favicon and better metadata 2016-11-08 17:23:36 -05:00
Adam Hollett
aef8bd5642 Fix up miscellaneous things and remove some deps 2016-11-08 16:23:33 -05:00
Justin Li
aa35b3f3fd Merge pull request #813 from kainjow/patch-1
Update iteration.md
2016-10-26 18:53:27 -04:00
Kevin Wojniak
295bdf3fa8 Update iteration.md
Fix liquid syntax error

Liquid Warning: Liquid syntax error (line 111): Unexpected character   in "i in (3..5) " in tags/iteration.md
2016-10-26 14:16:17 -07:00
Justin Li
16f0580d33 Merge pull request #810 from knu/patch-1
Document how to get the current time
2016-10-23 10:35:44 -04:00
Akinori MUSHA
0ecaecc889 Document how to get the current time 2016-10-23 22:42:23 +09:00
Adam Hollett
8b07f4b059 Merge pull request #785 from Shopify/whitespace-control-docs
Add page on whitespace control tags
2016-08-12 08:58:33 -04:00
Adam Hollett
98d098f060 Add page on whitespace control tags 2016-08-11 10:08:24 -04:00
Adam Hollett
05c5d2a12d Merge pull request #781 from MilanAryal/patch-1
Add http for strftime site
2016-07-20 10:32:37 -04:00
Milan Aryal
e97ee306d8 Add http for strftime site 2016-07-20 11:42:49 +05:45
Adam Hollett
461db01257 Merge pull request #766 from Shopify/multiplication-and-division
Better explanation of divided_by filter
2016-06-15 10:48:35 -04:00
Adam Hollett
20562fb32a Markdown linting 2016-06-15 10:02:56 -04:00
Adam Hollett
1e093f9cb6 Remove errant colon 2016-06-15 10:00:24 -04:00
Adam Hollett
bda77bc934 Better explanation of divided_by filter 2016-06-15 09:56:06 -04:00
Adam Hollett
55bded5041 Prepend page links with baseurl 2016-06-14 16:27:18 -04:00
Adam Hollett
4fdb21e0ea Merge pull request #765 from Shopify/collection-index-pages
Generate index pages for tags and filters
2016-06-14 15:15:37 -04:00
Adam Hollett
c2ead29ff9 Generate index pages for tags and filters 2016-06-14 11:04:31 -04:00
Adam Hollett
8590bb5727 Merge pull request #764 from Shopify/truncate-filter-parameters
Examples for second parameter of truncate
2016-06-13 16:00:20 -04:00
Adam Hollett
d849a9e010 Examples for second parameter of truncate 2016-06-13 12:58:30 -04:00
Adam Hollett
6fc28fcf2e Fix typo 2016-06-07 15:43:03 -04:00
Matt Vleming
75556460f0 Delete CNAME 2016-05-12 15:45:52 -04:00
tetchi
80f6f04132 Merge pull request #741 from Shopify/a11y-updates
[Docs] Adds a11y landmarks
2016-04-11 09:31:25 -04:00
Adam Hollett
7e25675dc3 Merge pull request #742 from Shopify/code-labels-for-abs
Add code labels for abs filter
2016-04-11 08:58:22 -04:00
Adam Hollett
89e3728ec8 Add code labels for abs filter 2016-04-11 08:57:20 -04:00
Adam Hollett
424c97464a Merge pull request #738 from Shopify/markdown-renderer
Switch to kramdown/rouge and fix code blocks
2016-04-11 08:53:01 -04:00
Tetsuro
c89176b219 Add role attribute for old screen readers 2016-04-10 19:26:03 -04:00
Tetsuro
1d2ad13bd8 Adds a11y landmarks 2016-04-10 19:15:20 -04:00
Adam Hollett
d085b5911d Merge pull request #739 from Shopify/abs-filter-docs
Add abs filter docs
2016-04-05 09:43:18 -04:00
Adam Hollett
6c3fc60e32 Add "also" 2016-04-05 09:36:56 -04:00
Adam Hollett
0bfab96fc0 Add abs filter docs 2016-04-05 09:31:44 -04:00
107 changed files with 3712 additions and 1557 deletions

12
.editorconfig Normal file
View File

@@ -0,0 +1,12 @@
# http://editorconfig.org/
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
[*.md]
trim_trailing_whitespace = true

20
.github/workflows/docs.yml vendored Normal file
View File

@@ -0,0 +1,20 @@
name: Build Docs
on:
push: {}
pull_request:
types: [opened, synchronize]
jobs:
build:
if: github.event_name == 'push' || github.event.pull_request.head.repo.owner.login != 'Shopify'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: ruby/setup-ruby@v1
with:
ruby-version: '2.7.1'
bundler-cache: true
- run: bundle exec jekyll build --trace

View File

@@ -1,4 +0,0 @@
install: gem install github-pages
script: jekyll build --trace
sudo: false
rvm: 2.1

1
CNAME
View File

@@ -1 +0,0 @@
liquidmarkup.org

View File

@@ -1,3 +1,4 @@
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
gem 'github-pages', '>=180', group: :jekyll_plugins
gem 'wdm', '>= 0.1.0' if Gem.win_platform?

View File

@@ -1,133 +0,0 @@
GEM
remote: https://rubygems.org/
specs:
RedCloth (4.2.9)
activesupport (4.2.6)
i18n (~> 0.7)
json (~> 1.7, >= 1.7.7)
minitest (~> 5.1)
thread_safe (~> 0.3, >= 0.3.4)
tzinfo (~> 1.1)
addressable (2.4.0)
coffee-script (2.4.1)
coffee-script-source
execjs
coffee-script-source (1.10.0)
colorator (0.1)
ethon (0.8.1)
ffi (>= 1.3.0)
execjs (2.6.0)
faraday (0.9.2)
multipart-post (>= 1.2, < 3)
ffi (1.9.10)
gemoji (2.1.0)
github-pages (68)
RedCloth (= 4.2.9)
github-pages-health-check (= 1.1.0)
jekyll (= 3.0.3)
jekyll-coffeescript (= 1.0.1)
jekyll-feed (= 0.4.0)
jekyll-gist (= 1.4.0)
jekyll-github-metadata (= 1.10.0)
jekyll-mentions (= 1.1.2)
jekyll-paginate (= 1.1.0)
jekyll-redirect-from (= 0.10.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)
liquid (= 3.0.6)
mercenary (~> 0.3)
rdiscount (= 2.1.8)
redcarpet (= 3.3.3)
rouge (= 1.10.1)
terminal-table (~> 1.4)
github-pages-health-check (1.1.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)
nokogiri (>= 1.4)
i18n (0.7.0)
jekyll (3.0.3)
colorator (~> 0.1)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 1.1)
kramdown (~> 1.3)
liquid (~> 3.0)
mercenary (~> 0.3.3)
rouge (~> 1.7)
safe_yaml (~> 1.0)
jekyll-coffeescript (1.0.1)
coffee-script (~> 2.2)
jekyll-feed (0.4.0)
jekyll-gist (1.4.0)
octokit (~> 4.2)
jekyll-github-metadata (1.10.0)
octokit (~> 4.0)
jekyll-mentions (1.1.2)
html-pipeline (~> 2.3)
jekyll (~> 3.0)
jekyll-paginate (1.1.0)
jekyll-redirect-from (0.10.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)
gemoji (~> 2.0)
html-pipeline (~> 2.2)
jekyll (>= 3.0)
json (1.8.3)
kramdown (1.10.0)
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)
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)
public_suffix (1.5.3)
rb-fsevent (0.9.7)
rb-inotify (0.9.7)
ffi (>= 0.5.0)
rdiscount (2.1.8)
redcarpet (3.3.3)
rouge (1.10.1)
safe_yaml (1.0.4)
sass (3.4.22)
sawyer (0.7.0)
addressable (>= 2.3.5, < 2.5)
faraday (~> 0.8, < 0.10)
terminal-table (1.5.2)
thread_safe (0.3.5)
typhoeus (0.8.0)
ethon (>= 0.8.0)
tzinfo (1.2.2)
thread_safe (~> 0.1)
PLATFORMS
ruby
DEPENDENCIES
github-pages
BUNDLED WITH
1.11.2

View File

@@ -1,6 +1,6 @@
// Gruntfile
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt)
// Project configuration.
grunt.initConfig({
@@ -16,7 +16,7 @@ require('load-grunt-tasks')(grunt);
}
},
jekyll: {
files: ['index.md', '_includes/*.html', 'filters/*.*', '_layouts/*.*', 'tags/*.*', 'basics/*.*'],
files: ['index.md', '_includes/*.html', 'filters/*.*', '_layouts/*.*', 'tags/*.*', 'basics/*.*'],
tasks: ['shell:jekyllBuild']
}
},
@@ -24,22 +24,22 @@ require('load-grunt-tasks')(grunt);
sass: {
dist: {
options: {
style: 'expanded',
style: 'compact',
sourcemap: 'none'
},
files: {
'_site/css/main.css':'_sass/main.scss'
'_site/css/main.css': '_sass/main.scss'
}
}
},
shell: {
jekyllServe: {
command: 'jekyll serve --no-watch'
command: 'bundle exec jekyll serve --no-watch'
},
jekyllBuild: {
command: 'jekyll build'
command: 'bundle exec jekyll build'
}
},
@@ -47,7 +47,7 @@ require('load-grunt-tasks')(grunt);
options: {
map: true,
processors: [
require('autoprefixer-core')({browsers: 'last 2 versions'})
require('autoprefixer')({browsers: 'last 2 versions'})
]
},
dist: {
@@ -61,12 +61,12 @@ require('load-grunt-tasks')(grunt);
logConcurrentOutput: true
}
}
});
})
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks('grunt-contrib-sass')
grunt.loadNpmTasks('grunt-postcss')
grunt.loadNpmTasks('grunt-concurrent')
grunt.registerTask('default', ['concurrent']);
};
grunt.registerTask('default', ['concurrent'])
}

View File

@@ -2,8 +2,10 @@
To run, follow these steps:
1. Download ZIP or clone in GitHub
2. Navigate to `liquid` folder
3. Run `jekyll watch`
4. Open `http://127.0.0.1:4000` in your browser
1. [Download and install Ruby](https://www.ruby-lang.org/en/downloads)
2. Download ZIP or clone in GitHub
3. Navigate to `liquid-gh-pages` folder or checkout `gh-pages` branch
4. Run `gem install bundler`
5. Run `bundle install`
6. Run `bundle exec jekyll serve`
7. Open [`http://127.0.0.1:4000/liquid/`](http://127.0.0.1:4000/liquid/) in your browser

82
_basics/introduction.md Normal file
View File

@@ -0,0 +1,82 @@
---
title: Introduction
description: An overview of objects, tags, and filters in the Liquid template language.
redirect_from: /basics/
---
Liquid uses a combination of [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters) inside **template files** to display dynamic content.
## Objects
**Objects** contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ page.title }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ page.title }}
```
In this case, Liquid is rendering the content of the `title` property of the `page` object, which contains the text `{{ page.title }}`.
## Tags
**Tags** create the logic and control flow for templates. The curly brace percentage delimiters `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}` and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% if user %}
Hello {{ user.name }}!
{% endif %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Hello Adam!
```
Tags can be categorized into various types:
- [Control flow]({{ "/tags/control-flow/" | prepend: site.baseurl }})
- [Iteration]({{ "/tags/iteration/" | prepend: site.baseurl }})
- [Template]({{ "/tags/template/" | prepend: site.baseurl }})
- [Variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }})
You can read more about each type of tag in their respective sections.
## Filters
**Filters** change the output of a Liquid object or variable. They are used within double curly braces `{% raw %}{{ }}{% endraw %}` and [variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }}), and are separated by a pipe character `|`.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "/my/fancy/url" | append: ".html" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "/my/fancy/url" | append: ".html" }}
```
Multiple filters can be used on one output, and are applied from left to right.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "adam!" | capitalize | prepend: "Hello " }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "adam!" | capitalize | prepend: "Hello " }}
```

View File

@@ -1,8 +1,9 @@
---
title: Operators
description: Using operators to perform calculations in the Liquid template language.
---
Liquid includes many logical and comparison operators.
Liquid includes many logical and comparison operators. You can use operators to create logic with [control flow]({{ "/tags/control-flow/" | prepend: site.baseurl }}) tags.
## Basic operators
@@ -46,17 +47,17 @@ Liquid includes many logical and comparison operators.
For example:
```liquid
{% raw %}
{%- raw -%}
{% if product.title == "Awesome Shoes" %}
These shoes are awesome!
{% endif %}
{% endraw %}
```
You can use multiple operators in a tag:
You can do multiple comparisons in a tag using the `and` and `or` operators:
```liquid
{% raw %}
{%- raw -%}
{% if product.type == "Shirt" or product.type == "Shoes" %}
This is a shirt or a pair of shoes.
{% endif %}
@@ -68,8 +69,8 @@ You can use multiple operators in a tag:
`contains` checks for the presence of a substring inside a string.
```liquid
{% raw %}
{% if product.title contains 'Pack' %}
{%- raw -%}
{% if product.title contains "Pack" %}
This product's title contains the word Pack.
{% endif %}
{% endraw %}
@@ -78,11 +79,36 @@ You can use multiple operators in a tag:
`contains` can also check for the presence of a string in an array of strings.
```liquid
{% raw %}
{% if product.tags contains 'Hello' %}
This product has been tagged with 'Hello'.
{%- raw -%}
{% if product.tags contains "Hello" %}
This product has been tagged with "Hello".
{% endif %}
{% endraw %}
```
`contains` can only search strings. You cannot use it to check for an object in an array of objects.
## Order of operations
In tags with more than one `and` or `or` operator, operators are checked in order *from right to left*. You cannot change the order of operations using parentheses — parentheses are invalid characters in Liquid and will prevent your tags from working.
```liquid
{%- raw -%}
{% if true or false and false %}
This evaluates to true, since the `and` condition is checked first.
{% endif %}
{% endraw %}
```
```liquid
{%- raw -%}
{% if true and false and false or true %}
This evaluates to false, since the tags are checked like this:
true and (false and (false or true))
true and (false and true)
true and false
false
{% endif %}
{% endraw %}
```

View File

@@ -1,48 +1,45 @@
---
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.
- [Truthy](#truthy)
- [Falsy](#falsy)
- [Summary](#summary)
When a non-boolean [data type]({{ "/basics/types/" | prepend: site.baseurl }}) is used in a boolean context (such as a conditional tag), Liquid decides whether to evaluate it as `true` or `false`. Data types that return `true` by default are called **truthy**. Data types that return false by default are called **falsy**.
## Truthy
All values in Liquid are truthy except `nil` and `false`.
In the example below, the string "Tobi" is not a boolean, but it is truthy in a conditional:
In the example below, the text "Tobi" is not a boolean, but it is truthy in a conditional:
```liquid
{% raw %}
{% assign tobi = "Tobi" %}
{%- raw -%}
{% assign name = "Tobi" %}
{% if tobi %}
This condition will always be true.
{% if name %}
This text will always appear since "name" is defined.
{% endif %}
{% endraw %}
```
[Strings]({{ "/basics/types/#string" | prepend: site.baseurl }}), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
[Strings]({{ "/basics/types/#string" | prepend: site.baseurl }}), even when empty, are truthy. The example below will create empty HTML tags if `page.category` exists but is empty:
<p class="code-label">Input</p>
```liquid
{% raw %}
{% if settings.fp_heading %}
<h1>{{ settings.fp_heading }}</h1>
{%- raw -%}
{% if page.category %}
<h1>{{ page.category }}</h1>
{% endif %}
{% endraw %}
```
<p class="code-label">Output</p>
```html
<h1></h1>
<h1></h1>
```
## Falsy
The falsy values in Liquid are [`nil`]({{ "/basics/types/#nil" | prepend: site.baseurl }}) and [`false`]({{ "/basics/types/#boolean" | prepend: site.baseurl }}).
The only values that are falsy in Liquid are [`nil`]({{ "/basics/types/#nil" | prepend: site.baseurl }}) and [`false`]({{ "/basics/types/#boolean" | prepend: site.baseurl }}).
## Summary

157
_basics/types.md Normal file
View File

@@ -0,0 +1,157 @@
---
title: Types
description: An overview of data types in the Liquid template language.
---
Liquid objects can be one of six types:
- [String](#string)
- [Number](#number)
- [Boolean](#boolean)
- [Nil](#nil)
- [Array](#array)
- [EmptyDrop](#emptydrop)
You can initialize Liquid variables using [`assign`]({{ "/tags/variable/#assign" | prepend: site.baseurl }}) or [`capture`]({{ "/tags/variable/#capture" | prepend: site.baseurl }}) tags.
## String
Strings are sequences of characters wrapped in single or double quotes:
```liquid
{%- raw -%}
{% assign my_string = "Hello World!" %}
{% endraw %}
```
Liquid does not convert escape sequences into special characters.
## Number
Numbers include floats and integers:
```liquid
{%- raw -%}
{% assign my_int = 25 %}
{% assign my_float = -39.756 %}
{% endraw %}
```
## Boolean
Booleans are either `true` or `false`. No quotations are necessary when declaring a boolean:
```liquid
{%- raw -%}
{% assign foo = true %}
{% assign bar = false %}
{% endraw %}
```
## Nil
Nil is a special empty value that is returned when Liquid code has no results. It is **not** a string with the characters "nil".
Nil is [treated as false]({{ "/basics/truthy-and-falsy/#falsy" | prepend: site.baseurl }}) in the conditions of `if` blocks and other Liquid tags that check the truthfulness of a statement.
In the following example, if the user does not exist (that is, `user` returns `nil`), Liquid will not print the greeting:
```liquid
{%- raw -%}
{% if user %}
Hello {{ user.name }}!
{% endif %}
{% endraw %}
```
Tags or outputs that return `nil` will not print anything to the page.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
The current user is {{ user.name }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
The current user is
```
## Array
Arrays hold lists of variables of any type.
### Accessing items in arrays
To access all the items in an array, you can loop through each item in the array using an [iteration tag]({{ "/tags/iteration/" | prepend: site.baseurl }}).
<p class="code-label">Input</p>
```liquid
{%- raw -%}
<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{% for user in site.users %}
{{ user }}
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Tobi Laura Tetsuro Adam
```
### Accessing specific items in arrays
You can use square bracket `[` `]` notation to access a specific item in an array. Array indexing starts at zero. A negative index will count from the end of the array.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[-1] }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Tobi
Laura
Adam
```
### Initializing arrays
You cannot initialize arrays using only Liquid.
You can, however, use the [`split`]({{ "/filters/split/" | prepend: site.baseurl }}) filter to break a string into an array of substrings.
## EmptyDrop
An EmptyDrop object is returned if you try to access a deleted object. In the example below, `page_1`, `page_2` and `page_3` are all EmptyDrop objects:
```liquid
{%- raw -%}
{% assign variable = "hello" %}
{% assign page_1 = pages[variable] %}
{% assign page_2 = pages["does-not-exist"] %}
{% assign page_3 = pages.this-handle-does-not-exist %}
{% endraw %}
```
### Checking for emptiness
You can check to see if an object exists or not before you access any of its attributes.
```liquid
{%- raw -%}
{% unless pages == empty %}
<h1>{{ pages.frontpage.title }}</h1>
<div>{{ pages.frontpage.content }}</div>
{% endunless %}
{% endraw %}
```
Both empty strings and empty arrays will return `true` if checked for equivalence with `empty`.

24
_basics/variations.md Normal file
View 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 candidatesthat 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 developer documentation](https://shopify.dev/docs/themes/liquid/reference). If you want to try out Shopify's version of Liquid, you can create a development store through the [Shopify Partner Dashboard](https://help.shopify.com/en/partners/dashboard/managing-stores/development-stores).
## 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 which version of Liquid is being used by Jekyll or GitHub Pages, check the **runtime dependencies** section of the gem page for [Jekyll](https://rubygems.org/gems/jekyll) or [GitHub Pages](https://rubygems.org/gems/github-pages).
Jekyll's version of Liquid is documented in the [Liquid section of Jekyll's documentation](https://jekyllrb.com/docs/liquid/). 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.

86
_basics/whitespace.md Normal file
View File

@@ -0,0 +1,86 @@
---
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.
Normally, even if it doesn't print text, any line of Liquid in your template will still print a blank line in your rendered HTML:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign my_variable = "tomato" %}
{{ my_variable }}
{% endraw %}
```
Notice the blank line before "tomato" in the rendered template:
<p class="code-label">Output</p>
```text
{% assign my_variable = "tomato" %}
{{ my_variable }}
```
By including a hyphen in your `assign` closing delimiter, you can strip the whitespace following it from the rendered template:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign my_variable = "tomato" -%}
{{ my_variable }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_variable = "tomato" -%}
{{ my_variable }}
```
If you don't want any of your tags to print whitespace, as a general rule you can add hyphens to both sides of all your tags (`{% raw %}{%-{% endraw %}` and `{% raw %}-%}{% endraw %}`):
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %}
Wow, {{ username }} , you have a long name!
{% else %}
Hello there!
{% endif %}
{% endraw %}
```
<p class="code-label">Output without whitespace control</p>
```text
{% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %}
Wow, {{ username }} , you have a long name!
{% else %}
Hello there!
{% endif %}
```
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign username = "John G. Chalmers-Smith" -%}
{%- if username and username.size > 10 -%}
Wow, {{ username -}} , you have a long name!
{%- else -%}
Hello there!
{%- endif %}
{% endraw %}
```
<p class="code-label">Output with whitespace control</p>
```text
{% assign username = "John G. Chalmers-Smith" -%}
{%- if username and username.size > 10 -%}
Wow, {{ username -}} , you have a long name!
{%- else -%}
Hello there!
{%- endif %}
```

View File

@@ -1,21 +1,36 @@
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/
url: http://liquidmarkup.org # the base hostname & protocol for your site
url: https://shopify.github.io # the base hostname & protocol for your site
permalink: pretty
exclude:
- README.md
- CNAME
- Gemfile
- Gemfile.lock
- Gruntfile.js
- package.json
- package-lock.json
- node_modules
- vendor
- tags
keep_files: ["css"]
# Collections
collections:
basics:
output: true
tags:
output: true
filters:
output: true
# Plugins
plugins:
- jekyll-redirect-from
# Front matter defaults
defaults:
- scope:

35
_filters/abs.md Normal file
View File

@@ -0,0 +1,35 @@
---
title: abs
description: Liquid filter that returns the absolute value of a number.
redirect_from: /filters/
---
Returns the absolute value of a number.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ -17 | abs }}
{{ 4 | abs }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ -17 | abs }}
{{ 4 | abs }}
```
`abs` will also work on a string that only contains a number.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "-19.86" | abs }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "-19.86" | abs }}
```

View File

@@ -1,12 +1,13 @@
---
title: append
description: Liquid filter that appends a string to another string.
---
Concatenates two strings and returns the concatenated value.
Adds the specified string to the end of another string.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "/my/fancy/url" | append: ".html" }}
{% endraw %}
```
@@ -16,11 +17,11 @@ Concatenates two strings and returns the concatenated value.
{{ "/my/fancy/url" | append: ".html" }}
```
`append` can also be used with variables:
`append` can also accept a variable as its argument.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign filename = "/index.html" %}
{{ "website.com" | append: filename }}
{% endraw %}

21
_filters/at_least.md Normal file
View File

@@ -0,0 +1,21 @@
---
title: at_least
description: Liquid filter that limits a number to a minimum value.
version-badge: 4.0.1
---
Limits a number to a minimum value.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ 4 | at_least: 5 }}
{{ 4 | at_least: 3 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
5
4
```

21
_filters/at_most.md Normal file
View File

@@ -0,0 +1,21 @@
---
title: at_most
description: Liquid filter that limits a number to a maximum value.
version-badge: 4.0.1
---
Limits a number to a maximum value.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ 4 | at_most: 5 }}
{{ 4 | at_most: 3 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
4
3
```

32
_filters/capitalize.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: capitalize
description: Liquid filter that capitalizes the first character of a string and downcases the remaining characters.
---
Makes the first character of a string capitalized and converts the remaining characters to lowercase.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "title" | capitalize }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "title" | capitalize }}
```
Only the first character of a string is capitalized, so later words are not capitalized:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "my GREAT title" | capitalize }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "my GREAT title" | capitalize }}
```

View File

@@ -1,42 +1,23 @@
---
title: ceil
description: Liquid filter that returns 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.
Rounds an input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ 1.2 | ceil }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | ceil }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 2.0 | ceil }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 2.0 | ceil }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | ceil }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | ceil }}
{{ 2.0 | ceil }}
{{ 183.357 | ceil }}
```
@@ -44,7 +25,7 @@ Here the input value is a string:
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "3.5" | ceil }}
{% endraw %}
```

53
_filters/compact.md Normal file
View File

@@ -0,0 +1,53 @@
---
title: compact
description: Liquid filter that removes nil values from an array.
version-badge: 4.0.0
---
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>
```liquid
{%- raw -%}
{% 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>
```liquid
{%- raw -%}
{% 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
```

59
_filters/concat.md Normal file
View File

@@ -0,0 +1,59 @@
---
title: concat
description: Liquid filter that concatenates arrays.
version-badge: 4.0.0
---
Concatenates (joins together) multiple arrays. The resulting array contains all the items from the input arrays.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
{% assign vegetables = "carrots, turnips, potatoes" | split: ", " %}
{% assign everything = fruits | concat: vegetables %}
{% for item in everything %}
- {{ item }}
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
- apples
- oranges
- peaches
- carrots
- turnips
- potatoes
```
You can string together multiple `concat` filters to join more than two arrays.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign furniture = "chairs, tables, shelves" | split: ", " %}
{% assign everything = fruits | concat: vegetables | concat: furniture %}
{% for item in everything %}
- {{ item }}
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
- apples
- oranges
- peaches
- carrots
- turnips
- potatoes
- chairs
- tables
- shelves
```

60
_filters/date.md Normal file
View File

@@ -0,0 +1,60 @@
---
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). The input uses the same format as Ruby's [`Time.parse`](https://ruby-doc.org/stdlib/libdoc/time/rdoc/Time.html#method-c-parse).
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ article.published_at | date: "%a, %b %d, %y" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Fri, Jul 17, 15
```
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ article.published_at | date: "%Y" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
2015
```
`date` works on strings if they contain well-formatted dates.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "March 14, 2016" | date: "%b %d, %y" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "March 14, 2016" | date: "%b %d, %y" }}
```
To get the current time, pass the special word `"now"` (or `"today"`) to `date`.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
{% endraw %}
```
<p class="code-label">Output</p>
```text
This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
```
Note that the value will be the current time of when the page was last generated from the template, not when the page is presented to a user if caching or static site generation is involved.

70
_filters/default.md Normal file
View File

@@ -0,0 +1,70 @@
---
title: default
description: Liquid filter that specifies a fallback in case a value doesn't exist.
---
Sets a default value for any variable with no assigned value. `default` will show its value if the input is `nil`, `false`, or empty.
In this example, `product_price` is not defined, so the default value is used.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ product_price | default: 2.99 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ product_price | default: 2.99 }}
```
In this example, `product_price` is defined, so the default value is not used.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign product_price = 4.99 %}
{{ product_price | default: 2.99 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign product_price = 4.99 %}
{{ product_price | default: 2.99 }}
```
In this example, `product_price` is empty, so the default value is used.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}
```
### Allowing `false` {%- include version-badge.html version="5.0.0" %}
To allow variables to return `false` instead of the default value, you can use the `allow_false` parameter.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign display_price = false %}
{{ display_price | default: true, allow_false: true }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
false
```

92
_filters/divided_by.md Normal file
View File

@@ -0,0 +1,92 @@
---
title: divided_by
description: Liquid filter that divides a number by another number.
---
Divides a number by another number.
The result is rounded down to the nearest integer (that is, the [floor]({{ "/filters/floor/" | prepend: site.baseurl }})) if the divisor is an integer.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ 16 | divided_by: 4 }}
{{ 5 | divided_by: 3 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 16 | divided_by: 4 }}
{{ 5 | divided_by: 3 }}
```
### Controlling rounding
`divided_by` produces a result of the same type as the divisor — that is, if you divide by an integer, the result will be an integer. If you divide by a float (a number with a decimal in it), the result will be a float.
For example, here the divisor is an integer:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ 20 | divided_by: 7 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 20 | divided_by: 7 }}
```
Here it is a float:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ 20 | divided_by: 7.0 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 20 | divided_by: 7.0 }}
```
### Changing variable types
You might want to use a variable as a divisor, in which case you can't simply add `.0` to convert it to a float. In these cases, you can `assign` a version of your variable converted to a float using the `times` filter.
In this example, we're dividing by a variable that contains an integer, so we get an integer:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign my_integer = 7 %}
{{ 20 | divided_by: my_integer }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_integer = 7 %}
{{ 20 | divided_by: my_integer }}
```
Here, we [multiply]({{ "/filters/times/" | prepend: site.baseurl }}) the variable by `1.0` to get a float, then divide by the float instead:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign my_integer = 7 %}
{% assign my_float = my_integer | times: 1.0 %}
{{ 20 | divided_by: my_float }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_integer = 7 %}
{% assign my_float = my_integer | times: 1.0 %}
{{ 20 | divided_by: my_float }}
```

View File

@@ -1,12 +1,13 @@
---
title: downcase
description: Liquid filter that converts a string to lowercase.
---
Makes each character in a string lowercase. It has no effect on strings which are already all lowercase.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Parker Moore" | downcase }}
{% endraw %}
```
@@ -18,7 +19,7 @@ Makes each character in a string lowercase. It has no effect on strings which ar
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "apple" | downcase }}
{% endraw %}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Have you read 'James & the Giant Peach'?" | escape }}
{% endraw %}
```
@@ -18,7 +19,7 @@ Escapes a string by replacing characters with escape sequences (so that the stri
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Tetsuro Takara" | escape }}
{% endraw %}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "1 < 2 & 3" | escape_once }}
{% endraw %}
```
@@ -18,7 +19,7 @@ Escapes a string without changing existing escaped entities. It doesn't change s
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "1 &lt; 2 &amp; 3" | escape_once }}
{% endraw %}
```

View File

@@ -1,28 +1,25 @@
---
title: first
description: Liquid filter that returns the first item of an array.
---
Returns the first item of an array.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array.first }}
{%- raw -%}
{{ "Ground control to Major Tom." | split: " " | first }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array.first }}
{{ "Ground control to Major Tom." | split: " " | first }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
{{ my_array.first }}
@@ -35,3 +32,13 @@ Returns the first item of an array.
{{ my_array.first }}
```
You can use `first` with dot notation when you need to use the filter inside a tag:
```liquid
{%- raw -%}
{% if my_array.first == "zebra" %}
Here comes a zebra!
{% endif %}
{% endraw %}
```

View File

@@ -1,42 +1,23 @@
---
title: floor
description: Liquid filter that returns 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.
Rounds an input down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ 1.2 | floor }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | floor }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 2.0 | floor }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 2.0 | floor }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | floor }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | floor }}
{{ 2.0 | floor }}
{{ 183.357 | floor }}
```
@@ -44,7 +25,7 @@ Here the input value is a string:
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "3.5" | floor }}
{% endraw %}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
{{ beatles | join: " and " }}

View File

@@ -1,28 +1,25 @@
---
title: last
description: Liquid filter that returns the last item of an array.
---
Returns the last item of an array.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array.last }}
{%- raw -%}
{{ "Ground control to Major Tom." | split: " " | last }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array.last }}
{{ "Ground control to Major Tom." | split: " " | last }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
{{ my_array.last }}
@@ -35,3 +32,13 @@ Returns the last item of an array.
{{ my_array.last }}
```
You can use `last` with dot notation when you need to use the filter inside a tag:
```liquid
{%- raw -%}
{% if my_array.last == "tiger" %}
There goes a tiger!
{% endif %}
{% endraw %}
```

18
_filters/lstrip.md Normal file
View File

@@ -0,0 +1,18 @@
---
title: lstrip
description: Liquid filter that removes all whitespace from the left side of a string.
---
Removes all whitespace (tabs, spaces, and newlines) from the **left** side of a string. It does not affect spaces between words.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ " So much room for activities " | lstrip }}!
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ " So much room for activities " | lstrip }}!
```

View File

@@ -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.
@@ -8,20 +9,20 @@ In this example, assume the object `site.pages` contains all the metadata for a
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign all_categories = site.pages | map: "category" %}
{% for item in all_categories %}
{{ item }}
- {{ item }}
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
business
celebrities
lifestyle
sports
technology
- business
- celebrities
- lifestyle
- sports
- technology
```

View File

@@ -1,41 +1,22 @@
---
title: minus
description: Liquid filter that subtracts one number from another number.
---
Subtracts a number from another number.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ 4 | minus: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 4 | minus: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 16 | minus: 4 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 16 | minus: 4 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | minus: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 4 | minus: 2 }}
{{ 16 | minus: 4 }}
{{ 183.357 | minus: 12 }}
```

View File

@@ -1,41 +1,22 @@
---
title: modulo
description: Liquid filter that returns the remainder of a division operation.
---
Returns the remainder of a division operation.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ 3 | modulo: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 3 | modulo: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 24 | modulo: 7 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 24 | modulo: 7 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | modulo: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 3 | modulo: 2 }}
{{ 24 | modulo: 7 }}
{{ 183.357 | modulo: 12 }}
```

View File

@@ -1,12 +1,13 @@
---
title: newline_to_br
description: Liquid filter that converts newlines in a string to HTML <br /> tags.
---
Replaces every newline (`\n`) with an HTML line break (`<br>`).
Inserts an HTML line break (`<br />`) in front of each newline (`\n`) in a string.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% capture string_with_newlines %}
Hello
there

View File

@@ -1,41 +1,22 @@
---
title: plus
description: Liquid filter that adds one number to another number.
---
Adds a number to another number.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ 4 | plus: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 4 | plus: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 16 | plus: 4 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 16 | plus: 4 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | plus: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 4 | plus: 2 }}
{{ 16 | plus: 4 }}
{{ 183.357 | plus: 12 }}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
{% endraw %}
```
@@ -16,20 +17,18 @@ Adds the specified string to the beginning of another string.
{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
```
You can also `prepend` variables:
`prepend` can also accept a variable as its argument.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% assign url = "liquidmarkup.com" %}
{%- raw -%}
{% assign url = "example.com" %}
{{ "/index.html" | prepend: url }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign url = "liquidmarkup.com" %}
{% assign url = "example.com" %}
{{ "/index.html" | prepend: url }}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "I strained to see the train through the rain" | remove: "rain" }}
{% endraw %}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "I strained to see the train through the rain" | remove_first: "rain" }}
{% endraw %}
```

View File

@@ -1,12 +1,13 @@
---
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.
Replaces every occurrence of the first argument in a string with the second argument.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
{% endraw %}
```

18
_filters/replace_first.md Normal file
View File

@@ -0,0 +1,18 @@
---
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.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Take my protein pills and put my helmet on" | replace_first: "my", "your" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Take my protein pills and put my helmet on" | replace_first: "my", "your" }}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array | reverse | join: ", " }}
@@ -20,11 +21,11 @@ Reverses the order of the items in an array. `reverse` cannot reverse a string.
{{ my_array | reverse | join: ", " }}
```
`reverse` cannot be used directly on a string, but you can split a string into an array, reverse the array, and rejoin it by chaining together filters:
Although `reverse` cannot be used directly on a string, you can split a string into an array, reverse the array, and rejoin it by chaining together filters.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
{% endraw %}
```

22
_filters/round.md Normal file
View File

@@ -0,0 +1,22 @@
---
title: round
description: Liquid filter that rounds a number to the nearest integer.
---
Rounds a number to the nearest integer or, if a number is passed as an argument, to that number of decimal places.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ 1.2 | round }}
{{ 2.7 | round }}
{{ 183.357 | round: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | round }}
{{ 2.7 | round }}
{{ 183.357 | round: 2 }}
```

18
_filters/rstrip.md Normal file
View File

@@ -0,0 +1,18 @@
---
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. It does not affect spaces between words.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ " So much room for activities " | rstrip }}!
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ " So much room for activities " | rstrip }}!
```

View File

@@ -1,12 +1,13 @@
---
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.
Returns the number of characters in a string or the number of items in an array.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Ground control to Major Tom." | size }}
{% endraw %}
```
@@ -18,10 +19,10 @@ Returns the number of characters in a string or the number of items in an array.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array | size }}
{{ my_array.size }}
{% endraw %}
```
@@ -29,13 +30,13 @@ Returns the number of characters in a string or the number of items in an array.
```text
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array | size }}
{{ my_array.size }}
```
Using dot notation:
You can use `size` with dot notation when you need to use the filter inside a tag:
```liquid
{% raw %}
{%- raw -%}
{% if site.pages.size > 10 %}
This is a big website!
{% endif %}

74
_filters/slice.md Normal file
View File

@@ -0,0 +1,74 @@
---
title: slice
description: Liquid filter that returns a substring or item from a given position in a string or array.
---
Returns a substring of one character or series of array items beginning at the index specified by the first argument. An optional second argument specifies the length of the substring or number of array items to be returned.
String or array indices are numbered starting from 0.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Liquid" | slice: 0 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: 0 }}
```
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Liquid" | slice: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: 2 }}
```
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Liquid" | slice: 2, 5 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: 2, 5 }}
```
Here the input value is an array:
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
{{ beatles | slice: 1, 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
{{ beatles | slice: 1, 2 }}
```
If the first argument is a negative number, the indices are counted from the end of the string.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Liquid" | slice: -3, 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: -3, 2 }}
```

33
_filters/sort.md Normal file
View File

@@ -0,0 +1,33 @@
---
title: sort
description: Liquid filter that sorts an array in case-sensitive order.
---
Sorts items in an array in case-sensitive order.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
{{ my_array | sort | join: ", " }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
{{ my_array | sort | join: ", " }}
```
An optional argument specifies which property of the array's items to use for sorting.
```liquid
{%- raw -%}
{% assign products_by_price = collection.products | sort: "price" %}
{% for product in products_by_price %}
<h4>{{ product.title }}</h4>
{% endfor %}
{% endraw %}
```

34
_filters/sort_natural.md Normal file
View File

@@ -0,0 +1,34 @@
---
title: sort_natural
description: Liquid filter that sorts an array in case-insensitive order.
version-badge: 4.0.0
---
Sorts items in an array in case-insensitive order.
<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
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
{{ my_array | sort_natural | join: ", " }}
```
An optional argument specifies which property of the array's items to use for sorting.
```liquid
{%- raw -%}
{% assign products_by_company = collection.products | sort_natural: "company" %}
{% for product in products_by_company %}
<h4>{{ product.title }}</h4>
{% endfor %}
{% endraw %}
```

View File

@@ -1,12 +1,13 @@
---
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.
Divides a 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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
{% for member in beatles %}

18
_filters/strip.md Normal file
View File

@@ -0,0 +1,18 @@
---
title: strip
description: Liquid filter that removes all whitespace from the left and right sides of a string.
---
Removes all whitespace (tabs, spaces, and newlines) from both the left and right sides of a string. It does not affect spaces between words.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ " So much room for activities " | strip }}!
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ " So much room for activities " | strip }}!
```

View File

@@ -1,12 +1,13 @@
---
title: strip_html
description: Liquid filter that removes HTML tags from a string.
---
Removes any HTML tags from a string.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
{% endraw %}
```

View File

@@ -1,12 +1,13 @@
---
title: strip_newlines
description: Liquid filter that removes newline characters from a string.
---
Removes any newline characters (line breaks) from a string.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% capture string_with_newlines %}
Hello
there

View File

@@ -1,41 +1,22 @@
---
title: times
description: Liquid filter that multiplies a number by another number.
---
Multiplies a number by another number.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ 3 | times: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 3 | times: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 24 | times: 7 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 24 | times: 7 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | times: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 3 | times: 2 }}
{{ 24 | times: 7 }}
{{ 183.357 | times: 12 }}
```

52
_filters/truncate.md Normal file
View File

@@ -0,0 +1,52 @@
---
title: truncate
description: Liquid filter that truncates a string to a given number of characters.
---
Shortens a string down to the number of characters passed as an argument. If the specified number of characters is less than the length of the string, an ellipsis (...) is appended to the string and is included in the character count.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Ground control to Major Tom." | truncate: 20 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncate: 20 }}
```
### Custom ellipsis
`truncate` takes an optional second argument that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.
The length of the second argument counts against the number of characters specified by the first argument. For example, if you want to truncate a string to exactly 10 characters, and use a 3-character ellipsis, use **13** for the first argument of `truncate`, since the ellipsis counts as 3 characters.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}
```
### No ellipsis
You can truncate to the exact number of characters specified by the first argument and avoid showing trailing characters by passing a blank string as the second argument.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Ground control to Major Tom." | truncate: 20, "" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncate: 20, "" }}
```

50
_filters/truncatewords.md Normal file
View File

@@ -0,0 +1,50 @@
---
title: truncatewords
description: Liquid filter that truncates a string to a given number of words.
---
Shortens a string down to the number of words passed as an argument. If the specified number of words is less than the number of words in the string, an ellipsis (...) is appended to the string.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Ground control to Major Tom." | truncatewords: 3 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncatewords: 3 }}
```
### Custom ellipsis
`truncatewords` takes an optional second argument that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
```
### No ellipsis
You can avoid showing trailing characters by passing a blank string as the second argument.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{{ "Ground control to Major Tom." | truncatewords: 3, "" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncatewords: 3, "" }}
```

View File

@@ -1,12 +1,13 @@
---
title: uniq
description: Liquid filter that removes duplicate items from an array.
---
Removes any duplicate elements in an array.
Removes any duplicate items in an array.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
{{ my_array | uniq | join: ", " }}

View File

@@ -1,12 +1,13 @@
---
title: upcase
description: Liquid filter that converts a string to uppercase.
---
Makes each character in a string uppercase. It has no effect on strings which are already all uppercase.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Parker Moore" | upcase }}
{% endraw %}
```
@@ -18,7 +19,7 @@ Makes each character in a string uppercase. It has no effect on strings which ar
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "APPLE" | upcase }}
{% endraw %}
```

19
_filters/url_decode.md Normal file
View File

@@ -0,0 +1,19 @@
---
title: url_decode
description: Liquid filter that decodes percent-encoded characters in a string.
version-badge: 4.0.0
---
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
{{ "%27Stop%21%27+said+Fred" | url_decode }}
```

View File

@@ -1,12 +1,13 @@
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "john@liquid.com" | url_encode }}
{% endraw %}
```
@@ -16,9 +17,11 @@ Converts any URL-unsafe characters in a string into percent-encoded characters.
{{ "john@liquid.com" | url_encode }}
```
Note that `url_encode` will turn a space into a `+` sign instead of a percent-encoded character.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "Tetsuro Takara" | url_encode }}
{% endraw %}
```

86
_filters/where.md Normal file
View File

@@ -0,0 +1,86 @@
---
title: where
description: Liquid filter that selects from arrays.
version-badge: 4.0.2
---
Creates an array including only the objects with a given property value, or any [truthy]({{ "/basics/truthy-and-falsy/#truthy" | prepend: site.baseurl }}) value by default.
In this example, assume you have a list of products and you want to show your kitchen products separately. Using `where`, you can create an array containing only the products that have a `"type"` of `"kitchen"`.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
All products:
{% for product in products %}
- {{ product.title }}
{% endfor %}
{% assign kitchen_products = products | where: "type", "kitchen" %}
Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
All products:
- Vacuum
- Spatula
- Television
- Garlic press
Kitchen products:
- Spatula
- Garlic press
```
Say instead you have a list of products and you only want to show those that are available to buy. You can `where` with a property name but no target value to include all products with a [truthy]({{ "/basics/truthy-and-falsy/#truthy" | prepend: site.baseurl }}) `"available"` value.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
All products:
{% for product in products %}
- {{ product.title }}
{% endfor %}
{% assign available_products = products | where: "available" %}
Available products:
{% for product in available_products %}
- {{ product.title }}
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
All products:
- Coffee mug
- Limited edition sneakers
- Boring sneakers
Available products:
- Coffee mug
- Boring sneakers
```
The `where` filter can also be used to find a single object in an array when combined with the `first` filter. For example, say you want to show off the shirt in your new fall collection.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign new_shirt = products | where: "type", "shirt" | first %}
Featured product: {{ new_shirt.title }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Featured product: Hawaiian print sweater vest
```

View File

@@ -1,8 +1,12 @@
<header class="home-banner">
<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" aria-hidden="true"><i class="icon fa fa-2x fa-github"></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>
</header>
</div>

View File

@@ -1,24 +1,24 @@
<div class="home-users-grid">
<div class="home-users-grid__item">
<a href="http://jekyllrb.com" target="_blank">
<img src="{{ '/images/jekyll-logo.png' | prepend: site.baseurl }}" alt="Jekyll logo" />
<img src="{{ '/images/jekyll-logo.png' | relative_url }}" alt="Jekyll logo" />
</a>
</div>
<div class="home-users-grid__item">
<a href="http://www.desk.com" target="_blank">
<img src="{{ '/images/salesforcedesk-logo.png' | prepend: site.baseurl }}" alt="Desk logo" />
<img src="{{ '/images/salesforcedesk-logo.png' | relative_url }}" alt="Desk logo" />
</a>
</div>
<div class="home-users-grid__item">
<a href="//www.zendesk.com" target="_blank">
<img src="{{ '/images/zendesk-logo.png' | prepend: site.baseurl }}" alt="ZenDesk logo" />
<img src="{{ '/images/zendesk-logo.png' | relative_url }}" alt="ZenDesk logo" />
</a>
</div>
<div class="home-users-grid__item">
<a href="//500px.com" target="_blank">
<img src="{{ '/images/500px-logo.png' | prepend: site.baseurl }}" alt="500px logo" />
<img src="{{ '/images/500px-logo.png' | relative_url }}" alt="500px logo" />
</a>
</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>

View File

@@ -0,0 +1 @@
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m4 6h3v-6h2v6h3l-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: 304 B

View File

@@ -0,0 +1 @@
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><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-.27s1.36.09 2 .27c1.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: 682 B

1
_includes/icons/three-bars.svg Executable file
View File

@@ -0,0 +1 @@
<svg height="16" viewBox="0 0 12 16" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 9h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm0-4h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm-10.82 6h10.81c.59 0 .59.41.59 1s0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1s0-1 .59-1z"/></svg>

After

Width:  |  Height:  |  Size: 341 B

View File

@@ -1,18 +1,33 @@
<div class="sidebar">
<div class="sidebar__logo">
<a href="{{ "/" | prepend: site.baseurl }}">Liquid</a>
</div>
<nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
<header class="sidebar__logo" role="banner">
{% if page.home %}
Liquid
{% else %}
<a href="{{ "/" | relative_url }}">Liquid</a>
{% endif %}
</header>
{% for section in sections %}
<h3 class="section__header">{{ section | capitalize }}</h3>
{%- assign sections = "basics, tags, filters" | split: ", " -%}
<ul class="section__links">
{% for item in site.pages %}{% if item.url contains section/ %}{% unless item.path contains "index" %}
<li><a href="{{ item.url | prepend: site.baseurl }}" class="section__link{% if item.url contains page.url and page.url != "/" %} section__link--is-active {% endif %}">{{ item.title }}</a></li>
{% endunless %}{% endif %}{% endfor %}
</ul>
{% endfor %}
<nav class="sidebar__nav">
<div class="sidebar__nav-interior">
{%- for section in sections -%}
<h3 class="section__header" id="{{ section }}-section">{{ section | capitalize }}</h3>
<ul class="section__links">
{%- for item in site[section] -%}
<li class="section__item">
<a href="{{ item.url | relative_url }}" class="section__link{% if item.url == page.url %} section__link--is-active{% endif %}">{{ item.title }}</a>
</li>
{%- endfor -%}
</ul>
{%- endfor -%}
</div>
{%- if sections contains page.collection -%}
<script type="text/javascript">
document.getElementById("{{ page.collection }}").scrollIntoView();
</script>
{%- endif -%}
</nav>
</div>

View File

@@ -0,0 +1 @@
<span class="version-badge" title="This feature is available since version {{ include.version }}" data-version="{{ include.version }}"></span>

View File

@@ -1,35 +1,69 @@
<!DOCTYPE html>
<html>
<html lang="en">
<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">
<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="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 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' | relative_url }}">
<link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-32x.png' | relative_url }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-64x.png' | relative_url }}" sizes="64x64">
<link rel="canonical" href="{{ page.url | replace: 'index.html','' | absolute_url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | relative_url }}" />
<meta property="og:site_name" content="{{ site.title }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ page.url | relative_url }}">
<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 | relative_url }}">
<meta name="twitter:title" content="{{ page.title | default: site.title }}">
<meta name="twitter:description" content="{{ page.description | default: site.description }}">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-49178120-52"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-49178120-52');
</script>
</head>
<body>
{% include sidebar.html %}
<div class="content__overlay"></div>
<div class="content__area">
<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>
{% if page.title -%}
<h1>{{ page.title }}
{%- if page.version-badge -%}
{%- include version-badge.html version=page.version-badge -%}
{%- endif -%}</h1>
{%- endif %}
{{ content }}
</div>
</div>
</main>
<script src="{{ '/js/script.js' | relative_url }}"></script>
</body>
<script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
</html>

View File

@@ -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);
@@ -125,6 +123,7 @@ pre {
padding: 8px 12px;
border: 1px solid $color-blue-2;
word-wrap: break-word;
white-space: pre-wrap;
> code {
border: 0;

View File

@@ -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;
}
}

View File

@@ -20,3 +20,18 @@
border-top: none;
border-radius: 0 0 3px 3px;
}
.version-badge {
padding: 4px;
margin-left: 10px;
font-size: 12px;
font-weight: 300;
background: lighten($color-blue-1, 1);
border: 1px solid $color-blue-2;
border-radius: 3px;
vertical-align: middle;
}
.version-badge:before {
content: attr(data-version);
}

View File

@@ -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%);
}
}

View File

@@ -1,4 +1,3 @@
$sidebar-width: 250px;
$logo-height: 130px;
$wrapper-width: 800px;
@@ -69,13 +68,20 @@ body {
}
.sidebar__logo {
border-bottom: 1px solid $color-blue-4;
color: $color-white;
font-size: $base-font-size * 2;
font-weight: bold;
text-align: center;
font-weight: 300;
height: $logo-height;
line-height: $logo-height;
margin-bottom: 0;
border-bottom: 1px solid $color-blue-4;
text-align: center;
// &:after {
// content: '\01F4A7'; // Water droplet emoji
// vertical-align: middle;
// }
a {
color: $color-white;
@@ -88,49 +94,40 @@ body {
}
.sidebar__nav {
padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
font-weight: bold;
max-height: 100%;
overflow-y: scroll;
li {
list-style: none;
a {
color: $color-white;
&:hover {
text-decoration: none;
}
}
}
overflow-y: auto;
}
.section {
margin: 0px;
> li {
margin-bottom: $spacing-unit / 2;
&:last-child {
margin-bottom: $spacing-unit;
}
}
.sidebar__nav-interior {
height: 100%;
// Add a bit more padding at the bottom for consistency.
padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height);
}
.section__header {
font-weight: bold;
font-size: 1em;
text-decoration: none;
color: $color-white;
margin-top: 0;
margin-bottom: $spacing-unit / 4;
.section__links + & {
margin-top: $spacing-unit;
}
}
.section__links {
margin-left: $spacing-unit / 2;
margin-bottom: $spacing-unit;
font-weight: normal;
font-size: 0.9em;
font-weight: normal;
list-style: none;
margin-left: $spacing-unit / 2;
}
.section__item {
list-style: none;
}
.section__link {
@@ -138,13 +135,26 @@ body {
margin-top: $spacing-unit/4;
opacity: 0.75;
text-decoration: none;
color: $color-white;
&:hover {
opacity: 1;
text-decoration: none;
}
&:empty {
// there is an error in the liquid logic that spits out a
// empty last-child
display: none;
}
&:visited {
color: $color-white;
}
}
.section__link--is-active {
font-weight: bold;
opacity: 1;
color: $color-white;
}

View File

@@ -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;

View File

@@ -1,32 +1,10 @@
---
title: Control flow
description: An overview of control flow and conditional tags in the Liquid template language.
redirect_from: /tags/
---
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
```
Control flow tags create conditions that decide whether blocks of Liquid code get executed.
## if
@@ -34,8 +12,8 @@ Executes a block of code only if a certain condition is `true`.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% if product.title == 'Awesome Shoes' %}
{%- raw -%}
{% if product.title == "Awesome Shoes" %}
These shoes are awesome!
{% endif %}
{% endraw %}
@@ -52,8 +30,8 @@ The opposite of `if` executes a block of code only if a certain condition is
<p class="code-label">Input</p>
```liquid
{% raw %}
{% unless product.title == 'Awesome Shoes' %}
{%- raw -%}
{% unless product.title == "Awesome Shoes" %}
These shoes are not awesome.
{% endunless %}
{% endraw %}
@@ -67,8 +45,8 @@ These shoes are not awesome.
This would be the equivalent of doing the following:
```liquid
{% raw %}
{% if product.title != 'Awesome Shoes' %}
{%- raw -%}
{% if product.title != "Awesome Shoes" %}
These shoes are not awesome.
{% endif %}
{% endraw %}
@@ -80,11 +58,11 @@ Adds more conditions within an `if` or `unless` block.
<p class="code-label">Input</p>
```liquid
{% raw %}
<!-- If customer.name = 'anonymous' -->
{% if customer.name == 'kevin' %}
{%- raw -%}
<!-- If customer.name = "anonymous" -->
{% if customer.name == "kevin" %}
Hey Kevin!
{% elsif customer.name == 'anonymous' %}
{% elsif customer.name == "anonymous" %}
Hey Anonymous!
{% else %}
Hi Stranger!
@@ -96,3 +74,29 @@ Adds more conditions within an `if` or `unless` block.
```text
Hey Anonymous!
```
## case/when
Creates a switch statement to execute a particular block of code when a variable has a specified value. `case` initializes the switch statement, and `when` statements define the various conditions.
An optional `else` statement at the end of the case provides code to execute if none of the conditions are met.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign handle = "cake" %}
{% case handle %}
{% when "cake" %}
This is a cake
{% when "cookie", "biscuit" %}
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
```

View File

@@ -1,19 +1,20 @@
---
title: Iteration
description: An overview of iteration or "loop" tags in the Liquid template language.
---
Iteration tags run blocks of code repeatedly.
Iteration tags repeatedly run blocks of code.
## for
Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](https://docs.shopify.com/themes/liquid/objects/for-loops).
Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](https://shopify.dev/docs/themes/liquid/reference/objects/for-loops).
<p class="code-label">Input</p>
```liquid
{% raw %}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
{%- raw -%}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
{% endraw %}
```
@@ -22,13 +23,33 @@ Repeatedly executes a block of code. For a full list of attributes available wit
hat shirt pants
```
### else
Specifies a fallback case for a `for` loop which will run if the loop has zero length.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% for product in collection.products %}
{{ product.title }}
{% else %}
The collection is empty.
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
The collection is empty.
```
### break
Causes the loop to stop iterating when it encounters the `break` tag.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
@@ -50,7 +71,7 @@ Causes the loop to skip the current iteration when it encounters the `continue`
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
@@ -74,11 +95,11 @@ Limits the loop to the specified number of iterations.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
{{ item }}
{% endfor %}
{% endfor %}
{% endraw %}
```
@@ -93,11 +114,11 @@ Begins the loop at the specified index.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
{{ item }}
{% endfor %}
{% endfor %}
{% endraw %}
```
@@ -106,21 +127,43 @@ Begins the loop at the specified index.
3 4 5 6
```
### range
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
To start a loop from where the last loop using the same iterator left off, pass the special word `continue`.
<p class="code-label">Input</p>
```liquid
{% for i in (3..5) %}
{{ i }}
{% endfor %}
{%- raw -%}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit: 3 %}
{{ item }}
{% endfor %}
{% for item in array limit: 3 offset: continue %}
{{ item }}
{% endfor %}
{% endraw %}
```
{% raw %}
{% assign num = 4 %}
{% for i in (1..num) %}
<p class="code-label">Output</p>
```text
1 2 3
4 5 6
```
### range
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers, and can be pulled from a variable.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% for i in (3..5) %}
{{ i }}
{% endfor %}
{% endfor %}
{% assign num = 4 %}
{% assign range = (1..num) %}
{% for i in range %}
{{ i }}
{% endfor %}
{% endraw %}
```
@@ -132,15 +175,15 @@ Defines a range of numbers to loop through. The range can be defined by both lit
### reversed
Reverses the order of the loop.
Reverses the order of the loop. Note that this flag's spelling is different from the filter `reverse`.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
{{ item }}
{% endfor %}
{% endfor %}
{% endraw %}
```
@@ -151,44 +194,62 @@ Reverses the order of the loop.
## cycle
Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time `cycle` is called, the next string that was passed as a parameter is output.
Loops through a group of strings and prints them in the order that they were passed as arguments. Each time `cycle` is called, the next string argument is printed.
`cycle` must be used within a [for](#for) loop block.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{%- raw -%}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
one
two
three
one
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
```
Uses for `cycle` include:
- applying odd/even classes to rows in a table
- applying a unique class to the last product thumbnail in a row
- applying odd/even classes to rows in a table
- applying a unique class to the last product thumbnail in a row
## cycle (parameters)
`cycle` accepts a parameter called `cycle group` in cases where you need multiple `cycle` blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.
## tablerow
Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags.
`cycle` accepts a "cycle group" parameter in cases where you need multiple `cycle` blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% cycle "first": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "first": "one", "two", "three" %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% cycle "first": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "first": "one", "two", "three" %}
```
## tablerow
Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags. For a full list of attributes available within a `tablerow` loop, see [tablerow (object)](https://shopify.dev/docs/themes/liquid/reference/objects/tablerow).
<p class="code-label">Input</p>
```liquid
{%- raw -%}
<table>
{% tablerow product in collection.products %}
{{ product.title }}
@@ -231,7 +292,7 @@ Defines how many columns the tables should have.
<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% tablerow product in collection.products cols:2 %}
{{ product.title }}
{% endtablerow %}
@@ -270,10 +331,10 @@ Defines how many columns the tables should have.
#### limit
Exits the tablerow after a specific index.
Exits the `tablerow` loop after a specific index.
```liquid
{% raw %}
{%- raw -%}
{% tablerow product in collection.products cols:2 limit:3 %}
{{ product.title }}
{% endtablerow %}
@@ -282,10 +343,10 @@ Exits the tablerow after a specific index.
### offset
Starts the tablerow after a specific index.
Starts the `tablerow` loop after a specific index.
```liquid
{% raw %}
{%- raw -%}
{% tablerow product in collection.products cols:2 offset:3 %}
{{ product.title }}
{% endtablerow %}
@@ -297,22 +358,22 @@ Starts the tablerow after a specific index.
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
```liquid
{% raw %}
{%- raw -%}
<!--variable number example-->
{% assign num = 4 %}
<table>
{% tablerow i in (1..num) %}
{% tablerow i in (1..num) %}
{{ i }}
{% endtablerow %}
{% endtablerow %}
</table>
<!--literal number example-->
<table>
{% tablerow i in (3..5) %}
{% tablerow i in (3..5) %}
{{ i }}
{% endtablerow %}
{% endtablerow %}
</table>
{% endraw %}
```

172
_tags/template.md Normal file
View File

@@ -0,0 +1,172 @@
---
title: Template
description: An overview of template tags in the Liquid template language.
redirect_from:
- /tags/comment/
- /tags/raw/
---
Template tags tell Liquid where to disable processing for comments or non-Liquid markup, and how to establish relations among template files.
## comment
Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing `comment` blocks will not be printed, and any Liquid code within will not be executed.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign verb = "turned" %}
{% comment %}
{% assign verb = "converted" %}
{% endcomment %}
Anything you put between {% comment %} and {% endcomment %} tags
is {{ verb }} into a comment.
{% endraw %}
```
<p class="code-label">Output</p>
```liquid
{% assign verb = "turned" %}
{% comment %}
{% assign verb = "converted" %}
{% endcomment %}
Anything you put between {% comment %} and {% endcomment %} tags
is {{ verb }} into a comment.
```
## raw
Temporarily disables tag processing. This is useful for generating certain content that uses conflicting syntax, such as [Mustache](https://mustache.github.io/) or [Handlebars](https://handlebarsjs.com/).
<p class="code-label">Input</p>
```liquid
{{ "%7B%25+raw+%25%7D" | url_decode }}{% raw %}
In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
{% endraw %}{{ "%7B%25+endraw+%25%7D" | url_decode }}
```
<p class="code-label">Output</p>
```text
{% raw %}
In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
{% endraw %}
```
## liquid {%- include version-badge.html version="5.0.0" %}
Encloses multiple tags within one set of delimiters, to allow writing Liquid logic more concisely.
```liquid
{%- raw -%}
{% liquid
case section.blocks.size
when 1
assign column_size = ''
when 2
assign column_size = 'one-half'
when 3
assign column_size = 'one-third'
else
assign column_size = 'one-quarter'
endcase %}
{% endraw %}
```
Because any tag blocks opened within a `liquid` tag must also be closed within the same tag, use [`echo`](#echo) to output data.
## echo {%- include version-badge.html version="5.0.0" %}
Outputs an expression in the rendered HTML. This is identical to wrapping an expression in `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`, but works inside [`liquid`](#liquid) tags and supports [filters]({{ "/basics/introduction/#filters" | prepend: site.baseurl }}).
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% liquid
for product in collection.products
echo product.title | capitalize
endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Hat Shirt Pants
```
## render {%- include version-badge.html version="5.0.0" %}
Insert the rendered content of another template within the current template.
```liquid
{%- raw -%}
{% render "template-name" %}
{% endraw %}
```
Note that you don't need to write the file's `.liquid` extension.
The code within the rendered template does **not** automatically have access to the variables assigned using [variable tags]({{ "/tags/variable/" | prepend: site.baseurl }}) within the parent template. Similarly, variables assigned within the rendered template cannot be accessed by code in any other template.
## render (parameters)
Variables assigned using [variable tags]({{ "/tags/variable/" | prepend: site.baseurl }}) can be passed to a template by listing them as parameters on the `render` tag.
```liquid
{%- raw -%}
{% assign my_variable = "apples" %}
{% render "name", my_variable: my_variable, my_other_variable: "oranges" %}
{% endraw %}
```
One or more objects can be passed to a template.
```liquid
{%- raw -%}
{% assign featured_product = all_products["product_handle"] %}
{% render "product", product: featured_product %}
{% endraw %}
```
### with
A single object can be passed to a template by using the `with` and optional `as` parameters.
```liquid
{%- raw -%}
{% assign featured_product = all_products["product_handle"] %}
{% render "product" with featured_product as product %}
{% endraw %}
```
In the example above, the `product` variable in the rendered template will hold the value of `featured_product` from the parent template.
### for
A template can be rendered once for each value of an enumerable object by using the `for` and optional `as` parameters.
```liquid
{%- raw -%}
{% assign variants = product.variants %}
{% render "product_variant" for variants as variant %}
{% endraw %}
```
In the example above, the template will be rendered once for each variant of the product, and the `variant` variable will hold a different product variant object for each iteration.
When using the `for` parameter, the [`forloop`](https://shopify.dev/docs/themes/liquid/reference/objects/for-loops) object is accessible within the rendered template.
## include
_The `include` tag is deprecated; please use [`render`](#render) instead._
Insert the rendered content of another template within the current template.
```liquid
{%- raw -%}
{% include "template-name" %}
{% endraw %}
```
The `include` tag works similarly to the [`render`](#render) tag, but it allows the code inside of the rendered template to access and overwrite the variables within its parent template. It has been deprecated because the way that it handles variables reduces performance and makes Liquid code harder to both read and maintain.
Note that when a template is rendered using the [`render`](#render) tag, the `include` tag cannot be used within the template.

145
_tags/variable.md Normal file
View File

@@ -0,0 +1,145 @@
---
title: Variable
description: An overview of tags for creating variables in the Liquid template language.
---
Variable tags create new Liquid variables.
## assign
Creates a new named variable.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign my_variable = false %}
{% if my_variable != true %}
This statement is valid.
{% endif %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
This statement is valid.
```
Wrap a value in quotations `"` to save it as a string variable.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign foo = "bar" %}
{{ foo }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign foo = "bar" %}
{{ foo }}
```
## capture
Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created using `capture` are stored as strings.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
I am being captured.
```
Using `capture`, you can create complex strings using other variables created with `assign`.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign favorite_food = "pizza" %}
{% assign age = 35 %}
{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}
{{ about_me }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
I am 35 and my favourite food is pizza.
```
## increment
Creates and outputs a new number variable with initial value `0`. On subsequent calls, it increases its value by one and outputs the new value.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}
```
Variables created using `increment` are independent from variables created using `assign` or `capture`.
In the example below, a variable named "var" is created using `assign`. The `increment` tag is then used several times on a variable with the same name. Note that the `increment` tag does not affect the value of "var" that was created using `assign`.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}
```
## decrement
Creates and outputs a new number variable with initial value `-1`. On subsequent calls, it decreases its value by one and outputs the new value.
<p class="code-label">Input</p>
```liquid
{%- raw -%}
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
```
Like [increment](#increment), variables declared using `decrement` are independent from variables created using `assign` or `capture`.

View File

@@ -1,4 +0,0 @@
---
layout: default
---

View File

@@ -1,69 +0,0 @@
---
title: Introduction
---
Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters).
## Objects
**Objects** tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ page.title }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Introduction
```
In this case, Liquid is rendering the content of an object called `page.title`, and that object contains the text `Introduction`.
## Tags
**Tags** create the logic and control flow for templates. They are denoted by curly braces and percent signs: `{% raw %}{%{% endraw %}` and `{% raw %}%}{% 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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% if user %}
Hello {{ user.name }}!
{% endif %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Hello Adam!
```
Tags can be categorized into three types:
- [Control flow]({{ "/tags/control-flow" | prepend: site.baseurl }})
- [Iteration]({{ "/tags/iteration" | prepend: site.baseurl }})
- [Variable assignments]({{ "/tags/variable" | prepend: site.baseurl }})
You can read more about each type of tag in their respective sections.
## Filters
**Filters** change the output of a Liquid object. They are using within an output and are separated by a `|`.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "/my/fancy/url" | append: ".html" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "/my/fancy/url" | append: ".html" }}
```

View File

@@ -1,127 +0,0 @@
---
title: Types
---
Liquid objects can have one of six types:
- [String](#string)
- [Number](#number)
- [Boolean](#boolean)
- [Nil](#nil)
- [Array](#array)
You can initialize Liquid variables with the [assign]({{ "/tags/variable/#assign" | prepend: site.baseurl }}) or [capture]({{ "/tags/variable/#capture" | prepend: site.baseurl }}) tags.
## String
Declare a string by wrapping a variable's value in single or double quotes:
```liquid
{% raw %}
{% assign my_string = "Hello World!" %}
{% endraw %}
```
## Number
Numbers include floats and integers:
```liquid
{% raw %}
{% assign my_int = 25 %}
{% assign my_float = 39.756 %}
{% endraw %}
```
## Boolean
Booleans are either `true` or `false`. No quotations are necessary when declaring a boolean:
```liquid
{% raw %}
{% assign foo = true %}
{% assign bar = false %}
{% endraw %}
```
## Nil
Nil is a special empty value that is returned when Liquid code has no results. It is **not** a string with the characters "nil".
Nil is [treated as false]({{ "/basics/truthy-and-falsy" | prepend: site.baseurl }}) in the conditions of `if` blocks and other Liquid tags that check the truthfulness of a statement.
In the following example, if the user does not exist (that is, `user` returns `nil`), Liquid will not print the greeting:
```liquid
{% raw %}
{% if user %}
Hello {{ user.name }}!
{% endif %}
{% endraw %}
```
Tags or outputs that return `nil` will not print anything to the page.
<p class="code-label">Input</p>
```liquid
{% raw %}
The current user is {{ user.name }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
The current user is
```
## Array
Arrays hold lists of variables of any type.
### Accessing items in arrays
To access all the items in an array, you can loop through each item in the array using an [iteration tag]({{ "/tags/iteration" | prepend: site.baseurl }}).
<p class="code-label">Input</p>
```liquid
{% raw %}
<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{% for user in site.users %}
{{ user }}
{% endfor %}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% raw %}
Tobi Laura Tetsuro Adam
{% endraw %}
```
### Accessing specific items in arrays
You can use square bracket `[` `]` notation to access a specific item in an array. Array indexing starts at zero.
<p class="code-label">Input</p>
```liquid
{% raw %}
<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Tobi
Laura
Adam
```
### Initializing arrays
You cannot initialize arrays using only Liquid.
You can, however, use the [split]({{ "/filters/split" | prepend: site.baseurl }}) filter to break a string into an array of substrings.

View File

@@ -1,31 +0,0 @@
---
title: capitalize
---
Makes the first character of a string capitalized.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "title" | capitalize }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Title
```
`capitalize` only capitalizes the first character of the string, so later words are not affected:
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "my great title" | capitalize }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
My great title
```

View File

@@ -1,43 +0,0 @@
---
title: date
---
Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](//strftime.net).
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ article.published_at | date: "%a, %b %d, %y" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
Fri, Jul 17, 15
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ article.published_at | date: "%Y" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
2015
```
`date` works on strings if they contain well-formatted dates:
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "March 14, 2016" | date: "%b %d, %y" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "March 14, 2016" | date: "%b %d, %y" }}
```

View File

@@ -1,49 +0,0 @@
---
title: default
---
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.
In this example, `product_price` is not defined, so the default value is used.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ product_price | default: 2.99 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
2.99
```
In this example, `product_price` is defined, so the default value is not used.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% assign product_price = 4.99 %}
{{ product_price | default: 2.99 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
4.99
```
In this example, `product_price` is empty, so the default value is used.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
2.99
```

View File

@@ -1,43 +0,0 @@
---
title: divided_by
---
Divides a number by the specified number.
The result is rounded down to the nearest integer (that is, the [floor]({{ "/filters/floor" | prepend: site.baseurl }})).
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 4 | divided_by: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 4 | divided_by: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 16 | divided_by: 4 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 16 | divided_by: 4 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 5 | divided_by: 3 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 5 | divided_by: 3 }}
```

View File

@@ -1,10 +0,0 @@
---
layout: default
---
{% for doc in site.collections["filters"].docs %}
<h2 id="{{ doc.title | slugify }}">{{ doc.title }}</h2>
<div class="content">
{{ doc.content }}
</div>
{% endfor %}

View File

@@ -1,17 +0,0 @@
---
title: lstrip
---
Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ " So much room for activities! " | lstrip }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ " So much room for activities! " | lstrip }}
```

View File

@@ -1,19 +0,0 @@
---
title: replace_first
---
Replaces only the first occurrence of the first argument in a string with the second argument.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% assign my_string = "Take my protein pills and put my helmet on" %}
{{ my_string | replace_first: "my", "your" }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_string = "Take my protein pills and put my helmet on" %}
{{ my_string | replace_first: "my", "your" }}
```

View File

@@ -1,41 +0,0 @@
---
title: round
---
Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 1.2 | round }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | round }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 2.7 | round }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 2.7 | round }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | round: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 183.357 | round: 2 }}
```

View File

@@ -1,17 +0,0 @@
---
title: rstrip
---
Removes all whitespace (tabs, spaces, and newlines) from the right side of a string.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ " So much room for activities! " | rstrip }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ " So much room for activities! " | rstrip }}
```

View File

@@ -1,57 +0,0 @@
---
title: slice
---
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.
String indices are numbered starting from 0.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "Liquid" | slice: 0 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: 0 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "Liquid" | slice: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "Liquid" | slice: 2, 5 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: 2, 5 }}
```
If the first parameter is a negative number, the indices are counted from the end of the string:
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "Liquid" | slice: -3, 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Liquid" | slice: -3, 2 }}
```

View File

@@ -1,21 +0,0 @@
---
title: sort
---
Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive.
<p class="code-label">Input</p>
```liquid
{% raw %}
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
{{ my_array | sort | join: ", " }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
{{ my_array | sort | join: ", " }}
```

View File

@@ -1,17 +0,0 @@
---
title: strip
---
Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ " So much room for activities! " | strip }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ " So much room for activities! " | strip }}
```

View File

@@ -1,17 +0,0 @@
---
title: truncate
---
`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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "Ground control to Major Tom." | truncate: 20 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncate: 20 }}
```

View File

@@ -1,17 +0,0 @@
---
title: truncatewords
---
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.
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ "Ground control to Major Tom." | truncatewords: 3 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ "Ground control to Major Tom." | truncatewords: 3 }}
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Some files were not shown because too many files have changed in this diff Show More