mirror of
https://github.com/kemko/liquid.git
synced 2026-01-02 00:05:42 +03:00
Compare commits
5 Commits
register-f
...
liquid-doc
| Author | SHA1 | Date | |
|---|---|---|---|
|
160812c265 | ||
|
|
f6c3b97941 | ||
|
|
7ba954535f | ||
|
|
3a2a84b7f1 | ||
|
|
6201cfd4c2 |
@@ -1,26 +0,0 @@
|
||||
# How to contribute
|
||||
|
||||
## Things we will merge
|
||||
|
||||
* Bugfixes
|
||||
* Performance improvements
|
||||
* Features which are likely to be useful to the majority of Liquid users
|
||||
|
||||
## Things we won't merge
|
||||
|
||||
* Code which introduces considerable performance degrations
|
||||
* Code which touches performance critical parts of Liquid and comes without benchmarks
|
||||
* Features which are not important for most people (we want to keep the core Liquid code small and tidy)
|
||||
* Features which can easily be implemented on top of Liquid (for example as a custom filter or custom filesystem)
|
||||
* Code which comes without tests
|
||||
* Code which breaks existing tests
|
||||
|
||||
## Workflow
|
||||
|
||||
* Fork the Liquid repository
|
||||
* Create a new branch in your fork
|
||||
* If it makes sense, add tests for your code and run a performance benchmark
|
||||
* Make sure all tests pass
|
||||
* Create a pull request
|
||||
* In the description, ping one of [@boourns](https://github.com/boourns), [@fw42](https://github.com/fw42), [@camilo](https://github.com/camilo), [@dylanahsmith](https://github.com/dylanahsmith), or [@arthurnn](https://github.com/arthurnn) and ask for a code review.
|
||||
|
||||
8
Gemfile
8
Gemfile
@@ -1,8 +0,0 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gemspec
|
||||
gem 'stackprof', platforms: :mri_21
|
||||
|
||||
group :test do
|
||||
gem 'spy', '0.4.1'
|
||||
end
|
||||
147
History.md
147
History.md
@@ -1,147 +0,0 @@
|
||||
# Liquid Version History
|
||||
|
||||
## 3.0.0 / not yet released / branch "master"
|
||||
|
||||
* ...
|
||||
* Optimize variable parsing to avoid repeated regex evaluation during template rendering #383 [Jason Hiltz-Laforge, jasonhl]
|
||||
* Optimize checking for block interrupts to reduce object allocation #380 [Jason Hiltz-Laforge, jasonhl]
|
||||
* Properly set context rethrow_errors on render! #349 [Thierry Joyal, tjoyal]
|
||||
* Fix broken rendering of variables which are equal to false, see #345 [Florian Weingarten, fw42]
|
||||
* Remove ActionView template handler [Dylan Thacker-Smith, dylanahsmith]
|
||||
* Freeze lots of string literals for new Ruby 2.1 optimization, see #297 [Florian Weingarten, fw42]
|
||||
* Allow newlines in tags and variables, see #324 [Dylan Thacker-Smith, dylanahsmith]
|
||||
* Tag#parse is called after initialize, which now takes options instead of tokens as the 3rd argument. See #321 [Dylan Thacker-Smith, dylanahsmith]
|
||||
* Raise `Liquid::ArgumentError` instead of `::ArgumentError` when filter has wrong number of arguments #309 [Bogdan Gusiev, bogdan]
|
||||
* Add a to_s default for liquid drops, see #306 [Adam Doeler, releod]
|
||||
* Add strip, lstrip, and rstrip to standard filters [Florian Weingarten, fw42]
|
||||
* Make if, for & case tags return complete and consistent nodelists, see #250 [Nick Jones, dntj]
|
||||
* Prevent arbitrary method invocation on condition objects, see #274 [Dylan Thacker-Smith, dylanahsmith]
|
||||
* Don't call to_sym when creating conditions for security reasons, see #273 [Bouke van der Bijl, bouk]
|
||||
* Fix resource counting bug with respond_to?(:length), see #263 [Florian Weingarten, fw42]
|
||||
* Allow specifying custom patterns for template filenames, see #284 [Andrei Gladkyi, agladkyi]
|
||||
* Allow drops to optimize loading a slice of elements, see #282 [Tom Burns, boourns]
|
||||
* Support for passing variables to snippets in subdirs, see #271 [Joost Hietbrink, joost]
|
||||
* Add a class cache to avoid runtime extend calls, see #249 [James Tucker, raggi]
|
||||
* Remove some legacy Ruby 1.8 compatibility code, see #276 [Florian Weingarten, fw42]
|
||||
* Add default filter to standard filters, see #267 [Derrick Reimer, djreimer]
|
||||
* Add optional strict parsing and warn parsing, see #235 [Tristan Hume, trishume]
|
||||
* Add I18n syntax error translation, see #241 [Simon Hørup Eskildsen, Sirupsen]
|
||||
* Make sort filter work on enumerable drops, see #239 [Florian Weingarten, fw42]
|
||||
* Fix clashing method names in enumerable drops, see #238 [Florian Weingarten, fw42]
|
||||
* Make map filter work on enumerable drops, see #233 [Florian Weingarten, fw42]
|
||||
* Improved whitespace stripping for blank blocks, related to #216 [Florian Weingarten, fw42]
|
||||
|
||||
## 2.6.0 / 2013-11-25 / branch "2.6-stable"
|
||||
|
||||
IMPORTANT: Liquid 2.6 is going to be the last version of Liquid which maintains explicit Ruby 1.8 compatability.
|
||||
The following releases will only be tested against Ruby 1.9 and Ruby 2.0 and are likely to break on Ruby 1.8.
|
||||
|
||||
* Bugfix for #106: fix example servlet [gnowoel]
|
||||
* Bugfix for #97: strip_html filter supports multi-line tags [Jo Liss, joliss]
|
||||
* Bugfix for #114: strip_html filter supports style tags [James Allardice, jamesallardice]
|
||||
* Bugfix for #117: 'now' support for date filter in Ruby 1.9 [Notre Dame Webgroup, ndwebgroup]
|
||||
* Bugfix for #166: truncate filter on UTF-8 strings with Ruby 1.8 [Florian Weingarten, fw42]
|
||||
* Bugfix for #204: 'raw' parsing bug [Florian Weingarten, fw42]
|
||||
* Bugfix for #150: 'for' parsing bug [Peter Schröder, phoet]
|
||||
* Bugfix for #126: Strip CRLF in strip_newline [Peter Schröder, phoet]
|
||||
* Bugfix for #174, "can't convert Fixnum into String" for "replace" [wǒ_is神仙, jsw0528]
|
||||
* Allow a Liquid::Drop to be passed into Template#render [Daniel Huckstep, darkhelmet]
|
||||
* Resource limits [Florian Weingarten, fw42]
|
||||
* Add reverse filter [Jay Strybis, unreal]
|
||||
* Add utf-8 support
|
||||
* Use array instead of Hash to keep the registered filters [Tasos Stathopoulos, astathopoulos]
|
||||
* Cache tokenized partial templates [Tom Burns, boourns]
|
||||
* Avoid warnings in Ruby 1.9.3 [Marcus Stollsteimer, stomar]
|
||||
* Better documentation for 'include' tag (closes #163) [Peter Schröder, phoet]
|
||||
* Use of BigDecimal on filters to have better precision (closes #155) [Arthur Nogueira Neves, arthurnn]
|
||||
|
||||
## 2.5.4 / 2013-11-11 / branch "2.5-stable"
|
||||
|
||||
* Fix "can't convert Fixnum into String" for "replace", see #173, [wǒ_is神仙, jsw0528]
|
||||
|
||||
## 2.5.3 / 2013-10-09
|
||||
|
||||
* #232, #234, #237: Fix map filter bugs [Florian Weingarten, fw42]
|
||||
|
||||
## 2.5.2 / 2013-09-03 / deleted
|
||||
|
||||
Yanked from rubygems, as it contained too many changes that broke compatibility. Those changes will be on following major releases.
|
||||
|
||||
## 2.5.1 / 2013-07-24
|
||||
|
||||
* #230: Fix security issue with map filter, Use invoke_drop in map filter [Florian Weingarten, fw42]
|
||||
|
||||
## 2.5.0 / 2013-03-06
|
||||
|
||||
* Prevent Object methods from being called on drops
|
||||
* Avoid symbol injection from liquid
|
||||
* Added break and continue statements
|
||||
* Fix filter parser for args without space separators
|
||||
* Add support for filter keyword arguments
|
||||
|
||||
|
||||
## 2.4.0 / 2012-08-03
|
||||
|
||||
* Performance improvements
|
||||
* Allow filters in `assign`
|
||||
* Add `modulo` filter
|
||||
* Ruby 1.8, 1.9, and Rubinius compatibility fixes
|
||||
* Add support for `quoted['references']` in `tablerow`
|
||||
* Add support for Enumerable to `tablerow`
|
||||
* `strip_html` filter removes html comments
|
||||
|
||||
|
||||
## 2.3.0 / 2011-10-16
|
||||
|
||||
* Several speed/memory improvements
|
||||
* Numerous bug fixes
|
||||
* Added support for MRI 1.9, Rubinius, and JRuby
|
||||
* Added support for integer drop parameters
|
||||
* Added epoch support to `date` filter
|
||||
* New `raw` tag that suppresses parsing
|
||||
* Added `else` option to `for` tag
|
||||
* New `increment` tag
|
||||
* New `split` filter
|
||||
|
||||
|
||||
## 2.2.1 / 2010-08-23
|
||||
|
||||
* Added support for literal tags
|
||||
|
||||
|
||||
## 2.2.0 / 2010-08-22
|
||||
|
||||
* Compatible with Ruby 1.8.7, 1.9.1 and 1.9.2-p0
|
||||
* Merged some changed made by the community
|
||||
|
||||
|
||||
## 1.9.0 / 2008-03-04
|
||||
|
||||
* Fixed gem install rake task
|
||||
* Improve Error encapsulation in liquid by maintaining a own set of exceptions instead of relying on ruby build ins
|
||||
|
||||
|
||||
## Before 1.9.0
|
||||
|
||||
* Added If with or / and expressions
|
||||
* Implemented .to_liquid for all objects which can be passed to liquid like Strings Arrays Hashes Numerics and Booleans. To export new objects to liquid just implement .to_liquid on them and return objects which themselves have .to_liquid methods.
|
||||
* Added more tags to standard library
|
||||
* Added include tag ( like partials in rails )
|
||||
* [...] Gazillion of detail improvements
|
||||
* Added strainers as filter hosts for better security [Tobias Luetke]
|
||||
* Fixed that rails integration would call filter with the wrong "self" [Michael Geary]
|
||||
* Fixed bad error reporting when a filter called a method which doesn't exist. Liquid told you that it couldn't find the filter which was obviously misleading [Tobias Luetke]
|
||||
* Removed count helper from standard lib. use size [Tobias Luetke]
|
||||
* Fixed bug with string filter parameters failing to tolerate commas in strings. [Paul Hammond]
|
||||
* Improved filter parameters. Filter parameters are now context sensitive; Types are resolved according to the rules of the context. Multiple parameters are now separated by the Liquid::ArgumentSeparator: , by default [Paul Hammond]
|
||||
{{ 'Typo' | link_to: 'http://typo.leetsoft.com', 'Typo - a modern weblog engine' }}
|
||||
* Added Liquid::Drop. A base class which you can use for exporting proxy objects to liquid which can acquire more data when used in liquid. [Tobias Luetke]
|
||||
|
||||
class ProductDrop < Liquid::Drop
|
||||
def top_sales
|
||||
Shop.current.products.find(:all, :order => 'sales', :limit => 10 )
|
||||
end
|
||||
end
|
||||
t = Liquid::Template.parse( ' {% for product in product.top_sales %} {{ product.name }} {% endfor %} ' )
|
||||
t.render('product' => ProductDrop.new )
|
||||
* Added filter parameters support. Example: {{ date | format_date: "%Y" }} [Paul Hammond]
|
||||
20
MIT-LICENSE
20
MIT-LICENSE
@@ -1,20 +0,0 @@
|
||||
Copyright (c) 2005, 2006 Tobias Luetke
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
76
README.md
76
README.md
@@ -1,75 +1,3 @@
|
||||
[](http://travis-ci.org/Shopify/liquid)
|
||||
[](http://inch-ci.org/github/Shopify/liquid)
|
||||
#### Liquid Docs
|
||||
|
||||
# Liquid template engine
|
||||
|
||||
* [Contributing guidelines](CONTRIBUTING.md)
|
||||
* [Version history](History.md)
|
||||
* [Liquid documentation from Shopify](http://docs.shopify.com/themes/liquid-basics)
|
||||
* [Liquid Wiki at GitHub](https://github.com/Shopify/liquid/wiki)
|
||||
* [Website](http://liquidmarkup.org/)
|
||||
|
||||
## Introduction
|
||||
|
||||
Liquid is a template engine which was written with very specific requirements:
|
||||
|
||||
* It has to have beautiful and simple markup. Template engines which don't produce good looking markup are no fun to use.
|
||||
* It needs to be non evaling and secure. Liquid templates are made so that users can edit them. You don't want to run code on your server which your users wrote.
|
||||
* It has to be stateless. Compile and render steps have to be separate so that the expensive parsing and compiling can be done once and later on you can just render it passing in a hash with local variables and objects.
|
||||
|
||||
## Why you should use Liquid
|
||||
|
||||
* You want to allow your users to edit the appearance of your application but don't want them to run **insecure code on your server**.
|
||||
* You want to render templates directly from the database.
|
||||
* You like smarty (PHP) style template engines.
|
||||
* You need a template engine which does HTML just as well as emails.
|
||||
* You don't like the markup of your current templating engine.
|
||||
|
||||
## What does it look like?
|
||||
|
||||
```html
|
||||
<ul id="products">
|
||||
{% for product in products %}
|
||||
<li>
|
||||
<h2>{{ product.name }}</h2>
|
||||
Only {{ product.price | price }}
|
||||
|
||||
{{ product.description | prettyprint | paragraph }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
```
|
||||
|
||||
## How to use Liquid
|
||||
|
||||
Liquid supports a very simple API based around the Liquid::Template class.
|
||||
For standard use you can just pass it the content of a file and call render with a parameters hash.
|
||||
|
||||
```ruby
|
||||
@template = Liquid::Template.parse("hi {{name}}") # Parses and compiles the template
|
||||
@template.render('name' => 'tobi') # => "hi tobi"
|
||||
```
|
||||
|
||||
### Error Modes
|
||||
|
||||
Setting the error mode of Liquid lets you specify how strictly you want your templates to be interpreted.
|
||||
Normally the parser is very lax and will accept almost anything without error. Unfortunately this can make
|
||||
it very hard to debug and can lead to unexpected behaviour.
|
||||
|
||||
Liquid also comes with a stricter parser that can be used when editing templates to give better error messages
|
||||
when templates are invalid. You can enable this new parser like this:
|
||||
|
||||
```ruby
|
||||
Liquid::Template.error_mode = :strict # Raises a SyntaxError when invalid syntax is used
|
||||
Liquid::Template.error_mode = :warn # Adds errors to template.errors but continues as normal
|
||||
Liquid::Template.error_mode = :lax # The default mode, accepts almost anything.
|
||||
```
|
||||
|
||||
If you want to set the error mode only on specific templates you can pass `:error_mode` as an option to `parse`:
|
||||
```ruby
|
||||
Liquid::Template.parse(source, :error_mode => :strict)
|
||||
```
|
||||
This is useful for doing things like enabling strict mode only in the theme editor.
|
||||
|
||||
It is recommended that you enable `:strict` or `:warn` mode on new apps to stop invalid templates from being created.
|
||||
It is also recommended that you use it in the template editors of existing apps to give editors better error messages.
|
||||
Home of the Liquid Docs
|
||||
77
Rakefile
77
Rakefile
@@ -1,77 +0,0 @@
|
||||
require 'rake'
|
||||
require 'rake/testtask'
|
||||
$LOAD_PATH.unshift File.expand_path("../lib", __FILE__)
|
||||
require "liquid/version"
|
||||
|
||||
task :default => 'test'
|
||||
|
||||
desc 'run test suite with default parser'
|
||||
Rake::TestTask.new(:base_test) do |t|
|
||||
t.libs << '.' << 'lib' << 'test'
|
||||
t.test_files = FileList['test/{integration,unit}/**/*_test.rb']
|
||||
t.verbose = false
|
||||
end
|
||||
|
||||
desc 'run test suite with warn error mode'
|
||||
task :warn_test do
|
||||
ENV['LIQUID_PARSER_MODE'] = 'warn'
|
||||
Rake::Task['base_test'].invoke
|
||||
end
|
||||
|
||||
desc 'runs test suite with both strict and lax parsers'
|
||||
task :test do
|
||||
ENV['LIQUID_PARSER_MODE'] = 'lax'
|
||||
Rake::Task['base_test'].invoke
|
||||
ENV['LIQUID_PARSER_MODE'] = 'strict'
|
||||
Rake::Task['base_test'].reenable
|
||||
Rake::Task['base_test'].invoke
|
||||
end
|
||||
|
||||
task :gem => :build
|
||||
task :build do
|
||||
system "gem build liquid.gemspec"
|
||||
end
|
||||
|
||||
task :install => :build do
|
||||
system "gem install liquid-#{Liquid::VERSION}.gem"
|
||||
end
|
||||
|
||||
task :release => :build do
|
||||
system "git tag -a v#{Liquid::VERSION} -m 'Tagging #{Liquid::VERSION}'"
|
||||
system "git push --tags"
|
||||
system "gem push liquid-#{Liquid::VERSION}.gem"
|
||||
system "rm liquid-#{Liquid::VERSION}.gem"
|
||||
end
|
||||
|
||||
namespace :benchmark do
|
||||
|
||||
desc "Run the liquid benchmark with lax parsing"
|
||||
task :run do
|
||||
ruby "./performance/benchmark.rb lax"
|
||||
end
|
||||
|
||||
desc "Run the liquid benchmark with strict parsing"
|
||||
task :strict do
|
||||
ruby "./performance/benchmark.rb strict"
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
namespace :profile do
|
||||
|
||||
desc "Run the liquid profile/performance coverage"
|
||||
task :run do
|
||||
ruby "./performance/profile.rb"
|
||||
end
|
||||
|
||||
desc "Run the liquid profile/performance coverage with strict parsing"
|
||||
task :strict do
|
||||
ruby "./performance/profile.rb strict"
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
desc "Run example"
|
||||
task :example do
|
||||
ruby "-w -d -Ilib example/server/server.rb"
|
||||
end
|
||||
12
_config.yml
Normal file
12
_config.yml
Normal file
@@ -0,0 +1,12 @@
|
||||
# Site settings
|
||||
title: Your awesome title
|
||||
email: your-email@domain.com
|
||||
description: "Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description."
|
||||
baseurl: ""
|
||||
url: "http://yourdomain.com"
|
||||
twitter_username: jekyllrb
|
||||
github_username: jekyll
|
||||
|
||||
# Build settings
|
||||
markdown: kramdown
|
||||
permalink: pretty
|
||||
61
_includes/footer.html
Normal file
61
_includes/footer.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<footer class="site-footer">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<h2 class="footer-heading">{{ site.title }}</h2>
|
||||
|
||||
<div class="footer-col-1 column">
|
||||
<ul>
|
||||
<li>{{ site.title }}</li>
|
||||
<li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-2 column">
|
||||
<ul>
|
||||
{% if site.github_username %}<li>
|
||||
<a href="https://github.com/{{ site.github_username }}">
|
||||
<span class="icon github">
|
||||
<svg version="1.1" class="github-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C2C2C2" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761
|
||||
c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32
|
||||
c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472
|
||||
c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037
|
||||
C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65
|
||||
c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261
|
||||
c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082
|
||||
c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129
|
||||
c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">{{ site.github_username }}</span>
|
||||
</a>
|
||||
</li>{% endif %}
|
||||
{% if site.twitter_username %}<li>
|
||||
<a href="https://twitter.com/{{ site.twitter_username }}">
|
||||
<span class="icon twitter">
|
||||
<svg version="1.1" class="twitter-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill="#C2C2C2" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27
|
||||
c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767
|
||||
c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206
|
||||
C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271
|
||||
c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469
|
||||
c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">{{ site.twitter_username }}</span>
|
||||
</a>
|
||||
</li>{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-3 column">
|
||||
<p class="text">{{ site.description }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
12
_includes/head.html
Normal file
12
_includes/head.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ "/css/stylesheets/main.css" | prepend: site.baseurl }}">
|
||||
|
||||
</head>
|
||||
28
_includes/header.html
Normal file
28
_includes/header.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<header class="site-header">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
|
||||
|
||||
<nav class="site-nav">
|
||||
<a href="#" class="menu-icon">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 18 15" enable-background="new 0 0 18 15" xml:space="preserve">
|
||||
<path fill="#505050" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0
|
||||
h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
||||
<path fill="#505050" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484
|
||||
h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
||||
<path fill="#505050" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0
|
||||
c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="trigger">
|
||||
{% for page in site.pages %}
|
||||
{% if page.title %}<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
19
_layouts/default.html
Normal file
19
_layouts/default.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
<div class="page-content">
|
||||
<div class="wrap">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
14
_layouts/page.html
Normal file
14
_layouts/page.html
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
{{ content }}
|
||||
</article>
|
||||
|
||||
</div>
|
||||
15
_layouts/post.html
Normal file
15
_layouts/post.html
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p class="meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
{{ content }}
|
||||
</article>
|
||||
|
||||
</div>
|
||||
24
_posts/2014-07-23-welcome-to-jekyll.markdown
Normal file
24
_posts/2014-07-23-welcome-to-jekyll.markdown
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Welcome to Jekyll!"
|
||||
date: 2014-07-23 10:55:39
|
||||
categories: jekyll update
|
||||
---
|
||||
|
||||
You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
|
||||
To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
|
||||
|
||||
Jekyll also offers powerful support for code snippets:
|
||||
|
||||
{% highlight ruby %}
|
||||
def print_hi(name)
|
||||
puts "Hi, #{name}"
|
||||
end
|
||||
print_hi('Tom')
|
||||
#=> prints 'Hi, Tom' to STDOUT.
|
||||
{% endhighlight %}
|
||||
|
||||
Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].
|
||||
|
||||
[jekyll-gh]: https://github.com/jekyll/jekyll
|
||||
[jekyll]: http://jekyllrb.com
|
||||
101
_posts/basics/handle.md
Normal file
101
_posts/basics/handle.md
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
layout: default
|
||||
title: Handles
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
weight: 2
|
||||
---
|
||||
|
||||
# Handles
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "What is a handle?", "what-is-a-handle" %}
|
||||
|
||||
The handle is used to access the attributes of a Liquid object. By default, it is the object's title in lowercase with any spaces and special characters replaced by hyphens (-). Every object in Liquid (product, collection, blog, link list) has a handle.
|
||||
|
||||
For example, a page with the title "About Us" can be accessed in Liquid via its handle <tt>about-us</tt> as shown below:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- the content of the About Us page -->
|
||||
{{ pages.about-us.content }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% anchor_link "How are my handles created?", "handles-created" %}
|
||||
|
||||
A product with the title "Shirt" will automatically be given the handle **shirt**. If there is already a product with the handle "Shirt", the handle will auto-increment. In other words, all "Shirt" products created after the first one will receive the handle **shirt-1**, **shirt-2**, and so on.
|
||||
|
||||
{{ '/themes/handle-2.jpg' | image }}
|
||||
|
||||
Whitespaces in a title are replaced by hyphens in the handle. For example, the title "*My Shiny New Title*" will result in a handle called **my-shiny-new-title**.
|
||||
|
||||
{{ '/themes/handle-3.jpg' | image }}
|
||||
|
||||
The handle will also determine the URL of that object. For example, a page with the handle "about-us" would have the url: [http://yourshop.myshopify.com/pages/about-us](http://yourshop.myshopify.com/pages/about-us)
|
||||
|
||||
Shop designs often rely on a static handle for a page, product, or linklist. In order to preserve design elements and avoid broken links, if you modify the title of an object, **Shopify will not automatically update the handle.**
|
||||
|
||||
For example, if you were to change your page title from "About Us" to "About Shopify" ...
|
||||
|
||||
{{ '/themes/handle-4.jpg' | image }}
|
||||
|
||||
... your handle will still be **about-us**.
|
||||
|
||||
{{ '/themes/handle-5.jpg' | image }}
|
||||
|
||||
However, you can change an object's handle manually by changing the value for the "URL & Handle" text box.
|
||||
|
||||
{{ '/themes/handle-6.jpg' | image }}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Accessing attributes via the handle", "attributes-handle" %}
|
||||
|
||||
In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ pages.about-us.title }}
|
||||
{{ pages["about-us"].title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
About Us
|
||||
About Us
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
In the example above, notice that we are using <code>pages</code> as opposed to <code>page</code>.
|
||||
|
||||
You can also pass in Theme Settings objects using this notation. This is handy for theme designers who wish to give the users of their themes the ability to select which content to display in their theme.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections[settings.home_featured_collection].products %}
|
||||
{{ product.title }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Awesome Shoes
|
||||
Cool T-Shirt
|
||||
Wicked Socks
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
74
_posts/basics/index.md
Normal file
74
_posts/basics/index.md
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
layout: default
|
||||
title: Basics
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 1
|
||||
---
|
||||
|
||||
|
||||
# Introduction
|
||||
|
||||
Liquid is an open-source, Ruby-based template language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/tZLTExLukSg" frameborder="0" allowfullscreen style="margin: 0 auto 24px auto; width: 70%; display: block; padding: 20px 15%; background: #f9f9f9;"></iframe>
|
||||
|
||||
Liquid uses a combination of _tags_, _objects_, and _filters_ to load dynamic content. They are used inside Liquid _template files_, which are a group of files that make up a theme. For more information on the available templates, please see <a href="/themes/theme-development/templates/">Theme Development</a>.
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
{% anchor_link "Tags", "tags" %}
|
||||
|
||||
Tags make up the programming logic that tells templates what to do.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if user.name == 'elvis' %}
|
||||
Hey Elvis
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="tr">
|
||||
<a class="themes-article-cta" href="/themes/liquid-documentation/tags">Read more ›</a>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Objects", "objects" %}
|
||||
|
||||
Objects contain attributes that are used to display dynamic content on the page.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.title }} <!-- Output: Awesome T-Shirt-->
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
<p class="tr">
|
||||
<a class="themes-article-cta" href="/themes/liquid-documentation/objects">Read more ›</a>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Filters", "filters" %}
|
||||
|
||||
Filters are used to modify the output of strings, numbers, variables, and objects.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'sales' | append: '.jpg' }} <!-- Output: sales.jpg -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
<p class="tr">
|
||||
<a class="themes-article-cta" href="/themes/liquid-documentation/filters">Read more ›</a>
|
||||
</p>
|
||||
134
_posts/basics/operators.md
Normal file
134
_posts/basics/operators.md
Normal file
@@ -0,0 +1,134 @@
|
||||
---
|
||||
layout: default
|
||||
title: Operators
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
weight: 3
|
||||
---
|
||||
|
||||
# Operators
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
Liquid has access to all of the logical and comparison operators. These can be used in tags such as <a href="/themes/liquid-documentation/tags/control-flow-tags/#if">if</a> and <a href="/themes/liquid-documentation/tags/control-flow-tags/#unless">unless</a>.
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Basic Operators", "basic-operators" %}
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><pre>==</pre></td>
|
||||
<td>equals</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>!=</pre></td>
|
||||
<td>does not equal</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>></pre></td>
|
||||
<td>greater than</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre><</pre></td>
|
||||
<td>less than</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>>=</pre></td>
|
||||
<td>greater than or equal to</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre><=</pre></td>
|
||||
<td>less than or equal to</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>or</pre></td>
|
||||
<td>condition A <strong>or</strong> condition B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>and</pre></td>
|
||||
<td>condition A <strong>and</strong> condition B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
**Examples:**
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.title == "Awesome Shoes" %}
|
||||
These shoes are awesome!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Operators can be chained together.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.type == "Shirt" or product.type == "Shoes" %}
|
||||
This is a shirt or a shoe.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "The 'contains' Operator", "contains" %}
|
||||
|
||||
<code>contains</code> checks for the presence of a substring inside a string.
|
||||
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.title contains 'Pack' %}
|
||||
This product's title contains the word Pack.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
<code>contains</code> can also check for the presence of a string in an array of strings.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.tags contains 'Hello' %}
|
||||
This product has been tagged with 'Hello'.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
You **cannot** check for the presence of an object in an array of objects using contains. This will not work:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.collections contains 'Sale' %}
|
||||
One of the collections this product belongs to is the Sale collection.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
This will work:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign in_sale_collection = false %}
|
||||
{% for collection in product.collections %}
|
||||
{% if in_sale_collection == false and collection.title == 'Sale' %}
|
||||
{% assign in_sale_collection = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if in_sale_collection %}
|
||||
One of the collections this product belongs to is the Sale collection.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
125
_posts/basics/true-and-false.md
Normal file
125
_posts/basics/true-and-false.md
Normal file
@@ -0,0 +1,125 @@
|
||||
---
|
||||
layout: default
|
||||
title: Truthy and Falsy
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
weight: 6
|
||||
---
|
||||
|
||||
# Truthy and Falsy in Liquid
|
||||
|
||||
|
||||
|
||||
In programming, we describe “truthy” and “falsy” as anything that returns true or false, respectively, when used inside an if statement.
|
||||
|
||||
## What is truthy?
|
||||
|
||||
All values in Liquid are truthy, with the exception of <tt>nil</tt> and <tt>false</tt>.
|
||||
|
||||
In the example below, the text “Tobi” is not a boolean, but it is truthy in a conditional:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign tobi = 'Tobi' %}
|
||||
{% if tobi %}
|
||||
This will always be true.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
[Strings](/themes/liquid-documentation/basics/types/#strings), even when empty, are truthy. The example below will result in empty HTML tags if <code>settings.fp_heading</code> is empty:
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if settings.fp_heading %}
|
||||
<h1>{{ settings.fp_heading }}</h1>
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
<p class="output">Output</p>
|
||||
{% highlight html %}{% raw %}
|
||||
<h1></h1>
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
To avoid this, you can check to see if the string is <code>blank</code>, as follows:
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% unless settings.fp_heading == blank %}
|
||||
<h1>{{ settings.fp_heading }}</h1>
|
||||
{% endunless %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
An [EmptyDrop](/themes/liquid-documentation/basics/types/#empty-drop) is also truthy. In the example below, if <code>settings.page</code> is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an undesirable empty <div>:
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if pages[settings.page] %}
|
||||
<div>{{ pages[settings.page].content }}</div>
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
<p class="output">Output</p>
|
||||
{% highlight html %}{% raw %}
|
||||
<div></div>
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
## What is falsy?
|
||||
|
||||
The only values that are falsy in Liquid are <tt>nil</tt> and <tt>false</tt>.
|
||||
|
||||
[nil](/themes/liquid-documentation/basics/types/#nil) is returned when a Liquid object doesn't have anything to return. For example, if a collection doesn't have a collection image, collection.image will be set to <tt>nil</tt>. Since that is “falsy”, you can do this:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if collection.image %}
|
||||
<!-- output collection image -->
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
The value <tt>false</tt> is returned through many Liquid object properties such as <tt>product.available</tt>.
|
||||
|
||||
## Summary
|
||||
|
||||
The table below summarizes what is truthy or falsy in Liquid.
|
||||
|
||||
| | truthy | falsy |
|
||||
| ------------- |:-------------:|:-------------:|
|
||||
| true | × | |
|
||||
| false | | × |
|
||||
| nil | | × |
|
||||
| string | × | |
|
||||
| empty string | × | |
|
||||
| 0 | × | |
|
||||
| 1 or 2 or 3.14 | × | |
|
||||
| array | × | |
|
||||
| empty array | × | |
|
||||
| collection | × | |
|
||||
| collection with no products | × | |
|
||||
| page | × | |
|
||||
| EmptyDrop | × | |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
227
_posts/basics/types.md
Normal file
227
_posts/basics/types.md
Normal file
@@ -0,0 +1,227 @@
|
||||
---
|
||||
layout: default
|
||||
title: Types
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
weight: 4
|
||||
---
|
||||
|
||||
# Types
|
||||
|
||||
Liquid objects can return one of six types: String, Number, Boolean, Nil, Array, or EmptyDrop. Liquid variables can be initialized by using the <a href="/themes/liquid-documentation/tags/variable-tags/#assign">assign</a> or <a href="/themes/liquid-documentation/tags/variable-tags/#capture">capture</a> tags.
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "Strings", "strings" %}
|
||||
|
||||
Strings are declared by wrapping the variable's value in single or double quotes. The <a href="/themes/liquid-documentation/filters/string-filters/#to_number">to_number</a> filter can be used to convert a string into a number.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign my_string = "Hello World!" %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Numbers", "numbers" %}
|
||||
|
||||
Numbers include floats and integers.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign my_num = 25 %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Booleans", "booleans" %}
|
||||
|
||||
Booleans are either true or false. No quotations are necessary when declaring a boolean.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign foo = true %}
|
||||
{% assign bar = false %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Nil", "nil" %}
|
||||
|
||||
Nil is an 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 in the conditions of {% if %} blocks and other Liquid tags that check for the truthfulness of a statement. The example below shows a situation where a fulfillment does not yet have a tracking number entered. The if statement would not render the included text within it.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if fulfillment.tracking_numbers %}
|
||||
We have a tracking number!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
Any tags or outputs that return nil will not show anything on the screen.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
Tracking number: {{ fulfillment.tracking_numbers }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Tracking number:
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Arrays", "arrays" %}
|
||||
|
||||
Arrays hold a list of variables of all types.
|
||||
|
||||
#### Accessing all items in an array
|
||||
|
||||
To access items in an array, you can loop through each item in the array using a <a href="/themes/liquid-documentation/tags/#for">for</a> tag or a <a href="/themes/liquid-documentation/tags/#tablerow">tablerow</a> tag.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if product.tags = "sale", "summer", "spring", "wholesale" -->
|
||||
{% for tag in product.tags %}
|
||||
{{ tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
sale summer spring wholesale
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
#### Accessing a specific item in an array
|
||||
|
||||
You can use square brackets ( [ ] ) notation to access a specific item in an array. Array indexing starts at zero.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if product.tags = "sale", "summer", "spring", "wholesale" -->
|
||||
{{ product.tags[0] }}
|
||||
{{ product.tags[1] }}
|
||||
{{ product.tags[2] }}
|
||||
{{ product.tags[3] }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
sale
|
||||
summer
|
||||
spring
|
||||
wholesale
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
#### Initializing an array
|
||||
|
||||
It is not possible to initialize an array in Liquid. For example, in Javascript you could do something like this:
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<script>
|
||||
var cars = ["Saab", "Volvo", "BMW"];
|
||||
</script>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
In Liquid, you must instead use the <code>split</code> filter to break a single string into an array of substrings. See <a href="/themes/liquid-documentation/filters/string-filters/#split">here</a> for examples.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "EmptyDrop", "empty-drop" %}
|
||||
|
||||
An EmptyDrop object is returned whenever you try to access a non-existent object (for example, a collection, page or blog that was deleted or hidden) by [handle](/themes/liquid-documentation/basics/handle). In the example below, <code>page_1</code>, <code>page_2</code> and <code>page_3</code> are all EmptyDrop objects.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign variable = "hello" %}
|
||||
{% assign page_1 = pages[variable] %}
|
||||
{% assign page_2 = pages["i-do-not-exist-in-your-store"] %}
|
||||
{% assign page_3 = pages.this-handle-does-not-belong-to-any-page %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
EmptyDrop objects only have one attribute, <code>empty?</code>, which is always true.
|
||||
|
||||
Collections and pages that _do_ exist do not have an <code>empty?</code> attribute. Their <code>empty?</code> is “falsy”, which means that calling it inside an if statement will return <tt>false</tt>. When using an unless statement on existing collections and pages, <code>empty?</code> will return <tt>true</tt>.
|
||||
|
||||
#### Applications in themes
|
||||
|
||||
Using the <code>empty?</code> attribute, you can check to see if a page exists or not _before_ accessing any of its other attributes.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% unless pages.frontpage.empty? %}
|
||||
<!-- We have a page with handle 'frontpage' and it's not hidden.-->
|
||||
<h1>{{ pages.frontpage.title }}</h1>
|
||||
<div>{{ pages.frontpage.content }}</div>
|
||||
{% endunless %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
It is important to see if a page exists or not first to avoid outputting empty HTML elements to the page, as follows:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
<h1></h1>
|
||||
<div></div>
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
You can perform the same verification with collections as well:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% unless collections.frontpage.empty? %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{% include 'product-grid-item' %}
|
||||
{% else %}
|
||||
<p>We do have a 'frontpage' collection but it's empty.</p>
|
||||
{% endfor %}
|
||||
{% endunless %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
598
_posts/filters/additional-filters.md
Normal file
598
_posts/filters/additional-filters.md
Normal file
@@ -0,0 +1,598 @@
|
||||
---
|
||||
layout: default
|
||||
title: Additional Filters
|
||||
nav:
|
||||
group: Filters
|
||||
weight: 10
|
||||
---
|
||||
|
||||
# Additional Filters
|
||||
|
||||
General filters serve many different purposes including formatting, converting, and applying CSS classes.
|
||||
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "date", "date" %}
|
||||
|
||||
<p>Converts a timestamp into another date format.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%a, %b %d, %y" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Tue, Apr 22, 14
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p>The date parameters are listed below:</p>
|
||||
|
||||
<table class="filter-date-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><pre>%a</pre></td>
|
||||
<td><p>Abbreviated weekday.</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%a" }}
|
||||
<!-- Sat -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%A</pre></td>
|
||||
<td><p>Full weekday name.</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%A" }}
|
||||
<!-- Tuesday -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%b</pre></td>
|
||||
<td><p>Abbreviated month name.</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%b" }}
|
||||
<!-- Jan -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%B</pre></td>
|
||||
<td><p>Full month name</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%B" }}
|
||||
<!-- January -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%c</pre></td>
|
||||
<td><p>Preferred local date and time representation</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%c" }}
|
||||
<!-- Tue Apr 22 11:16:09 2014 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%d</pre></td>
|
||||
<td><p>Day of the month, zero-padded (01, 02, 03, etc.).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%d" }}
|
||||
<!-- 04 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%-d</pre></td>
|
||||
<td><p>Day of the month, not zero-padded (1,2,3, etc.).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%-d" }}
|
||||
<!-- 4 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%D</pre></td>
|
||||
<td><p>Formats the date (dd/mm/yy).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%D" }}
|
||||
<!-- 04/22/14 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%e</pre></td>
|
||||
<td>
|
||||
<p>Day of the month, blank-padded ( 1, 2, 3, etc.).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%e" }}
|
||||
<!-- 3 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><pre>%F</pre></td>
|
||||
<td>
|
||||
<p>Returns the date in ISO 8601 format (yyyy-mm-dd).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%F" }}
|
||||
<!-- 2014-04-22 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td><pre>%H</pre></td>
|
||||
<td><p>Hour of the day, 24-hour clock (00 - 23).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%H" }}
|
||||
<!-- 15 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%I</pre></td>
|
||||
<td><p>Hour of the day, 12-hour clock (1 - 12).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%I" }}
|
||||
<!-- 7 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%j</pre></td>
|
||||
<td><p>Day of the year (001 - 366).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%j" }}
|
||||
<!-- 245 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%k</pre></td>
|
||||
<td><p>Hour of the day, 24-hour clock (1 - 24).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%k" }}
|
||||
<!-- 14 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%m</pre></td>
|
||||
<td><p>Month of the year (01 - 12).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%m" }}
|
||||
<!-- 04 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%M</pre></td>
|
||||
<td><p>Minute of the hour (00 - 59).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%M" }}
|
||||
<!--53-->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%p</pre></td>
|
||||
<td><p>Meridian indicator (AM/PM).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%p" }}
|
||||
<!-- PM -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><pre>%r</pre></td>
|
||||
<td><p>12-hour time (%I:%M:%S %p)</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%r" }}
|
||||
<!-- 03:20:07 PM -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td><pre>%r</pre></td>
|
||||
<td><p>12-hour time (%I:%M:%S %p)</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%r" }}
|
||||
<!-- 03:20:07 PM -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td><pre>%R</pre></td>
|
||||
<td><p>24-hour time (%H:%M)</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%R" }}
|
||||
<!-- 15:21 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><pre>%T</pre></td>
|
||||
<td><p>24-hour time (%H:%M:%S)</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%T" }}
|
||||
<!-- 15:22:13 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><pre>%U</pre></td>
|
||||
<td>The number of the week in the current year, starting with the first Sunday as the first day of the first week.
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%U" }}
|
||||
<!-- 16 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%W</pre></td>
|
||||
<td><p>The number of the week in the current year, starting with the first Monday as the first day of the first week.</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%W" }}
|
||||
<!-- 16 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%w</pre></td>
|
||||
<td><p>Day of the week (0 - 6, with Sunday being 0).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%w" }}
|
||||
<!-- 2 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%x</pre></td>
|
||||
<td><p>Preferred representation for the date alone, no time. (mm/dd/yy).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%x" }}
|
||||
<!-- 04/22/14 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%X</pre></td>
|
||||
<td><p>Preferred representation for the time. (hh:mm:ss). </p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%X" }}
|
||||
<!-- 13:17:24 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%y</pre></td>
|
||||
<td><p>Year without a century (00.99).</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%y" }}
|
||||
<!-- 14 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%Y</pre></td>
|
||||
<td><p>Year with a century.</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%Y" }}
|
||||
<!-- 2014 -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>%Z</pre></td>
|
||||
<td><p>Time zone name.</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.published_at | date: "%Z" }}
|
||||
<!-- EDT -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "default", "default" %}
|
||||
|
||||
Sets a default value for any variable with no assigned value. Can be used with strings, arrays, and hashes.
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
Dear {{ customer.name | default: "customer" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if customer.name is nil -->
|
||||
Dear customer
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "default_errors", "default_errors" %}
|
||||
|
||||
Outputs default error messages for the <a href="/themes/liquid-documentation/objects/form/#form.errors">form.errors</a> variable. The messages returned are dependent on the strings returned by <code>form.errors</code>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if form.errors %}
|
||||
{{ form.errors | default_errors }}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if form.errors returned "email" -->
|
||||
Please enter a valid email address.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "default_pagination", "default_pagination" %}
|
||||
|
||||
|
||||
Creates a set of links for paginated results. Used in conjunction with the <a href="/themes/liquid-documentation/objects/paginate/">paginate</a> variable.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ paginate | default_pagination }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<span class="page current">1</span>
|
||||
<span class="page"><a href="/collections/all?page=2" title="">2</a></span>
|
||||
<span class="page"><a href="/collections/all?page=3" title="">3</a></span>
|
||||
<span class="deco">…</span>
|
||||
<span class="page"><a href="/collections/all?page=17" title="">17</a></span>
|
||||
<span class="next"><a href="/collections/all?page=2" title="">Next »</a></span>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "highlight", "highlight" %}
|
||||
|
||||
Wraps words inside search results with an HTML <code><strong></code> tag with the class <code>highlight</code> if it matches the submitted <a href="/themes/liquid-documentation/objects/search/#search.terms">search.terms</a>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ item.content | highlight: search.terms }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If the search term was "Yellow" -->
|
||||
<strong class="highlight">Yellow</strong> shirts are the best!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "highlight_active_tag", "highlight_active_tag" %}
|
||||
|
||||
<p>Wraps a tag link in a <code><span></code> with the class <code>active</code> if that tag is being used to filter a collection.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- collection.tags = ["Cotton", "Crew Neck", "Jersey"] -->
|
||||
{% for tag in collection.tags %}
|
||||
{{ tag | highlight_active | link_to_tag: tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a title="Show products matching tag Cotton" href="/collections/all/cotton"><span class="active">Cotton</span></a>
|
||||
<a title="Show products matching tag Crew Neck" href="/collections/all/crew-neck">Crew Neck</a>
|
||||
<a title="Show products matching tag Jersey" href="/collections/all/jersey">Jersey</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "json", "json" %}
|
||||
|
||||
Converts a string into JSON format.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html%}{% raw %}
|
||||
var content = {{ pages.page-handle.content | json }};
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
var content = "\u003Cp\u003E\u003Cstrong\u003EYou made it! Congratulations on starting your own e-commerce store!\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EThis is your shop\u0026#8217;s \u003Cstrong\u003Efrontpage\u003C/strong\u003E, and it\u0026#8217;s the first thing your customers will see when they arrive. You\u0026#8217;ll be able to organize and style this page however you like.\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003ETo get started adding products to your shop, head over to the \u003Ca href=\"/admin\"\u003EAdmin Area\u003C/a\u003E.\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EEnjoy the software, \u003Cbr /\u003E\nYour Shopify Team.\u003C/p\u003E";
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% block "note-information" %}
|
||||
<p>You do not have to wrap the Liquid output in quotations - the <code>json</code> filter will add them in. The <code>json</code> filter will also escape quotes as needed inside the output.</p>
|
||||
{% endblock %}
|
||||
|
||||
<p>The <code>json</code> filter can also used to make Liquid objects readable by JavaScript:</p>
|
||||
|
||||
{% highlight html%}{% raw %}
|
||||
var json_product = {{ collections.featured.products.first | json }};
|
||||
var json_cart = {{ cart | json }};
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "weight_with_unit", "weight_with_unit" %}
|
||||
|
||||
<p>Formats the product variant's weight. The weight unit is set in <a href="http://www.shopify.com/admin/settings/general">General Settings</a>.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.variants.first.weight | weight_with_unit }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
24.0 kg
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
245
_posts/filters/array-filters.md
Normal file
245
_posts/filters/array-filters.md
Normal file
@@ -0,0 +1,245 @@
|
||||
---
|
||||
layout: default
|
||||
title: Array Filters
|
||||
nav:
|
||||
group: Filters
|
||||
weight: 4
|
||||
---
|
||||
|
||||
# Array Filters
|
||||
|
||||
Array filters are used to modify the output of arrays.
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "join", "join" %}
|
||||
|
||||
<p>Joins the elements of an array with the character passed as the parameter. The result is a single string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.tags | join: ', ' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
tag1, tag2, tag3
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "first", "first" %}
|
||||
|
||||
<p>Returns the first element of an array.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
|
||||
{{ product.tags | first }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
sale
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<code>first</code> can be used in dot notation, in cases where it needs to be used inside a <a href="/themes/liquid-documentation/tags/">tag</a>.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.tags.first == "sale" %}
|
||||
This product is on sale!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Using <code>first</code> on a string returns the first character in the string.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.title = "Awesome Shoes" -->
|
||||
{{ product.title | first }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
A
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "last", "last" %}
|
||||
|
||||
<p>Gets the last element passed in an array.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.tags = "sale", "mens", "womens", "awesome" -->
|
||||
{{ product.tags | last }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
awesome
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<code>last</code> can be used in dot notation, in cases where it needs to be used inside a <a href="/themes/liquid-documentation/tags/">tag</a>.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.tags.last == "sale"%}
|
||||
This product is on sale!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Using <code>last</code> on a string returns the last character in the string.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.title = "Awesome Shoes" -->
|
||||
{{ product.title | last }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
s
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "map", "map" %}
|
||||
|
||||
Accepts an array element's attribute as a parameter and creates a string out of each array element's value.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- collection.title = "Spring", "Summer", "Fall", "Winter" -->
|
||||
{% assign collection_titles = collections | map: 'title' %}
|
||||
{{ collection_titles }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
SpringSummerFallWinter
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "size", "size" %}
|
||||
|
||||
<p>Returns the size of a string or an array.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'this is a 30 character string' | size }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
30
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<code>size</code> can be used in dot notation, in cases where it needs to be used inside a <a href="/themes/liquid-documentation/tags/">tag</a>.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if collections.frontpage.products.size > 10 %}
|
||||
There are more than 10 products in this collection!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "sort", "sort" %}
|
||||
|
||||
Sorts the elements of an array by a given attribute of an element in the array.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign products = collection.products | sort: 'price' %}
|
||||
{% for product in products %}
|
||||
<h4>{{ product.title }}</h4>
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
108
_posts/filters/html-filters.md
Normal file
108
_posts/filters/html-filters.md
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
layout: default
|
||||
title: HTML Filters
|
||||
nav:
|
||||
group: Filters
|
||||
weight: 4
|
||||
---
|
||||
|
||||
#HTML Filters
|
||||
|
||||
HTML filters wrap assets in HTML tags.
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "img_tag", "img_tag" %}
|
||||
|
||||
<p>Generates an image tag.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'smirking_gnome.gif' | asset_url | img_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<code>img_tag</code> accepts parameters to output an alt tag and class names. The first parameter is output as the alt text, and any other following parameters are output as CSS classes.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'smirking_gnome.gif' | asset_url | img_tag: 'Smirking Gnome', 'cssclass1 cssclass2' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="Smirking Gnome" class="cssclass1 cssclass2" />
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "script_tag", "script_tag" %}
|
||||
|
||||
<p>Generates a script tag.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'shop.js' | asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<script src="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.js?28178" type="text/javascript"></script>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "stylesheet_tag", "stylesheet_tag" %}
|
||||
|
||||
<p>Generates a stylesheet tag.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'shop.css' | asset_url | stylesheet_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<link href="//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28178" rel="stylesheet" type="text/css" media="all" />
|
||||
|
||||
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
55
_posts/filters/index.md
Normal file
55
_posts/filters/index.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
layout: default
|
||||
title: Filters
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 3
|
||||
---
|
||||
|
||||
# Filters
|
||||
|
||||
Filters are simple methods that modify the output of numbers, strings, variables and objects. They are placed within an output tag <code>{{</code> <code>}}</code> and are separated with a pipe character <code>|</code>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.title = "Awesome Shoes" -->
|
||||
{{ product.title | upcase }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
AWESOME SHOES
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
In the example above, `product` is the object, `title` is its attribute, and `upcase` is the filter being applied.
|
||||
|
||||
Some filters require a parameter to be passed.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<!-- product.title = "Awesome Shoes" -->
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.title | remove: "Awesome" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
{% highlight html %}{% raw %}
|
||||
Shoes
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
Multiple filters can be used on one output. They are applied from left to right.
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.title = "Awesome Shoes" -->
|
||||
{{ product.title | upcase | remove: "AWESOME" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
{% highlight html %}{% raw %}
|
||||
SHOES
|
||||
{% endraw %}{% endhighlight %}
|
||||
244
_posts/filters/math-filters.md
Normal file
244
_posts/filters/math-filters.md
Normal file
@@ -0,0 +1,244 @@
|
||||
---
|
||||
layout: default
|
||||
title: Math Filters
|
||||
nav:
|
||||
group: Filters
|
||||
weight: '4'
|
||||
---
|
||||
|
||||
# Math Filters
|
||||
|
||||
Math filters allow you to apply mathematical tasks.
|
||||
|
||||
Math filters can be linked and, as with any other filters, are applied in order of left to right. In the example below, <code>minus</code> is applied first, then <code>times</code>, and finally <code>divided_by</code>.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
You save {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price }}%
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "ceil", "ceil" %}
|
||||
|
||||
Rounds an output up to the nearest integer.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 4.6 | ceil }}
|
||||
{{ 4.3 | ceil }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
5
|
||||
5
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "divided_by", "divided_by" %}
|
||||
|
||||
<p>Divides an output by a number.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.price = 200 -->
|
||||
{{ product.price | divided_by: 10 }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
20
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "floor", "floor" %}
|
||||
|
||||
Rounds an output down to the nearest integer.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 4.6 | floor }}
|
||||
{{ 4.3 | floor }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
4
|
||||
4
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "minus", "minus" %}
|
||||
|
||||
<p>Subtracts a number from an output.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.price = 200 -->
|
||||
{{ product.price | minus: 15 }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
185
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "plus", "plus" %}
|
||||
|
||||
<p>Adds a number to an output.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.price = 200 -->
|
||||
{{ product.price | plus: 15 }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
215
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "round", "round" %}
|
||||
|
||||
Rounds the output to the nearest integer or specified number of decimals.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 4.6 | round }}
|
||||
{{ 4.3 | round }}
|
||||
{{ 4.5612 | round: 2 }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
5
|
||||
4
|
||||
4.56
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "times", "times" %}
|
||||
|
||||
<p>Multiplies an output by a number.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.price = 200 -->
|
||||
{{ product.price | time: 1.15 }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
230
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "modulo", "modulo" %}
|
||||
|
||||
<p>Divides an output by a number and returns the remainder.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 12 | modulo:5 }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
2
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
101
_posts/filters/money-filters.md
Normal file
101
_posts/filters/money-filters.md
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
layout: default
|
||||
title: Money Filters
|
||||
nav:
|
||||
group: Filters
|
||||
weight: '4'
|
||||
---
|
||||
|
||||
# Money Filters
|
||||
|
||||
Money filters format prices based on the **Currency Formatting** found in <a href="http://www.shopify.com/admin/settings/general">General Settings</a>.
|
||||
|
||||
{{ '/themes/money_format_settings.jpg' | image }}
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "money", "money" %}
|
||||
|
||||
<p>Formats the price based on the shop's <strong>HTML without currency</strong> setting.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 145 | money }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
<!-- if "HTML without currency" is ${{ amount }} -->
|
||||
$1.45
|
||||
<!-- if "HTML without currency" is €{{ amount_no_decimals }} -->
|
||||
€1
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "money_with_currency", "money_with_currency" %}
|
||||
|
||||
<p>Formats the price based on the shop's <strong>HTML with currency</strong> setting.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 1.45 | money_with_currency }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if "HTML with currency" is ${{ amount }} CAD -->
|
||||
$1.45 CAD
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "money_without_currency", "money_without_currency" %}
|
||||
|
||||
|
||||
<p>Formats the price using a decimal.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 145 | money_without_currency }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
1.45
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
682
_posts/filters/string-filters.md
Normal file
682
_posts/filters/string-filters.md
Normal file
@@ -0,0 +1,682 @@
|
||||
---
|
||||
layout: default
|
||||
title: String Filters
|
||||
nav:
|
||||
group: Filters
|
||||
weight: '4'
|
||||
---
|
||||
|
||||
# String Filters
|
||||
|
||||
String filters are used to manipulate outputs and variables of the <a href="/themes/liquid-documentation/basics/types/#strings">string</a> type.
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "append", "append" %}
|
||||
|
||||
<p>Appends characters to a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'sales' | append: '.jpg' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
sales.jpg
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "camelcase", "camelcase" %}
|
||||
|
||||
|
||||
<p>Converts a string into CamelCase.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'coming-soon' | camelcase }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
ComingSoon
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "capitalize", "capitalize" %}
|
||||
|
||||
<p>Capitalizes the first word in a string</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'capitalize me' | capitalize }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Capitalize me
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "downcase", "downcase" %}
|
||||
|
||||
<p>Converts a string into lowercase.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'UPPERCASE' | downcase }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
**Ouput**
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
uppercase
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "escape", "escape" %}
|
||||
|
||||
<p>Escapes a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "<p>test</p>" | escape }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- The <p> tags are not rendered -->
|
||||
<p>test</p>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "handle/handleize", "handle" %}
|
||||
|
||||
Formats a string into a <a href="/themes/liquid-documentation/basics/handle/">handle</a>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ '100% M & Ms!!!' | handleize }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
100-m-ms
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "md5", "md5" %}
|
||||
|
||||
Converts a string into an MD5 hash.
|
||||
|
||||
<p>An example use case for this filter is showing the Gravatar image associated with the poster of a blog comment:</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
<img src="http://www.gravatar.com/avatar/{{ comment.email | remove: ' ' | strip_newlines | downcase | md5 }}" />
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<img src="http://www.gravatar.com/avatar/2a95ab7c950db9693c2ceb767784c201" />
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "newline_to_br", "newline_to_br" %}
|
||||
|
||||
<p>Inserts a <br > linebreak HTML tag in front of each line break in a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% capture var %}
|
||||
One
|
||||
Two
|
||||
Three
|
||||
{% endcapture %}
|
||||
{{ var | newline_to_br }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
One <br>
|
||||
Two<br>
|
||||
Three<br>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "pluralize", "pluralize" %}
|
||||
|
||||
Outputs the singular or plural version of a string based on the value of a number. The first parameter is the singular string and the second parameter is the plural string.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ cart.item_count }}
|
||||
{{ cart.item_count | pluralize: 'item', 'items' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
3 items
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "prepend", "prepend" %}
|
||||
|
||||
|
||||
<p>Prepends characters to a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'sale' | prepend: 'Made a great ' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
Made a great sale
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "remove", "remove" %}
|
||||
|
||||
<p>Removes all occurrences of a substring from a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "Hello, world. Goodbye, world." | remove: "world" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hello, . Goodbye, .
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "remove_first", "remove_first" %}
|
||||
|
||||
<p>Removes only the first occurrence of a substring from a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "Hello, world. Goodbye, world." | remove_first: "world" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hello, . Goodbye, world.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "replace", "replace" %}
|
||||
|
||||
<p>Replaces all occurrences of a string with a substring.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.title = "Awesome Shoes" -->
|
||||
{{ product.title | replace: 'Awesome', 'Mega' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Mega Shoes
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "replace_first", "replace_first" %}
|
||||
|
||||
<p>Replaces the first occurrence of a string with a substring.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- product.title = "Awesome Awesome Shoes" -->
|
||||
{{ product.title | replace_first: 'Awesome', 'Mega' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Mega Awesome Shoes
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "split", "split" %}
|
||||
|
||||
The <code>split</code> filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array.
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign words = "Uses cheat codes, calls the game boring." | split: ' ' %}
|
||||
First word: {{ words.first }}
|
||||
First word: {{ words[0] }}
|
||||
Second word: {{ words[1] }}
|
||||
Last word: {{ words.last }}
|
||||
All words: {{ words | join: ', ' }}
|
||||
|
||||
{% for word in words %}
|
||||
{{ word }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
First word: Uses
|
||||
First word: Uses
|
||||
Second word: cheat
|
||||
Last word: boring.
|
||||
All words: Uses, cheat, codes,, calls, the, game, boring.
|
||||
|
||||
Uses cheat codes, calls the game boring.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "strip", "strip" %}
|
||||
|
||||
<p>Strips tabs, spaces, and newlines (all whitespace) from the left and right side of a string. </p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ ' too many spaces ' | strip }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
too many spaces
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "lstrip", "lstrip" %}
|
||||
|
||||
|
||||
<p>Strips tabs, spaces, and newlines (all whitespace) from the <strong>left</strong> side of a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
"{{ ' too many spaces ' | lstrip }}"
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- Notice the empty spaces to the right of the string -->
|
||||
too many spaces
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "rstrip", "rstrip" %}
|
||||
|
||||
<p>Strips tabs, spaces, and newlines (all whitespace) from the <strong>right</strong> side of a string. </p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ ' too many spaces ' | strip }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
<!-- Notice the empty spaces to the right of the string -->
|
||||
{% highlight html %}{% raw %}
|
||||
too many spaces
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "strip_html", "strip_html" %}
|
||||
|
||||
<p>Strips all HTML tags from a string.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "<h1>Hello</h1> World" | strip_html }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hello World
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "strip_newlines", "strip_newlines" %}
|
||||
|
||||
<p>Removes any line breaks/newlines from a string.</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.description | strip_newlines }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "to_number", "to_number" %}
|
||||
|
||||
<p>Converts a string into a number.</p>
|
||||
|
||||
<p><strong>Note</strong>: when you define a variable using the <a href="/themes/liquid-documentation/tags/variable-tags/#capture">capture</a> tag, the result is always a string. Theme Settings variables are also strings by default.
|
||||
|
||||
<p>For example, the following will produce an error, since the <code>num</code> variable is still a string:</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% capture num %}10000{% endcapture %}
|
||||
{% if num > 9000 %}
|
||||
num is over 9000!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p>By using the <code>to_number</code> filter on the <code>num</code> variable, it can be compared to another number.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% capture num %}10000{% endcapture %}
|
||||
{% if num | to_number > 9000 %}
|
||||
num is over 9000!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "truncate", "truncate" %}
|
||||
|
||||
<p>Truncates a string down to 'x' characters, where x is the number passed as a parameter. An ellipsis (...) is appended to the string and is included in the character count.</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "The cat came back the very next day" | truncate: 10 }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
The cat...
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "truncatewords", "truncatewords" %}
|
||||
|
||||
|
||||
<p>Truncates a string down to 'x' words, where x is the number passed as a parameter. An ellipsis (...) is appended to the truncated string.</p>
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "The cat came back the very next day" | truncatewords: 4 }}{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
The cat came back...
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "upcase", "upcase" %}
|
||||
|
||||
<p>Converts a string into uppercase.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'i want this to be uppercase' | upcase }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html%}{% raw %}
|
||||
I WANT THIS TO BE UPPERCASE
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "url_escape", "url_escape" %}
|
||||
|
||||
Identifies all characters in a string that are not allowed in URLS, and replaces the characters with their escaped variants.
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "<hello> & <shopify>" | url_escape }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
%3Chello%3E%20&%20%3Cshopify%3E
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "url_param_escape", "url_param_escape" %}
|
||||
|
||||
<p>Replaces all characters in a string that are not allowed in URLs with their escaped variants, including the ampersand (&).</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "<hello> & <shopify>" | url_param_escape }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
%3Chello%3E%20%26%20%3Cshopify%3E
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
695
_posts/filters/url-filters.md
Normal file
695
_posts/filters/url-filters.md
Normal file
@@ -0,0 +1,695 @@
|
||||
---
|
||||
layout: default
|
||||
title: URL Filters
|
||||
nav:
|
||||
group: Filters
|
||||
weight: '4'
|
||||
---
|
||||
|
||||
# URL Filters
|
||||
|
||||
URL filters output links to assets on Shopify's Content Delivery Network (CDN). They are also used to create links for filtering collections and blogs.
|
||||
|
||||
In many URL filters' outputs, you will see a question mark (?) with a number appended to the asset's file path. This is the file's version number.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
In the example above, <strong>28253</strong> is the version number. URL filters will always load the latest version of an asset.
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "asset_url", "asset_url" %}
|
||||
|
||||
Returns the URL of a file in the "assets" folder of a theme.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'shop.css' | asset_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "file_url", "file_url" %}
|
||||
|
||||
<p>Returns the URL of a file in the <a href="http://www.shopify.com/admin/settings/files">Files</a> page of the admin.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'size-chart.pdf' | file_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/files/size-chart.pdf?28261
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_login_link", "customer_login_link" %}
|
||||
|
||||
Generates a link to the customer log in page.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'Log in' | customer_login_link }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/account/login" id="customer_login_link">Log in</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "global_asset_url", "global_asset_url" %}
|
||||
|
||||
Returns the URL of a global asset. Global assets are kept in a directory on Shopify's servers. Using global assets can improve the load times of your pages dramatically.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'prototype.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<script src="//cdn.shopify.com/s/global/prototype.js?1" type="text/javascript"></script>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Listed below are the available global assets:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'prototype.js' | global_asset_url | script_tag }}
|
||||
{{ 'controls.js' | global_asset_url | script_tag }}
|
||||
{{ 'dragdrop.js' | global_asset_url | script_tag }}
|
||||
{{ 'effects.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'prototype/1.5/prototype.js' | global_asset_url | script_tag }}
|
||||
{{ 'prototype/1.6/prototype.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'scriptaculous/1.8.2/scriptaculous.js' | global_asset_url | script_tag }}
|
||||
{{ 'scriptaculous/1.8.2/builder.js' | global_asset_url | script_tag }}
|
||||
{{ 'scriptaculous/1.8.2/controls.js' | global_asset_url | script_tag }}
|
||||
{{ 'scriptaculous/1.8.2/dragdrop.js' | global_asset_url | script_tag }}
|
||||
{{ 'scriptaculous/1.8.2/effects.js' | global_asset_url | script_tag }}
|
||||
{{ 'scriptaculous/1.8.2/slider.js' | global_asset_url | script_tag }}
|
||||
{{ 'scriptaculous/1.8.2/sound.js' | global_asset_url | script_tag }}
|
||||
{{ 'scriptaculous/1.8.2/unittest.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'ga.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'mootools.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
|
||||
{{ 'lightbox.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'lightbox/v1/lightbox.css' | global_asset_url | stylesheet_tag }}
|
||||
{{ 'lightbox/v1/lightbox.js' | global_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'lightbox/v2/lightbox.css' | global_asset_url | stylesheet_tag }}
|
||||
{{ 'lightbox/v2/lightbox.js' | global_asset_url | script_tag }}
|
||||
{{ 'lightbox/v2/loading.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v2/close.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v2/overlay.png' | global_asset_url }}
|
||||
{{ 'lightbox/v2/zoom-lg.gif' | global_asset_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'lightbox/v204/lightbox.css' | global_asset_url | stylesheet_tag }}
|
||||
{{ 'lightbox/v204/lightbox.js' | global_asset_url | script_tag }}
|
||||
{{ 'lightbox/v204/bullet.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v204/close.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v204/closelabel.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v204/donatebutton.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v204/downloadicon.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v204/loading.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v204/nextlabel.gif' | global_asset_url }}
|
||||
{{ 'lightbox/v204/prevlabel.gif' | global_asset_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'list_collection.css' | global_asset_url | stylesheet_tag }}
|
||||
{{ 'search.css' | global_asset_url | stylesheet_tag }}
|
||||
{{ 'textile.css' | global_asset_url | stylesheet_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'firebug/firebug.css' | global_asset_url | stylesheet_tag }}
|
||||
{{ 'firebug/firebug.js' | global_asset_url | script_tag }}
|
||||
{{ 'firebug/firebugx.js' | global_asset_url | script_tag }}
|
||||
{{ 'firebug/firebug.html' | global_asset_url }}
|
||||
{{ 'firebug/errorIcon.png' | global_asset_url }}
|
||||
{{ 'firebug/infoIcon.png' | global_asset_url }}
|
||||
{{ 'firebug/warningIcon.png' | global_asset_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link_to", "link_to" %}
|
||||
|
||||
|
||||
<p>Generates an HTML link. The first parameter is the URL of the link, and the optional second parameter is the title of the link.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'Shopify' | link_to: 'http://shopify.com','A link to Shopify' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="http://shopify.com" title="A link to Shopify">Shopify</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link_to_vendor", "link_to_vendor" %}
|
||||
|
||||
Creates an HTML link to a collection page that lists all products belonging to a vendor.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "Shopify" | link_to_vendor }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/collections/vendors?q=Shopify" title="Shopify">Shopify</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link_to_type", "link_to_type" %}
|
||||
|
||||
Creates an HTML link to a collection page that lists all products belonging to a product type.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "jeans" | link_to_type }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/collections/types?q=jeans" title="jeans">jeans</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link_to_tag", "link_to_tag" %}
|
||||
|
||||
<p>Creates a link to all products in a collection that have a given tag.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
|
||||
{% for tag in collection.tags %}
|
||||
{{ tag | link_to_tag: tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
|
||||
<a title="Show products matching tag Womens" href="/collections/frontpage/womens">Womens</a>
|
||||
<a title="Show products matching tag Sale" href="/collections/frontpage/sale">Sale</a>
|
||||
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link_to_add_tag", "link_to_add_tag" %}
|
||||
|
||||
<p>Creates a link to all products in a collection that have a given tag as well as any tags that have been already selected.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
|
||||
{% for tag in collection.tags %}
|
||||
{{ tag | link_to_add_tag: tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If you're on "/collections/frontpage/mens": -->
|
||||
<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
|
||||
<a title="Show products matching tag Womens" href="/collections/frontpage/womens+mens">Womens</a>
|
||||
<a title="Show products matching tag Sale" href="/collections/frontpage/sale+mens">Sale</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link_to_remove_tag", "link_to_remove_tag" %}
|
||||
|
||||
<p>Generates a link to all products in a collection that have the given tag and all the previous tags that might have been added already.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
|
||||
{% for tag in collection.tags %}
|
||||
{{ tag | link_to_add_tag: tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If you're on "/collections/frontpage/mens": -->
|
||||
<a title="Remove tag Mens" href="/collections/frontpage">Mens</a>
|
||||
<a title="Remove tag Womens" href="/collections/frontpage/mens">Womens</a>
|
||||
<a title="Remove tag Sale" href="/collections/frontpage/mens">Sale</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "payment_type_img_url", "payment_type_img_url" %}
|
||||
|
||||
Returns the URL of the payment type's SVG image. Used in conjunction with the <a href="/themes/liquid-documentation/objects/shop/#shop.enabled_payment_types">shop.enabled_payment_types</a> variable.
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for type in shop.enabled_payment_types %}
|
||||
<img src="{{ type | payment_type_img_url }}" />
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If shop accepts American Express, MasterCard and Visa -->
|
||||
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_american_express.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
|
||||
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_master.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
|
||||
<img src="//cdn.shopify.com/s/global/payment_types/creditcards_visa.svg?3cdcd185ab8e442b12edc11c2cd13655f56b0bb1">
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product_img_url", "product_img_url" %}
|
||||
|
||||
<p>Generates the product image URL. Accepts an <a href="/themes/liquid-documentation/filters/url-filters/#size-parameters">image size</a> as a parameter.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.featured_image | product_img_url: "medium" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
The available size parameters are listed below:
|
||||
|
||||
<h3 id="size-parameters">Parameters: image sizes</h3>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr id="pico">
|
||||
<td>
|
||||
<pre>pico</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 16 by 16 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="icon">
|
||||
<td>
|
||||
<pre>icon </pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 32 by 32 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="thumb">
|
||||
<td>
|
||||
<pre>thumb</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 50 by 50 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="small">
|
||||
<td>
|
||||
<pre> small </pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 100 by 100 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="compact">
|
||||
<td>
|
||||
<pre> compact </pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 160 by 160 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="medium">
|
||||
<td>
|
||||
<pre> medium</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 240 by 240 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="large">
|
||||
<td>
|
||||
<pre> large </pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 480 by 480 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="grande">
|
||||
<td>
|
||||
<pre> grande </pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 600 by 600 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="original">
|
||||
<td>
|
||||
<pre> original</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p><strong>Deprecated</strong> - do not use this when creating themes. </p>
|
||||
<p>Returns the image at a maximum size of 1024 by 1024 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="1024">
|
||||
<td>
|
||||
<pre>1024x1024</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 1024 by 1024 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="2048">
|
||||
<td>
|
||||
<pre>2048x2048</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the image at a maximum size of 2048 by 2048 pixels.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="master">
|
||||
<td>
|
||||
<pre>master</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p>Returns the largest possible image (the current maximum image size is 2048 x 2048 pixels).</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection_img_url", "collection_img_url" %}
|
||||
|
||||
<p>Returns the collection image's URL. Accepts the same <a href="/themes/liquid-documentation/filters/url-filters/#size-parameters">size parameters</a> as <a href="/themes/liquid-documentation/filters/url-filters/#product_img_url">product_img_url</a>.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.image | collection_img_url: 'medium' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/collections/collection-image_medium.png?v=1337103726{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shopify_asset_url", "shopify_asset_url" %}
|
||||
|
||||
Returns the URL of a global assets that are found on Shopify's servers. Globally-hosted assets include:
|
||||
|
||||
- option_selection.js
|
||||
- api.jquery.js
|
||||
- shopify_common.js,
|
||||
- customer_area.js
|
||||
- currencies.js
|
||||
- customer.css
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<script src="//cdn.shopify.com/s/shopify/option_selection.js?20cf2ffc74856c1f49a46f6e0abc4acf6ae5bb34" type="text/javascript"></script>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% comment %}
|
||||
{% anchor_link "theme_url", "theme_url" %}
|
||||
|
||||
<p>Generates the theme URL.</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ theme_role | theme_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
This filter outputs a URL that switches the active theme to the given role ("main" or "mobile"). This is the same URL used in the link generated by [link_to_theme](/themes/filters/5-link-to-theme).
|
||||
|
||||
See also: [themes](/themes/liquid-variables/themes), [theme](/themes/liquid-variables/theme).
|
||||
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
{% comment %}
|
||||
{% anchor_link "url_for_product", "url_for_product" %}
|
||||
|
||||
<p>Generates a URL for a product name by transforming it to a <a href="/themes/liquid-documentation/basics/handle/">handle</a>. <code>url_for_product</code> does not output the actual handle of the product, which could have been edited to something else.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "Red sportscar" | url_for_product }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "url_for_type", "url_for_type" %}
|
||||
|
||||
Creates a URL that links to a collection page containing products with a specific product type.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "T-shirt" | url_for_type }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
/collections/types?q=T-shirt
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "url_for_vendor", "url_for_vendor" %}
|
||||
|
||||
Creates a URL that links to a collection page containing products with a specific product vendor.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ "Shopify" | url_for_vendor }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
/collections/vendors?q=Shopify
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "within", "within" %}
|
||||
|
||||
Creates a <i>collection-aware</i> product URL by prepending "/collections/collection-handle/" to a product URL, where "collection-handle" is the <a href="/themes/liquid-documentation/basics/handle/">handle</a> of the collection that is currently being viewed.
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/collections/frontpage/products/alien-poster">Alien Poster</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
When a product is collection-aware, its product template can access the <a href="/themes/liquid-documentation/objects/collection/">collection</a> output of the collection that it belongs to. This allows you to add in collection-related content, such as <a href="http://docs.shopify.com/support/your-store/collections/how-to-navigate-within-a-collection">next/previous product links</a> or <a href="http://docs.shopify.com/support/your-store/products/can-i-recommend-related-products#finding-a-relevant-colleciton">related products</a>.
|
||||
6
_posts/index.md
Normal file
6
_posts/index.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: redirect
|
||||
title: Liquid Reference
|
||||
title-short: Liquid Reference
|
||||
description: Liquid Reference
|
||||
---
|
||||
217
_posts/objects/address.md
Normal file
217
_posts/objects/address.md
Normal file
@@ -0,0 +1,217 @@
|
||||
---
|
||||
layout: default
|
||||
title: address
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# address
|
||||
|
||||
The <code>address</code> object contains information entered by a customer in Shopify's checkout pages. Note that a customer can enter two addresses: **billing address** or **shipping address**.
|
||||
|
||||
{{ '/themes/address.jpg' | image }}
|
||||
|
||||
When accessing attributes of the <code>address</code> object, you must specify which address you want to target. This is done by using either <code>shipping_address</code> or <code>billing_address</code> before the attribute.
|
||||
|
||||
<code>address</code> can be used in email templates, the Thank You page of the checkout, as well as in apps such as Order Printer.
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.name", "address-name" %}
|
||||
|
||||
Returns the values of the First Name **and** Last Name fields of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
Hello, {{ billing_address.name }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hello, Bob Biller
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.first_name", "address-first_name" %}
|
||||
|
||||
Returns the value of the First Name field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.last_name", "address-last_name" %}
|
||||
|
||||
Returns the value of the Last Name field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.address1", "address-address1" %}
|
||||
|
||||
Returns the value of the Address1 field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.address2", "address-address2" %}
|
||||
|
||||
Returns the value of the Address2 field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.street", "address-street" %}
|
||||
|
||||
Returns the combined values of the Address1 and Address2 fields of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shipping_address.street }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
126 York St, Shopify Office
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.company", "address-company" %}
|
||||
|
||||
Returns the value of the Company field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.city", "address-city" %}
|
||||
|
||||
Returns the value of the City field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.province", "address-province" %}
|
||||
|
||||
Returns the value of the Province/State field of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ billing_address.province }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Ontario
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.province_code", "address-province_code" %}
|
||||
|
||||
Returns the abbreviated value of the Province/State field of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ billing_address.province_code }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
ON
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.zip", "address-zip" %}
|
||||
|
||||
|
||||
Returns the value of the Postal/Zip field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.country", "address-country" %}
|
||||
|
||||
Returns the value of the Country field of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shipping_address.country }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Canada
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.country_code", "address-country_code" %}
|
||||
|
||||
Returns the value of the Country field of the address in ISO 3166-2 standard format.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shipping_address.country_code }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
CA
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "address.phone", "address-phone" %}
|
||||
|
||||
Returns the value of the Phone field of the address.
|
||||
|
||||
|
||||
267
_posts/objects/article.md
Normal file
267
_posts/objects/article.md
Normal file
@@ -0,0 +1,267 @@
|
||||
---
|
||||
layout: default
|
||||
title: article
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# article
|
||||
|
||||
The <code>article</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.author", "article-author" %}
|
||||
|
||||
<p>Returns the full name of the article's author.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.comments", "article-comments" %}
|
||||
|
||||
Returns the published <a href="/themes/liquid-documentation/objects/comment/">comments</a> of an article. Returns an empty array if comments are disabled.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.comments_count", "article-comments_count" %}
|
||||
|
||||
<p>Returns the number of published comments for an article.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.comments_enabled?", "article-comments_enabled?" %}
|
||||
|
||||
<p>Returns <code>true</code> if comments are enabled. Returns <code>false</code> if comments are disabled.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.comment_post_url", "article-comment_post_url" %}
|
||||
|
||||
<p>Returns the relative URL where POST requests are sent to when creating new comments.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.comment_post_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
/blogs/news/10582441-sale-starts-today/comments
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.content", "article-content" %}
|
||||
|
||||
<p>Returns the content of an article.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.created_at", "article-created_at" %}
|
||||
<p>Returns the timestamp of when an article was created. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#date">date filter</a> to format the timestamp.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.created_at | date: "%a, %b %d, %y" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Fri, Sep 16, 11
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.excerpt", "article-excerpt" %}
|
||||
<p>Returns the excerpt of an article.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.excerpt_or_content", "article-excerpt_or_content" %}
|
||||
<p>Returns <code>article.excerpt</code> of an article if it exists. Returns <code>article.content</code> if an excerpt does not exist for the article.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.id", "article.id" %}
|
||||
<p>Returns the id of an article.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.moderated?", "article-moderated?" %}
|
||||
<p>Returns <code>true</code> if the blog that the article belongs to is set to moderate comments. Returns <code>false</code> if the blog is not moderated.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.published_at", "article-published_at" %}
|
||||
<p>Returns the date/time when an article was published. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#date">date filter</a> to format the timestamp.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.tags", "article-tags" %}
|
||||
<p>Returns all the tags for an article.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for tag in article.tags %}
|
||||
{{tag}}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
tag1 tag2 tag3 tag4
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.title", "article-title" %}
|
||||
<p>Returns the title of an article.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.url", "article-url" %}
|
||||
<p>Returns the relative URL of the article.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ article.url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
/blogs/news/10582441-my-new-article
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.user.account_owner", "article-user-account_owner" %}
|
||||
<p>Returns "true" if the author of the article is the account owner of the shop. Returns "false" if the author is not the account owner.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.user.bio", "article-user-bio" %}
|
||||
<p>Returns the bio of the author of an article. This is entered through the <strong>Staff members</strong> options on the <a href="http://www.shopify.com/admin/settings/account">Account</a> page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.user.email", "article-user-email" %}
|
||||
<p>Returns the email of the author of an article. This is entered through the <strong>Staff members</strong> options on the <a href="http://www.shopify.com/admin/settings/account">Account</a> page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.user.first_name", "article-user-first_name" %}
|
||||
<p>Returns the first name of the author of an article. This is entered through the <strong>Staff members</strong> options on the <a href="http://www.shopify.com/admin/settings/account">Account</a> page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.user.last_name", "article-user-last_name" %}
|
||||
<p>Returns the last name of the author of an article. This is entered through the <strong>Staff members</strong> options on the <a href="http://www.shopify.com/admin/settings/account">Account</a> page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "article.user.homepage", "article-user-homepage" %}
|
||||
<p>Returns the homepage of the author of an article. This is entered through the <strong>Staff members</strong> options on the <a href="http://www.shopify.com/admin/settings/account">Account</a> page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
152
_posts/objects/blog.md
Normal file
152
_posts/objects/blog.md
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
layout: default
|
||||
title: blog
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# blog
|
||||
|
||||
The <code>blog</code> object has the following attributes:
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "blog.all_tags", "blog-all_tags" %}
|
||||
|
||||
Returns all tags of all articles of a blog. This includes tags of articles that are not in the current pagination view.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for tag in blog.all_tags %}
|
||||
{{ tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
News, Music, Sale, Tips and Tricks
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.articles", "blog-articles" %}
|
||||
Returns an array of all articles in a blog. See <a href="/themes/liquid-documentation/objects/article/">this page</a> for a list of all available attributes for <code>article</code>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for article in blog.articles %}
|
||||
<h2>{{ article.title }}</h2>
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<h2>Hello World!</h2>
|
||||
<h2>This is my second post.</h2>
|
||||
<h2>Third time's a charm!</h2>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.articles_count", "blog-articles_count" %}
|
||||
Returns the total number of articles in a blog. This total does not include hidden articles.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.comments_enabled?", "blog-comments_enabled?" %}
|
||||
Returns <code>true</code> if comments are enabled, or <code>false</code> if they are disabled.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.handle", "blog-handle" %}
|
||||
Returns the <a href="/themes/liquid-documentation/basics/handle/">handle</a> of the blog.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.id", "blog-id" %}
|
||||
Returns the id of the blog.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.moderated?", "blog-moderated?" %}
|
||||
Returns <code>true</code> if comments are moderated, or <code>false</code> if they are not moderated.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.next_article", "blog-next_article" %}
|
||||
Returns the URL of the next (older) post. Returns "false" if there is no next article.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.previous_article", "blog-previous_article" %}
|
||||
|
||||
Returns the URL of the previous (newer) post. Returns <code>false</code> if there is no next article.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.tags", "blog-tags" %}
|
||||
|
||||
Returns all tags in a blog. Similar to <a href="#blog.all_tags">all_tags</a>, but only returns tags of articles that are in the filtered view.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.title", "blog-title" %}
|
||||
|
||||
Returns the title of the blog.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "blog.url", "blog-url" %}
|
||||
|
||||
Returns the relative URL of the blog.
|
||||
|
||||
|
||||
|
||||
147
_posts/objects/cart.md
Normal file
147
_posts/objects/cart.md
Normal file
@@ -0,0 +1,147 @@
|
||||
---
|
||||
layout: default
|
||||
title: cart
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# cart
|
||||
|
||||
The <code>cart</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "cart.attributes", "cart-attributes" %}
|
||||
|
||||
<code>cart.attributes</code> allow the capturing of more information on the cart page. This is done by giving an input a <code>name</code>attribute with the following syntax:
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
attributes[attribute-name]
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Shown below is a basic example of how to use an HTML input of type "text" to capture information on the cart page.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<label>What is your Pet's name?</label>
|
||||
<input type="text" name="attributes[your-pet-name]" value="{{ cart.attributes.your-pet-name }}" />
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<code>cart.attributes</code> can be accessed in order email templates, the Thank You page of the checkout, as well as in apps such as <a href="http://docs.shopify.com/manual/more/official-shopify-apps/order-printer">Order Printer</a>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ attributes.your-pet-name }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Haku
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
For more examples on how to use cart attributes, see <a href="http://docs.shopify.com/manual/configuration/store-customization/communicating-with-customers/obtain-information/ask-customer-for-more-information#cart-attributes">Ask a customer for additional information</a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "cart.item_count", "cart-item_count" %}
|
||||
|
||||
<p>Returns the number of items inside the cart.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ cart.item_count }} {{ cart.item_count | pluralize: 'Item', 'Items' }} ({{ cart.total_price | money }})
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
25 Items ($53.00)
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "cart.items", "cart-items" %}
|
||||
|
||||
<p>Returns all of the <a href="/themes/liquid-documentation/objects/line_item/">line items</a> in the cart.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "cart.note", "cart-note" %}
|
||||
|
||||
<code>cart.note</code> allows the capturing of more information on the cart page.
|
||||
|
||||
This is done by submitting the cart form with an HTML <code>textarea</code> and wrapping the <code>cart.note</code> output.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<label>Gift note:</label>
|
||||
<textarea rows="100" cols="20">{{ cart.note }}</textarea>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% block "note" %}
|
||||
There can only be one instance of <code>{% raw %}{{ cart.note }}{% endraw %}</code> on the cart page. If there are multiple instances, the one that comes latest in the Document Object Model (DOM) will be submitted with the form.
|
||||
{% endblock %}
|
||||
|
||||
<code>cart.note</code> can be accessed in order email templates, the Thank You page of the checkout, as well as in apps such as <a href="http://docs.shopify.com/manual/more/official-shopify-apps/order-printer">Order Printer</a>. For examples on how to use cart notes, see <a href="http://docs.shopify.com/manual/configuration/store-customization/communicating-with-customers/obtain-information/ask-customer-for-more-information#cart-note">Ask a customer for additional information</a>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ note }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hope you like the gift, Kylea!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "cart.total_price", "cart-total_price" %}
|
||||
|
||||
<p>Returns the total price of all of the items in the cart.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "cart.total_weight", "cart-total_weight" %}
|
||||
|
||||
<p>Returns the total weight of all of the items in the cart.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
455
_posts/objects/collection.md
Normal file
455
_posts/objects/collection.md
Normal file
@@ -0,0 +1,455 @@
|
||||
---
|
||||
layout: default
|
||||
title: collection
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# collection
|
||||
|
||||
The <code>collection</code> object has the following attributes:
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% comment %}
|
||||
|
||||
Commenting out all_products and all_products_count as I don't see a purpose for them atm. The pagination limit for products and all_products is the same, so what is the difference?
|
||||
|
||||
{% anchor_link "collection.all_products", "collection.all_products" %}
|
||||
|
||||
Returns all of the products inside a collection. Note that there is a limit of 50 products that can be shown per page. Use the <a href="#">pagination</a> tag to control how many products are shown per page.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.all_products_count", "collection.all_products_count" %}
|
||||
|
||||
<p>Returns the number of products in a collection.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.all_products_count }} {{ collection.all_products_count | pluralize: 'Item', 'Items' }} total
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
24 Items
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.all_tags", "collection.all_tags" %}
|
||||
|
||||
Returns all tags of all products of a collection. This includes tags of products that are not in the current pagination view.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if collection.all_tags.size > 0 %}
|
||||
{% for tag in collection.all_tags %}
|
||||
{% if current_tags contains tag %}
|
||||
<li class="active">
|
||||
{{ tag | link_to_remove_tag: tag }}
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
{{ tag | link_to_tag: tag }}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
# {% endcomment %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.all_types", "collection-all_types" %}
|
||||
|
||||
<p>Returns a list of all product types in a collection.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product_type in collection.all_types %}
|
||||
{{ product_type | link_to_type }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/collections/types?q=Accessories" title="accessories">Accessories</a>
|
||||
<a href="/collections/types?q=Chairs" title="Chairs">Chairs</a>
|
||||
<a href="/collections/types?q=Shoes" title="Shoes">Shoes</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.all_vendors", "collection-all_vendors" %}
|
||||
|
||||
<p>Returns a list of all product vendors in a collection.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product_vendor in collection.all_vendors %}
|
||||
{{ product_vendor | link_to_vendor }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/collections/vendors?q=Shopify" title="Shopify">Shopify</a>
|
||||
<a href="/collections/vendors?q=Shirt+Company" title="Shirt Company">Shirt Company</a>
|
||||
<a href="/collections/vendors?q=Montezuma" title="Montezuma">Montezuma</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.current_type", "collection-current_type" %}
|
||||
|
||||
Returns the product type when filtering a collection by type. For example, you may be on a collection page filtered by a type query parameter via this URL: <tt>myshop.shopify.com/collections?types=shirts</tt>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if collection.current_type %}
|
||||
{{ collection.current_type }}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
shirts
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.current_vendor", "collection-current_vendor" %}
|
||||
|
||||
Returns the vendor name when filtering a collection by vendor. For example, you may be on a collection page filtered by a vendor query parameter via this URL: <tt>myshop.shopify.com/collections/vendors?q=Shopify</tt>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if collection.current_vendor %}
|
||||
{{ collection.current_vendor }}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Shopify
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.default_sort_by", "collection-default_sort_by" %}
|
||||
|
||||
<p>Returns the sort order of the collection, which is set in the collection pages of the Admin.</p>
|
||||
|
||||
{{ '/themes/collection-sorting.jpg' | image }}
|
||||
|
||||
The possible outputs are:
|
||||
|
||||
- manual
|
||||
- best-selling
|
||||
- title-ascending
|
||||
- title-descending
|
||||
- price-ascending
|
||||
- price-descending
|
||||
- created-ascending
|
||||
- created-descending
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.description", "collection-description" %}
|
||||
|
||||
<p>Returns the description of the collection.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.handle", "collection-handle" %}
|
||||
|
||||
<p>Returns the <a href="/themes/liquid-documentation/basics/handle/">handle</a> of a collection. </p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.id", "collection-id" %}
|
||||
|
||||
<p>Returns the id of the collection.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.image", "collection-image" %}
|
||||
|
||||
<p>Returns the collection image. Use the <a href="/themes/liquid-documentation/filters/url-filters/#collection_img_url">collection_img_url</a> filter to link it to the image file on the Shopify CDN.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.image | collection_img_url: 'medium' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/collections/collection-image_medium.png?v=1337103726
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% comment %}
|
||||
Commenting out since you can't actually change alt tag in admin.
|
||||
{% anchor_link "collection.image.alt", "collection.image.alt" %}
|
||||
|
||||
<p>Returns the collection image's alt tag.</p>
|
||||
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.image.src", "collection-image-src" %}
|
||||
|
||||
<p>Returns the relative URL to the collection image.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.image.src | collection_img_url: 'medium' }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/collections/summer_collection_medium.png?v=1334084726
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.next_product", "collection-next_product" %}
|
||||
|
||||
Returns the URL of the next product in the collection. Returns <code>nil</code> if there is no next product.
|
||||
|
||||
This output can be used on the product page to output "next" and "previous" links on the <tt>product.liquid</tt> template. For more information, see <a href="http://docs.shopify.com/support/your-store/collections/how-to-navigate-within-a-collection">How to Navigate within a Collection</a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.previous_product", "collection-previous_product" %}
|
||||
|
||||
Returns the URL of the previous product in the collection. Returns <code>nil</code> if there is no previous product.
|
||||
|
||||
This output can be used on the product page to output "next" and "previous" links on the <tt>product.liquid</tt> template. For more information, see <a href="http://docs.shopify.com/support/your-store/collections/how-to-navigate-within-a-collection">How to Navigate within a Collection</a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.products", "collection-products" %}
|
||||
|
||||
Returns all of the products inside a collection. Note that there is a limit of 50 products that can be shown per page. Use the <a href="/themes/liquid-documentation/tags/theme-tags/#paginate">pagination</a> tag to control how many products are shown per page.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.products_count", "collection-products_count" %}
|
||||
|
||||
<p>Returns the number of products in a collection.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.all_products_count }} {{ collection.all_products_count | pluralize: 'Item', 'Items' }} total
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
24 Items
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.template_suffix", "collection-template_suffix" %}
|
||||
|
||||
<p>Returns the name of the custom collection template assigned to the collection, without the <tt>collection.</tt> prefix or the <tt>.liquid</tt> suffix. Returns <code>nil</code> if a custom template is not assigned to the collection.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.template_suffix }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
no-price
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.title", "collection-title" %}
|
||||
|
||||
<p>Returns the title of the collection.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
<h1>{{ collection.title }}</h1>
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Frontpage
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.tags", "collection-tags" %}
|
||||
|
||||
<p>Returns all tags of all products in a collection.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "collection.url", "collection-url" %}
|
||||
|
||||
<p>Returns the URL of the collection.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
71
_posts/objects/comment.md
Normal file
71
_posts/objects/comment.md
Normal file
@@ -0,0 +1,71 @@
|
||||
---
|
||||
layout: default
|
||||
title: comment
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# comment
|
||||
|
||||
The <code>comment</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "comment.id", "comment-id" %}
|
||||
|
||||
Returns the id (unique identifier) of the comment.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "comment.author", "comment-author" %}
|
||||
|
||||
Returns the author of the comment.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "comment.email", "comment-email" %}
|
||||
|
||||
Returns the e-mail address of the comment's author.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "comment.content", "comment-content" %}
|
||||
|
||||
Returns the content of the comment.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "comment.status", "comment-status" %}
|
||||
|
||||
Returns the status of the comment. The possible values are:
|
||||
|
||||
- unapproved
|
||||
- published
|
||||
- removed
|
||||
- spam
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "comment.url", "comment-url" %}
|
||||
|
||||
Returns the URL of the article with <code>comment.id</code> appended to it. This is so the page will automatically scroll to the comment.
|
||||
|
||||
|
||||
|
||||
|
||||
37
_posts/objects/country-option-tags.md
Normal file
37
_posts/objects/country-option-tags.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
layout: default
|
||||
title: country_option_tags
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# country_option_tags
|
||||
|
||||
<code>country_option_tags</code> creates an <option> tag for each country. An attribute named <code>data-provinces</code> is set for each country, containing JSON-encoded arrays of the country's respective subregions. If a country does not have any subregions, an empty array is set for its <code>data-provinces</code> attribute.
|
||||
|
||||
<code>country_option_tags</code> must be wrapped in <select> HTML tags.
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
<select name="country">
|
||||
{{ country_option_tags }}
|
||||
</select>
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
{% highlight html %}
|
||||
<select name="country">
|
||||
<option value"" data-provinces="[]">- Please Select --</option>
|
||||
...
|
||||
...
|
||||
<option value="Canada" data-provinces="["Alberta","British Columbia","Manitoba","New Brunswick","Newfoundland","Northwest Territories","Nova Scotia","Nunavut","Ontario","Prince Edward Island","Quebec","Saskatchewan","Yukon"]">Canada</option>
|
||||
<option value="China" data-provinces="[]">China</option>
|
||||
...
|
||||
...
|
||||
</select>
|
||||
{% endhighlight %}
|
||||
|
||||
26
_posts/objects/current-page.md
Normal file
26
_posts/objects/current-page.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
layout: default
|
||||
title: current_page
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# current_page
|
||||
|
||||
<code>current_page</code> returns the number of the page you are on when browsing through <a href="/themes/liquid-documentation/tags/theme-tags/#paginate">paginated</a> content. It can be used outside the <code>paginate</code> block.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ page_title }} - Page: {{ current_page }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Summer Collection - Page: 1
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
64
_posts/objects/current-tags.md
Normal file
64
_posts/objects/current-tags.md
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
layout: default
|
||||
title: current_tags
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# current_tags
|
||||
|
||||
Product tags are used to filter a collection to only show products that contain a specific product tag. Similarly, article tags are used to filter a blog to only show products that contain a specific article tag. The <code>current_tags</code> variable is an array that contains all tags that are being used to filter a collection or blog.
|
||||
|
||||
{% block "note-information" %}
|
||||
Tags inside the current_tags array will always display in alphabetical order. It is not possible to manually change the order.
|
||||
{% endblock %}
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Inside collection.liquid", "collection" %}
|
||||
|
||||
Inside collection.liquid, <code>current_tags</code> contains all <strong>product tags</strong> that are used to filter a collection.
|
||||
|
||||
The example below creates a list that displays every tag within every product in a collection. If the collection is filtered by the tag (i.e. if <code>current_tags</code> **does** contain the tag), the link will remove the filter. If the collection is not currently filtered by the tag (if <code>current_tags</code> **does not** contain the tag), a link will appear to allow the user to do so.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
<ul>
|
||||
{% for tag in collection.all_tags %}
|
||||
{% if current_tags contains tag %}
|
||||
<li class="active">{{ tag | link_to_remove_tag: tag }}</li>
|
||||
{% else %}
|
||||
<li>{{ tag | link_to_add_tag: tag }}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "Inside blog.liquid", "blog" %}
|
||||
|
||||
Inside blog.liquid, <code>current_tags</code> contains all <strong>article</strong> tags that are used to filter the blog.
|
||||
|
||||
The example below adds a breadcrumb that shows which article tag is being used to filter a blog. If there is a tag being used to filter a blog, the breadcrumb displays the tag name and provides a link back to the unfiltered blog.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% if current_tags %}
|
||||
<h1>{{ blog.title | link_to: blog.url }} » {{ current_tags.first }}</h1>
|
||||
{% else %}
|
||||
<h1>{{ blog.title }}</h1>
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
238
_posts/objects/customer-address.md
Normal file
238
_posts/objects/customer-address.md
Normal file
@@ -0,0 +1,238 @@
|
||||
---
|
||||
layout: default
|
||||
title: customer_address
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# customer_address
|
||||
|
||||
The <code>customer_address</code> contains information of addresses tied to a <a href="http://docs.shopify.com/manual/your-store/customers/customer-accounts">Customer Account</a>.
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.first_name", "first-name" %}
|
||||
|
||||
Returns the value of the First Name field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.last_name", "last-name" %}
|
||||
|
||||
Returns the value of the Last Name field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.address1", "customer_address-address1" %}
|
||||
|
||||
Returns the value of the Address1 field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.address2", "customer_address-address2" %}
|
||||
|
||||
Returns the value of the Address2 field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.street", "street" %}
|
||||
|
||||
Returns the combined values of the Address1 and Address2 fields of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shipping_address.street }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
126 York St, Shopify Office
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.company", "company" %}
|
||||
|
||||
Returns the value of the Company field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.city", "city" %}
|
||||
|
||||
Returns the value of the City field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.province", "province" %}
|
||||
|
||||
Returns the value of the Province/State field of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ customer_address.province }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Ontario
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.province_code", "province_code" %}
|
||||
|
||||
Returns the abbreviated value of the Province/State field of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ billing_address.province_code }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
ON
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.zip", "zip" %}
|
||||
|
||||
Returns the value of the Postal/Zip field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.country", "country" %}
|
||||
|
||||
Returns the value of the Country field of the address.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ customer_address.country }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Japan
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.country_code", "country-code" %}
|
||||
|
||||
Returns the value of the Country field of the address in ISO 3166-2 standard format.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ customer_address.country_code }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
CA
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.phone", "phone" %}
|
||||
|
||||
Returns the value of the Phone field of the address.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer_address.id", "id" %}
|
||||
|
||||
Returns the id of customer address.
|
||||
273
_posts/objects/customer.md
Normal file
273
_posts/objects/customer.md
Normal file
@@ -0,0 +1,273 @@
|
||||
---
|
||||
layout: default
|
||||
title: customer
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# customers
|
||||
|
||||
<p>The <code>customer</code> object contains information of customers who have created a <a href="http://docs.shopify.com/manual/your-store/customers/customer-accounts">Customer Account</a>.</p>
|
||||
|
||||
<p><code>customer</code> can also be accessed in order email templates, the Thank You page of the checkout, as well as in apps such as <a href="http://docs.shopify.com/manual/more/official-shopify-apps/order-printer">Order Printer</a>.</p>
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.accepts_marketing", "customer-accepts_marketing" %}
|
||||
|
||||
<p>Returns <code>true</code> if the customer accepts marketing, returns <code>false</code> if the customer does not.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.addresses", "customer-addresses" %}
|
||||
|
||||
Returns an array of all of the customer addresses associated with a customer. See <a href="/themes/liquid-documentation/objects/customer-address/">customer_address</a> for a full list of available attributes.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for address in customer.addresses %}
|
||||
{{ address.street }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
126 York St, Suite 200 (Shopify Office)
|
||||
123 Fake St
|
||||
53 Featherston Lane
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.addresses_count", "customer-addresses_count" %}
|
||||
|
||||
<p>Returns the number of addresses associated with a customer.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.default_address", "customer-default_address" %}
|
||||
|
||||
<p>Returns the default <a href="/themes/liquid-documentation/objects/customer-address/">customer_address</a> of a customer.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.email", "customer-email" %}
|
||||
|
||||
<p>Returns the email address of the customer.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.first_name", "customer-first_name" %}
|
||||
|
||||
<p>Returns the first name of the customer.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.id", "customer-id" %}
|
||||
|
||||
<p>Returns the id of the customer.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.last_name", "customer-last_name" %}
|
||||
|
||||
<p>Returns the last name of the customer.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.last_order", "customer-last_order" %}
|
||||
|
||||
<p>Returns the last <a href="/themes/liquid-documentation/objects/order/">order </a> placed by the customer. </p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Your last order was placed on: {{ customer.last_order.created_at | date: "%B %d, %Y %I:%M%p" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Your last order was placed on: April 25, 2014 01:49PM
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.name", "customer-name" %}
|
||||
|
||||
<p>Returns the full name of the customer.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.orders", "customer-orders" %}
|
||||
|
||||
<p>Returns an array of all <a href="/themes/liquid-documentation/objects/order/">orders</a> placed by the customer.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for order in customer.orders %}
|
||||
{{ order.id }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
#1088
|
||||
#1089
|
||||
#1090
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.orders_count", "customer-orders_count" %}
|
||||
|
||||
<p>Returns the total number of orders a customer has placed.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.recent_order", "customer-recent_order" %}
|
||||
|
||||
<p>Returns the most recent <a href="/themes/liquid-documentation/objects/order/">order </a> placed by the customer. </p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Your most recent order was placed on: {{ customer.recent_order.created_at | date: "%B %d, %Y %I:%M%p" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Your last order was placed on: August 25, 2014 05:49PM
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.tags", "customer-tags" %}
|
||||
|
||||
Returns the list of tags associated with the customer.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for tag in customer.tags %}
|
||||
{{ tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
wholesale regular-customer VIP
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "customer.total_spent", "customer-total_spent" %}
|
||||
|
||||
<p>Returns the total amount spent on all orders.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
111
_posts/objects/discount.md
Normal file
111
_posts/objects/discount.md
Normal file
@@ -0,0 +1,111 @@
|
||||
---
|
||||
layout: default
|
||||
title: discount
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# discount
|
||||
|
||||
The <code>discount</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "discount.id", "discount.id" %}
|
||||
|
||||
Returns the id of the discount.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "discount.code", "discount-code" %}
|
||||
|
||||
Returns the code of the discount.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ discount.code }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
SPRING14
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "discount.amount", "discount-amount" %}
|
||||
|
||||
Returns the amount of the discount. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ discount.amount | money }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
$25
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "discount.savings", "discount-savings" %}
|
||||
|
||||
Returns the amount of the discount's savings. The negative opposite of <a href="#discount.amount">amount</a>. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ discount.savings | money }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
$-25
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "discount.type", "discount-type" %}
|
||||
|
||||
Returns the type of the discount. The possible values of <code>discount.type</code> are:
|
||||
|
||||
- FixedAmountDiscount
|
||||
- PercentageDiscount
|
||||
- ShippingDiscount
|
||||
|
||||
|
||||
252
_posts/objects/for-loops.md
Normal file
252
_posts/objects/for-loops.md
Normal file
@@ -0,0 +1,252 @@
|
||||
---
|
||||
layout: default
|
||||
title: forloop
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# forloop
|
||||
|
||||
The <code>forloop</code> object contains attributes of its parent <a href="/themes/liquid-documentation/tags/iteration-tags/#for">for</a> loop.
|
||||
|
||||
|
||||
{% block "note-information" %}
|
||||
The <code>forloop</code> object can only be used within <a href="/themes/liquid-documentation/tags/iteration-tags/#for">for</a> tags.
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "forloop.first", "first" %}
|
||||
|
||||
Returns <code>true</code> if it's the first iteration of the for loop. Returns <code>false</code> if it is not the first iteration.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{% if forloop.first == true %}
|
||||
First time through!
|
||||
{% else %}
|
||||
Not the first time.
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
First time through!
|
||||
Not the first time.
|
||||
Not the first time.
|
||||
Not the first time.
|
||||
Not the first time.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "forloop.index", "index" %}
|
||||
|
||||
Returns the current index of the for loop, starting at 1.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{{ forloop.index }}
|
||||
{% endfor %}{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "forloop.index0", "index0" %}
|
||||
|
||||
Returns the current index of the for loop, starting at 0.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{{ forloop.index }}
|
||||
{% endfor %}{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "forloop.last", "last" %}
|
||||
|
||||
Returns <code>true</code> if it's the last iteration of the for loop. Returns <code>false</code> if it is not the last iteration.
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{% if forloop.last == true %}
|
||||
This is the last iteration!
|
||||
{% else %}
|
||||
Keep going...
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Keep going...
|
||||
Keep going...
|
||||
Keep going...
|
||||
Keep going...
|
||||
Keep going...
|
||||
This is the last iteration!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "forloop.rindex", "rindex" %}
|
||||
|
||||
Returns <a href="#index">forloop.index</a> in reverse order.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{{ forloop.rindex }}
|
||||
{% endfor %}{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "forloop.rindex0", "rindex0" %}
|
||||
|
||||
Returns <a href="#index0">forloop.index0</a> in reverse order.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{{ forloop.rindex0 }}
|
||||
{% endfor %}{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "forloop.length", "length" %}
|
||||
|
||||
<p>Returns the number of iterations of the for loop.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if collections.frontpage.products contains 10 products -->
|
||||
{% for product in collections.frontpage.products %}
|
||||
{% capture length %}{{ forloop.length }}{% endcapture %}
|
||||
{% endfor %}
|
||||
|
||||
{{ length }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
10
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
128
_posts/objects/form.md
Normal file
128
_posts/objects/form.md
Normal file
@@ -0,0 +1,128 @@
|
||||
---
|
||||
layout: default
|
||||
title: form
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# form
|
||||
|
||||
The <code>form</code> object is used within the <a href="/themes/liquid-documentation/tags/theme-tags/#form">form</a> tag. It contains attributes of its parent form.
|
||||
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "form.author", "form-author" %}
|
||||
|
||||
<p>Returns the name of the author of the blog article comment. Exclusive to <code>form</code> tags with the "article" parameter.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "form.body", "form-body" %}
|
||||
|
||||
<p>Returns the content of the blog article comment. Exclusive to <code>form</code> tags with the "article" parameter.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "form.email", "form-email" %}
|
||||
|
||||
<p>Returns the email of the blog article comment's author. Exclusive to <code>form</code> tags with the "article" parameter.</p>
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "form.errors", "form-errors" %}
|
||||
|
||||
Returns an array of strings if the form was not submitted successfully. The strings returned depend on which fields of the form were left empty or contained errors. Possible values are:
|
||||
|
||||
- author
|
||||
- body
|
||||
- email
|
||||
- form
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for error in form.errors %}
|
||||
{{ error }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if the Name field was left empty by the user -->
|
||||
author
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
You can apply the <a href="/themes/liquid-documentation/filters/additional-filters/#default_errors">default_errors</a> filter on <code>form.errors</code> to output default error messages without having to loop through the array.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if form.errors %}
|
||||
{{ form.errors | default_errors }}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Please enter a valid email address.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "form.posted_successfully?", "form-posted_successfully" %}
|
||||
|
||||
<p>Returns <code>true</code> if a comment by the user was submitted successfully, or <code>false</code> if the form contained errors.</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if form.posted_successfully? %}
|
||||
Comment posted successfully!
|
||||
{% else %}
|
||||
{{ form.errors | default_errors }}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
93
_posts/objects/fulfillment.md
Normal file
93
_posts/objects/fulfillment.md
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
layout: default
|
||||
title: fulfillment
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# fulfillment
|
||||
|
||||
The <code>fulfillment</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% comment %} Commenting out as this doesn't actually work.
|
||||
|
||||
{% anchor_link "fulfillment.created_at", "fulfillment.created_at" %}
|
||||
|
||||
<p>Returns the date the fulfillment was created at.</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Fulfilled {{ line_item.fulfillment.created_at | date: "%b %d" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "fulfillment.tracking_company", "fulfillment-tracking_company" %}
|
||||
|
||||
<p>Returns the name of the fulfillment service.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "fulfillment.tracking_number", "fulfillment-tracking_number" %}
|
||||
|
||||
<p>Returns the tracking number for a fulfillment if it exists.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Tracking Number: {{ line_item.fulfillment.tracking_number }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Tracking Number: 1Z5F44813600X02768
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "fulfillment.tracking_url", "fulfillment-tracking_url" %}
|
||||
|
||||
<p>Returns the URL for a tracking number.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ fulfillment.tracking_url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
http://wwwapps.ups.com/etracking/tracking.cgi?InquiryNumber1=1Z5F44813600X02768&TypeOfInquiryNumber=T&AcceptUPSLicenseAgreement=yes&submit=Track
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
162
_posts/objects/gift-card.md
Normal file
162
_posts/objects/gift-card.md
Normal file
@@ -0,0 +1,162 @@
|
||||
---
|
||||
layout: default
|
||||
title: gift_card
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# gift_card
|
||||
|
||||
The <code>gift_card</code> object can be accessed in the following templates:
|
||||
|
||||
1. The Gift Card Notification email notification template [Email Notifications > Gift Card Notification](http://shopify.com/admin/settings/notifications)
|
||||
|
||||
2. The [**gift_card.liquid**](/themes/theme-development/templates/gift-cards-liquid/) template.
|
||||
|
||||
The <code>gift_card</code> variable has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.balance", "gift_card-balance" %}
|
||||
|
||||
<p>Returns the amount of money remaining on the gift card.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.code", "gift_card-code" %}
|
||||
|
||||
<p>Returns the code that was used to redeem the gift card.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.currency", "gift_card-currency" %}
|
||||
|
||||
<p>Returns the currency that the card was issued in.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.customer", "gift_card-customer" %}
|
||||
|
||||
Returns the <a href="/themes/liquid-documentation/objects/customer/">customer</a> variable of the customer that the gift card is assigned to.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hey, {{ gift_card.customer.first_name }}!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hey, John!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.enabled", "gift_card-enabled" %}
|
||||
|
||||
<p>Returns <code>true</code> if the card is enabled, or <code>false</code> if the card is disabled.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.expired", "gift_card-expired" %}
|
||||
|
||||
<p>Returns <code>true</code> if the card is expired, or <code>false</code> if the card is not.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.expires_on", "gift_card-expires_on" %}
|
||||
|
||||
<p>Returns the expiration date of the gift card</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.initial_value", "gift_card-initial_value" %}
|
||||
|
||||
<p>Returns the initial amount of money on the gift card.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.properties", "gift_card-properties" %}
|
||||
|
||||
<p>Returns the <a href="http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization">line item properties</a> assigned to the gift card when it was added to the cart.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "gift_card.url", "gift_card-url" %}
|
||||
|
||||
<p>Returns the unique URL that links to the gift card's page on the shop (rendered through <strong>gift_card.liquid</strong>).</p>
|
||||
|
||||
|
||||
|
||||
|
||||
112
_posts/objects/image.md
Normal file
112
_posts/objects/image.md
Normal file
@@ -0,0 +1,112 @@
|
||||
---
|
||||
layout: default
|
||||
title: image
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# image
|
||||
|
||||
The <code>image</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "image.alt", "image-alt" %}
|
||||
|
||||
<p>Returns the alt tag of the image, set in the <a href="http://docs.shopify.com/support/your-store/products/can-i-add-alt-text-to-my-product-images">Products</a> page of the Admin.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "image.id", "image-id" %}
|
||||
|
||||
Returns the id of the image.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "image.product_id", "image-product_id" %}
|
||||
|
||||
Returns the id of the image's product.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "image.position", "image-position" %}
|
||||
|
||||
Returns the position of the image, starting at 1. This is the same as outputting <a href="/themes/liquid-documentation/objects/for-loops/#index">forloop.index</a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "image.src", "image-src" %}
|
||||
|
||||
Returns the relative path of the product image. This is the same as outputting <code>{{ image }}</code>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for image in product.images %}
|
||||
{{ image.src }}
|
||||
{{ image }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
products/my_image.jpg
|
||||
products/my_image.jpg
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
To return the URL of the image on Shopify's Content Delivery Network (CDN), use the appropriate <a href="/themes/liquid-documentation/filters/url-filters">URL filter</a>.
|
||||
|
||||
To see a full list of available image sizes, see <a href="/themes/liquid-documentation/filters/url-filters/#size-parameters">image size parameters</a>.
|
||||
|
||||
Shown below is an example of loading a product image using the <code>product_img_url</code> filter.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ image | product_img_url: "medium" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
235
_posts/objects/index.md
Normal file
235
_posts/objects/index.md
Normal file
@@ -0,0 +1,235 @@
|
||||
---
|
||||
layout: default
|
||||
title: Objects
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 2
|
||||
---
|
||||
|
||||
# Objects
|
||||
|
||||
Liquid objects contain attributes to output dynamic content on the page. For example, the <code>product</code> object contains an attribute called <code>title</code> that can be used to output the title of a product.
|
||||
|
||||
**Liquid objects** are also often refered to as **Liquid variables**.
|
||||
|
||||
To output an object's attribute on the page, wrap them in <code>{{</code> and <code>}}</code>, as shown below:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.title }} <!-- Output: “Awesome Shoes” -->
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id='global-objects'>Global Objects</h2>
|
||||
|
||||
The following objects can be used and accessed from **any file** in your theme, and are defined as **global objects**, or global variables:
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><pre>blogs</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<ul>
|
||||
{% for article in blogs.myblog.articles %}
|
||||
<li>{{ article.title | link_to: article.url }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>blogs</code> refers to the blogs in your shop. <a href="/themes/liquid-documentation/objects/blog">More info ›</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>cart</pre></td>
|
||||
<td>
|
||||
<div></div>
|
||||
<p>The liquid object <code>cart</code> refers to the cart in your shop. <a href="/themes/liquid-documentation/objects/cart">More info ›</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>collections</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collections.frontpage.products %}
|
||||
{{ product.title }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>collections</code> contains a list of all of the collections in a shop. <a href="/themes/liquid-documentation/objects/collection">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>current_page</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if current_page != 1 %} Page {{ current_page }}{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The <code>current_page</code> object returns the number of the page you are on when browsing through paginated content. <a href="/themes/liquid-documentation/objects/current-page">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>current_tags</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- in blog.liquid -->
|
||||
{% if current_tags %}
|
||||
<h1>{{ blog.title | link_to: blog.url }} › {{ current_tags.first }}</h1>
|
||||
{% else %}
|
||||
<h1>{{ blog.title }}</h1>
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The <code>current_tags</code> object will contain a different list of tags depending on the type of template that is rendered. <a href="/themes/liquid-documentation/objects/current-tags">More info ›</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>customer</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if shop.customer_accounts_enabled %}
|
||||
{% if customer %}
|
||||
<a href="/account">My Account</a>
|
||||
{{ 'Log out' | customer_logout_link }}
|
||||
{% else %}
|
||||
{{ 'Log in' | customer_login_link }}
|
||||
{% if shop.customer_accounts_optional %}
|
||||
{{ 'Create an account' | customer_register_link }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>customer</code> is only defined when a customer is logged-in to the store. <a href="/themes/liquid-documentation/objects/customer">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>linklists</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<ul>
|
||||
{% for link in linklists.categories.links %}
|
||||
<li>{{ link.title | link_to: link.url }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endraw %}{% endhighlight%}
|
||||
</div>
|
||||
<p>The liquid object <code>linklists</code> contains a collection of all of the links in your shop. You can access a linklist by calling its handle on linklists. <a href="/themes/liquid-documentation/objects/linklist">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>pages</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<h1>{{ pages.about.title }}</h1>
|
||||
<p>{{ pages.about.author }} says...</p>
|
||||
<div>{{ pages.about.content }}</div>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>pages</code> refers to all of the pages in your shop. <a href="/themes/liquid-documentation/objects/page">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>page_description</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if page_description %}
|
||||
<meta name="description" content="{{ page_description }}" />
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>Merchants can specify a <code>page_description</code>. That field is automatically populated with the product/collection/article description. <a href="/themes/liquid-documentation/objects/page-description">More info ›</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>page_title</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ page_title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>page_title</code> returns the title of the current page. <a href="/themes/liquid-documentation/objects/page-title">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>shop</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
</div>
|
||||
<p>The liquid object <code>shop</code> returns information about your shop. <a href="/themes/liquid-documentation/objects/shop">More info ›</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>template</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if template contains 'product' %}
|
||||
WE ARE ON A PRODUCT PAGE.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>template</code> returns the name of the template used to render the current page, with the .liquid extension omitted. As a best practice, it is recommended that you use the template object as a body class. <a href="/themes/liquid-documentation/objects/template">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>settings</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if settings.use_logo %}
|
||||
{{ 'logo.png' | asset_url | img_tag: shop.name }}
|
||||
{% else %}
|
||||
<span class="no-logo">{{ shop.name }}</span>
|
||||
{% endif %}
|
||||
{% if settings.featured_collection and settings.featured_collection != '' and collections[settings.featured_collection].handle == settings.featured_collection and collections[settings.featured_collection].products_count > 0 %}
|
||||
{% for product in collections[settings.featured_collection].products %}
|
||||
{% include 'product-loop' %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>settings</code> gives you access to all of the theme settings. <a href="/themes/theme-development/templates/settings#settings-object">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><pre>theme</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Go to your <a href="/admin/themes/{{ theme.id }}/settings">theme settings</a>.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>theme</code> represents the currently active theme. <a href="/themes/liquid-documentation/objects/theme">More info ›</a></p></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><pre>themes</pre></td>
|
||||
<td>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
We have a beautiful mobile theme, it's called {{ themes.mobile.name | link_to_theme: "mobile" }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
<p>The liquid object <code>themes</code> provides access to the shop's published themes. <a href="/themes/liquid-documentation/objects/theme">More info ›</a></p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
238
_posts/objects/line_item.md
Normal file
238
_posts/objects/line_item.md
Normal file
@@ -0,0 +1,238 @@
|
||||
---
|
||||
layout: default
|
||||
title: line_item
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# line_item
|
||||
|
||||
A <strong>line item</strong> represents a single line in the shopping cart. There is one line item for each distinct product variant in the cart.
|
||||
|
||||
The <code>line_item</code> object can be accessed in all Liquid templates, as well as in notification email templates, the Thank You page of the checkout, as well as in apps such as [Order Printer](http://docs.shopify.com/manual/more/official-shopify-apps/order-printer).
|
||||
|
||||
The <code>line_item</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.id", "line-id" %}
|
||||
|
||||
Returns the id of the line item, which is the same as the id of its [variant](/themes/liquid-documentation/objects/variant/).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.product", "product" %}
|
||||
|
||||
Returns the [product](/themes/liquid-documentation/objects/product/) of the line item.
|
||||
|
||||
Example for getting a line item's image:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{{ line_item.product.featured_image | product_img_url | img_tag }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.variant", "variant" %}
|
||||
|
||||
Returns the [variant](/themes/liquid-documentation/objects/variant/) of the line item.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.title", "title" %}
|
||||
|
||||
Returns the title of this line item. <code>line_item.title</code> combines both the line item's <code>product.title</code> and the line item's <code>variant.title</code>, separated by a hyphen.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ line_item.title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Balloon Shirt - Medium
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
To output just the product title or variant title, you can access the <code>title</code> of the respective variables.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Product Title: {{ line_item.product.title }}
|
||||
Variant Title: {{ line_item.variant.title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Product Title: Balloon Shirt
|
||||
Variant Title: Medium
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.price", "price" %}
|
||||
|
||||
Returns the price of the line item's variant.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.line_price", "line-price" %}
|
||||
|
||||
Returns the combined price of all the items in the line_item. This is the equivalent of <code>line_item.price</code> times <code>line_item.quantity</code>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.quantity", "quantity" %}
|
||||
|
||||
Returns the quantity of the line item.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.grams", "grams" %}
|
||||
|
||||
Returns the weight of the line item. Use the [weight_with_unit](/themes/liquid-documentation/filters/additional-filters/#weight_with_unit) filter to format the weight.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.sku", "sku" %}
|
||||
|
||||
Returns the SKU of the line item's variant.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.vendor", "vendor" %}
|
||||
|
||||
Returns the vendor name of the line item's product.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.requires_shipping", "requires-shipping" %}
|
||||
|
||||
Returns <code>true</code> if the line item requires shipping, or <code>false</code> if it does not. This is set in the variant options in the Products page of the Admin.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.variant_id", "variant-id" %}
|
||||
|
||||
Returns the id of the line item's variant.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.product_id", "product-id" %}
|
||||
|
||||
Returns the id of the line item's product.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "line_item.fulfillment", "fulfillment" %}
|
||||
|
||||
Returns the [fulfillment](/themes/liquid-documentation/objects/fulfillment/) of the line item.
|
||||
|
||||
|
||||
|
||||
|
||||
107
_posts/objects/link.md
Normal file
107
_posts/objects/link.md
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
layout: default
|
||||
title: link
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# link
|
||||
|
||||
The <code>link</code> object cannot be invoked on its own. It must be invoked inside a <a href="/themes/liquid-documentation/objects/linklist/">linklist</a>.
|
||||
|
||||
The <code>link</code> object has the following attributes:
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
{% anchor_link "link.active", "link-active" %}
|
||||
|
||||
<p>Returns <code>true</code> if the link is active, or <code>false</code> if the link is inactive.</p>
|
||||
|
||||
<p>If you are on a product page that is <a href="/themes/liquid-documentation/filters/url-filters/#within">collection-aware</a>, <code>link.active</code>will return <code>true</code> for both the collection-aware product URL and the collection-agnostic URL. For example, if you have a link whose URL points to:</p>
|
||||
|
||||
<div>{% highlight html %}{% raw %}
|
||||
/products/awesome-product
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p><code>link.active</code> will return <code>true</code> for the following URL, which links to the same product but through a collection:
|
||||
|
||||
<div>{% highlight html %}{% raw %}
|
||||
/collections/awesome-collection/products/awesome-product
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p>If you are on a collection page filtered with tags, and the link points to the unfiltered collection page, <code>link.active</code> will return <code>true</code>.</p>
|
||||
|
||||
<p>If you are on an article page and your link points to the blog, <code> link.active</code> will return <code>true</code>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link.object", "link-object" %}
|
||||
|
||||
Returns the variable associated to the link. The type of variable that is returned is dependent on the value of <strong>Links To</strong> field of the link. The possible types are:
|
||||
|
||||
- <a href="/themes/liquid-documentation/objects/product/">product</a>
|
||||
- <a href="/themes/liquid-documentation/objects/collection/">collection</a>
|
||||
- <a href="/themes/liquid-documentation/objects/page/">page</a>
|
||||
- <a href="/themes/liquid-documentation/objects/blog/">blog</a>
|
||||
|
||||
Through <code>link.object</code>, you can access any of the attributes that are available in the above three variables.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
<!-- If the product links to a product with a price of $10 -->
|
||||
{{ link.object.price | money }}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
$10
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link.title", "link-title" %}
|
||||
|
||||
<p>Returns the title of the link.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link.type", "link-type" %}
|
||||
|
||||
Returns the type of the link. The possible values are:
|
||||
|
||||
- <strong>collection_link</strong>: if the link points to a collection
|
||||
- <strong>product_link</strong>: if the link points to a product page
|
||||
- <strong>page_link</strong>: if the link points to a page
|
||||
- <strong>blog_link</strong>: if the link points to a blog
|
||||
- <strong>relative_link</strong>: if the link points to the search page, the home page or /collections/all
|
||||
- <strong>http_link</strong>: if the link points to an external web page, or a type or vendor collection (ex: /collections/types?q=Pants)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "link.url", "link-url" %}
|
||||
|
||||
<p>Returns the URL of the link.</p>
|
||||
|
||||
|
||||
80
_posts/objects/linklist.md
Normal file
80
_posts/objects/linklist.md
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
layout: default
|
||||
title: linklist
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# linklist
|
||||
|
||||
|
||||
The <code>linklist</code> object has the following attributes:
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "linklist.handle", "linklist-handle" %}
|
||||
|
||||
<p>Returns the <a href="/themes/liquid-documentation/basics/handle/">handle</a> of the linklist.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "linklist.id", "linklist-id" %}
|
||||
|
||||
<p>Returns the id of the linklist.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "linklist.links", "linklist-links" %}
|
||||
|
||||
<p>Returns an array of <a href="/themes/liquid-documentation/objects/link/">links</a> in the linklist.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for link in linklists.main-menu.links %}
|
||||
<a href="{{ link.url }}">{{ link.title }}</a>
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/">Home</a>
|
||||
<a href="/collections/all">Catalog</a>
|
||||
<a href="/blogs/news">Blog</a>
|
||||
<a href="/pages/about-us">About Us</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "linklist.title", "linklist-title" %}
|
||||
|
||||
<p>Returns the title of the linklist.</p>
|
||||
|
||||
|
||||
100
_posts/objects/metafield.md
Normal file
100
_posts/objects/metafield.md
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
layout: default
|
||||
title: metafield
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# metafields
|
||||
|
||||
The <code>metafields</code> object allows you to store additional information for products, collections, orders, blogs, pages and your shop. You can output metafields on your storefront using Liquid.
|
||||
|
||||
There are several Shopify apps and browser add-ons that make use of the [Shopify API](/api/metafield) to let you manage your metafields:
|
||||
|
||||
* [Shopify FD](http://shopify.freakdesign.com.au/#ShopifyFD) to create and edit metafields
|
||||
* [Custom Fields](http://shopify.freakdesign.com.au/#customfields) to edit your metafields
|
||||
* [Metafields Editor](http://apps.shopify.com/metafields-editor)
|
||||
* [Metafields2](http://apps.shopify.com/metafields2)
|
||||
|
||||
A metafield consists of a namespace, a key, a value, and a description (optional). Use the namespace to group different metafields together in a logical way.
|
||||
|
||||
You can also specify metafields as either integers or strings. That way, you’ll end up with the right type of data when you use the metafields in your Liquid.
|
||||
|
||||
For example, if you’ve added two metafields to a product, and each metafield has the following attributes:
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Namespace</th>
|
||||
<th>Key</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>instructions</td>
|
||||
<td>Wash</td>
|
||||
<td>Cold</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>instructions</td>
|
||||
<td>Dry</td>
|
||||
<td>Tumble</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
You can then use the following Liquid in <tt>product.liquid</tt> to output your metafield:
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}
|
||||
{% raw %}
|
||||
{% assign instructions = product.metafields.instructions %}
|
||||
{% assign key = 'Wash' %}
|
||||
<ul>
|
||||
<li>Wash: {{ instructions[key] }}</li>
|
||||
<li>Wash: {{ instructions['Wash'] }}</li>
|
||||
<li>Wash: {{ instructions.Wash }}</li>
|
||||
</ul>
|
||||
{% endraw %}
|
||||
{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
{% highlight html %}
|
||||
Wash: Cold
|
||||
Wash: Cold
|
||||
Wash: Cold
|
||||
{% endhighlight %}
|
||||
|
||||
You can use the following in <tt>product.liquid</tt> to output your second metafield:
|
||||
|
||||
{% highlight html %}
|
||||
{% raw %}
|
||||
{% assign instructions = product.metafields.instructions %}
|
||||
{% assign key = 'Dry' %}
|
||||
<ul>
|
||||
<li>Dry: {{ instructions[key] }}</li>
|
||||
<li>Dry: {{ instructions['Dry'] }}</li>
|
||||
<li>Dry: {{ instructions.Dry }}</li>
|
||||
</ul>
|
||||
{% endraw %}
|
||||
{% endhighlight %}
|
||||
|
||||
If you need to output all metafields with the namespace _instructions_ attached to a given product, use the following Liquid:
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}
|
||||
{% raw %}
|
||||
<ul>
|
||||
{% for field in product.metafields.instructions %}
|
||||
<li>{{ field | first }}: {{ field | last }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endraw %}
|
||||
{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
{% highlight html %}
|
||||
Wash: Cold
|
||||
Dry: Tumble
|
||||
{% endhighlight %}
|
||||
|
||||
The key of a metafield is <code>{% raw %}{{ field | first }}{% endraw %}</code>, while the value is <code>{% raw %}{{ field | last }}{% endraw %}</code>.
|
||||
349
_posts/objects/order.md
Normal file
349
_posts/objects/order.md
Normal file
@@ -0,0 +1,349 @@
|
||||
---
|
||||
layout: default
|
||||
title: order
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# order
|
||||
|
||||
The <code>order</code> object can be accessed in order email templates, the Thank You page of the checkout, as well as in apps such as <a href="http://docs.shopify.com/manual/more/official-shopify-apps/order-printer">Order Printer</a>.
|
||||
|
||||
The <code>order</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "order.billing_address", "order-billing_address" %}
|
||||
|
||||
Returns the billing <a href="/themes/liquid-documentation/objects/address/">address</a> of the order.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.cancelled", "order-cancelled" %}
|
||||
|
||||
<p>Returns <code>true</code> if an order is cancelled, returns <code>false</code>if it not.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.cancelled_at", "order-cancelled_at" %}
|
||||
|
||||
<p>Returns the timestamp of when an order was cancelled. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#date">date</a> filter to format the timestamp.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.cancel_reason", "order-cancel_reason" %}
|
||||
|
||||
<p>Returns the cancellation reason of an order, if it was cancelled.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.created_at", "order-created_at" %}
|
||||
|
||||
<p>Returns the timestamp of when an order was created. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#date">date</a> filter to format the timestamp.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.customer", "order-customer" %}
|
||||
|
||||
<p>Returns the <a href="/themes/liquid-documentation/objects/customer/">customer</a> associated to the order.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.customer_url", "order-customer_url" %}
|
||||
|
||||
<p>Returns the URL of the customer's account page.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
{{ order.name | link_to: order.customer_url }}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
http://john-apparel.myshopify.com/account/orders/d94ec4a1956f423dc4907167c9ef0413
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.discounts", "order-discounts" %}
|
||||
|
||||
<p>Returns an array of <a href="/themes/liquid-documentation/objects/discount/">discounts</a> for an order.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
{% for discount in order.discounts %}
|
||||
Code: {{ discount.code }}
|
||||
Savings: {{ discount.savings | money }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
Code: SUMMER2014
|
||||
Savings: -€50
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.email", "order-email" %}
|
||||
|
||||
<p>Returns the email associated with an order.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.financial_status", "order-financial_status" %}
|
||||
|
||||
<p>Returns the financial status of an order. The possible values are:</p>
|
||||
|
||||
- pending
|
||||
- authorized
|
||||
- paid
|
||||
- partially_paid
|
||||
- refunded
|
||||
- partially_refunded
|
||||
- voided
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.fulfillment_status", "order-fulfillment_status" %}
|
||||
|
||||
<p>Returns the fulfillment status of an order.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.line_items", "order-line_items" %}
|
||||
|
||||
<p>Returns an array of <a href="/themes/liquid-documentation/objects/line_item/">line items</a> from the order.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.location", "order-location" %}
|
||||
|
||||
<p><strong>POS Only</strong>. Displays the physical location of the order. You can configure locations in the <a href="http://shopify.com/admin/settings/locations">Locations settings</a> of the admin.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.name", "order-name" %}
|
||||
|
||||
Returns the name of the order, in the format set in the <strong>Standards & formats</strong> section of the <a href="/admin/settings/general">General Settings</a>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
{{ order.name }}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
#1025
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.order_number", "order-order_number" %}
|
||||
|
||||
<p>Returns the integer representation of the order name.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
{{ order.order_number }}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
1025
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.shipping_address", "order-shipping_address" %}
|
||||
|
||||
Returns the shipping <a href="/themes/liquid-documentation/objects/address/">address</a> of the order.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.shipping_methods", "order-shipping_methods" %}
|
||||
|
||||
Returns an array of <a href="/themes/liquid-documentation/objects/shipping_method/">shipping_method</a> variables from the order.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.shipping_price", "order-shipping_price" %}
|
||||
|
||||
<p>Returns the shipping price of an order. Use a <a href="/themes/liquid-documentation/filters/money-filters/">money filter</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.subtotal_price", "order-subtotal_price" %}
|
||||
|
||||
<p>Returns the subtotal price of an order. Use a <a href="/themes/liquid-documentation/filters/money-filters/">money filter</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.tax_lines", "order-tax_lines" %}
|
||||
|
||||
<p>Returns an array of <a href="/themes/liquid-documentation/objects/tax_line/">tax_line</a> variables for an order.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
{% for tax_line in order.tax_lines %}
|
||||
Tax ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%):
|
||||
{{ tax_line.price | money }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
Tax (GST 14.0%): $25
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.tax_price", "order-tax_price" %}
|
||||
|
||||
<p>Returns the order's tax price. Use a <a href="/themes/liquid-documentation/filters/money-filters/">money filter</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.total_price", "order-total_price" %}
|
||||
|
||||
<p>Returns the total price of an order. Use a <a href="/themes/liquid-documentation/filters/money-filters/">money filter</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "order.transactions", "order-transactions" %}
|
||||
|
||||
<p>Returns an array of <a href="/themes/liquid-documentation/objects/transaction/">transactions</a> from the order.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
38
_posts/objects/page-description.md
Normal file
38
_posts/objects/page-description.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
layout: default
|
||||
title: page_description
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# page_description
|
||||
|
||||
Returns the description of a **Product**, **Page**, or **Blog Article**, set in their respective Admin pages.
|
||||
|
||||
{{ '/themes/page_desc.jpg' | image }}
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ page_description }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
This is my About Us page!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
39
_posts/objects/page-title.md
Normal file
39
_posts/objects/page-title.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
layout: default
|
||||
title: page_title
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# page_title
|
||||
|
||||
Returns the title of a **Product**, **Page**, or **Blog Article**, set in their respective Admin pages.
|
||||
|
||||
{{ '/themes/page_title.jpg' | image }}
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ page_title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
About Us
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
146
_posts/objects/page.md
Normal file
146
_posts/objects/page.md
Normal file
@@ -0,0 +1,146 @@
|
||||
---
|
||||
layout: default
|
||||
title: page
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# page
|
||||
|
||||
The <code>page</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.author", "page.author" %}
|
||||
|
||||
<p>Returns the author of a page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.content", "page-content" %}
|
||||
|
||||
<p>Returns the content of a page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.handle", "page-handle" %}
|
||||
|
||||
<p>Returns the <a href="/themes/liquid-documentation/basics/handle/">handle</a> of the page. </p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.id", "page-id" %}
|
||||
|
||||
<p>Returns the id of the page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.published_at", "page-published_at" %}
|
||||
|
||||
Returns the timestamp of when the page was created. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#date">date</a> filter to format the timestamp.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.template_suffix", "page-template_suffix" %}
|
||||
|
||||
Returns the name of the custom page template assigned to the page, without the <code>page.</code> prefix nor the <code>.liquid</code> suffix. Returns <code>nil</code> if a custom template is not assigned to the page.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- on page.contact.liquid -->
|
||||
{{ page.template_suffix }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
contact
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.title", "page-title" %}
|
||||
|
||||
<p>Returns the title of a page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "page.url", "page-url" %}
|
||||
|
||||
<p>Returns the relative URL of the page.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ page.url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
/pages/about-us
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
161
_posts/objects/paginate.md
Normal file
161
_posts/objects/paginate.md
Normal file
@@ -0,0 +1,161 @@
|
||||
---
|
||||
layout: default
|
||||
title: paginate
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# paginate
|
||||
|
||||
The <a href="/themes/liquid-documentation/tags/theme-tags/#paginate">paginate</a> tag's navigation is built using the attributes of the <code>paginate</code> object. You can also use the <a href="/themes/liquid-documentation/filters/additional-filters/#default_pagination">default_pagination</a> filter for a quicker alternative.
|
||||
|
||||
{% block "note-information" %}
|
||||
The <code>paginate</code> object can only be used within <a href="/themes/liquid-documentation/tags/theme-tags/#paginate">paginate</a> tags.
|
||||
{% endblock %}
|
||||
|
||||
|
||||
The <code>paginate</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.current_page", "paginate-current_page" %}
|
||||
|
||||
<p>Returns the number of the current page.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.current_offset", "paginate-current_offset" %}
|
||||
|
||||
<p>Returns the total number of items that are on the pages previous to the current one. For example, if you are paginating by 5 and are on the third page, <code>paginate.current_offset</code> would return <code>10</code>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.items", "paginate-items" %}
|
||||
|
||||
<p>Returns the total number of items to be paginated. For example, if you are paginating a collection of 120 products, <code>paginate.items</code> would return <code>120</code>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.parts", "paginate-parts" %}
|
||||
|
||||
<p>Returns an array of all <a href="/themes/liquid-documentation/objects/part/">parts</a> of the pagination. A <code>part</code> is a component used to build the navigation for the pagination.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.next", "paginate-next" %}
|
||||
|
||||
Returns the <a href="/themes/liquid-documentation/objects/part/">part</a> variable for the <strong>Next</strong> link in the pagination navigation.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
{% if paginate.next.is_link %}
|
||||
<a href="{{ paginate.next.url }}">{{ paginate.next.title }}</a>
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
<!-- If we're not on the last page, and there still needs to be a Next link -->
|
||||
<a href="/collections/all?page=17">Next »</a>
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.previous", "paginate-previous" %}
|
||||
|
||||
Returns the <a href="/themes/liquid-documentation/objects/part/">part</a> variable for the <strong>Previous</strong> link in the pagination navigation.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
{% if paginate.previous.is_link %}
|
||||
<a href="{{ paginate.previous.url }}">{{ paginate.previous.title }}</a>
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>{% highlight html %}{% raw %}
|
||||
<!-- If we're not on the first page, and there still needs to be a Previous link -->
|
||||
<a href="/collections/all?page=15">« Previous</a>
|
||||
{% endraw %}{% endhighlight %}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.page_size", "paginate-page_size" %}
|
||||
|
||||
Returns the number of items displayed per page.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate.pages", "paginate-pages" %}
|
||||
|
||||
Returns the number of pages created by the pagination tag.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
87
_posts/objects/part.md
Normal file
87
_posts/objects/part.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
layout: default
|
||||
title: part
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# part
|
||||
|
||||
Each <code>part</code> returned by the <a href="/themes/liquid-documentation/objects/paginate/#paginate.parts">paginate.parts</a> array represents a link in the pagination's navigation.
|
||||
|
||||
{% block "note-information" %}
|
||||
The <code>part</code> object is only accessible through the <a href="/themes/liquid-documentation/objects/paginate">paginate</a> object, and can only be used within <a href="/themes/liquid-documentation/tags/theme-tags/#paginate">paginate</a> tags.
|
||||
{% endblock %}
|
||||
|
||||
The example below shows how the <code>part</code> object's attributes can be accessed through a for loop that goes through the <code>paginate.parts</code> array.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for part in paginate.parts %}
|
||||
{% if part.is_link %}
|
||||
{{ part.title | link_to: part.url}}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<a href="/collections/frontpage?page=1" title="">1</a>
|
||||
<a href="/collections/frontpage?page=2" title="">2</a>
|
||||
<a href="/collections/frontpage?page=3" title="">3</a>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
The <code>part</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "part.is_link", "part-is_link" %}
|
||||
|
||||
Returns <code>true</code> if the part is a link, returns <code>false</code> if it is not.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "part.title", "part-title" %}
|
||||
|
||||
Returns the title of the part.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "part.url", "part-url" %}
|
||||
|
||||
Returns the URL of the part.
|
||||
|
||||
421
_posts/objects/product.md
Normal file
421
_posts/objects/product.md
Normal file
@@ -0,0 +1,421 @@
|
||||
---
|
||||
layout: default
|
||||
title: product
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# product
|
||||
|
||||
The <code>product</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.available", "product-available" %}
|
||||
|
||||
<p>Returns <code>true</code> if a product is available for purchase. Returns <code>false</code>if all of the products variants' <a href="/themes/liquid-documentation/objects/variant/#variant.inventory_quantity">inventory_quantity</a> values are zero or less, and their <a href="/themes/liquid-documentation/objects/variant/#variant.inventory_policy">inventory_policy</a> is not set to "Allow users to purchase this item, even if it is no longer in stock."</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.collections", "product-collections" %}
|
||||
|
||||
<p>Returns an array of all of the <a href="/themes/liquid-documentation/objects/collection/">collections</a> a product belongs to.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
This product belongs in the following collections:
|
||||
|
||||
{% for collection in product.collections %}
|
||||
{{ collection.title }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
This product belongs in the following collections:
|
||||
|
||||
Sale
|
||||
Shirts
|
||||
Spring
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.compare_at_price_max", "product-compare_at_price_max" %}
|
||||
|
||||
<p>Returns the highest <strong>compare at</strong> price. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.compare_at_price_min", "product-compare_at_price_min" %}
|
||||
|
||||
<p>Returns the lowest <strong>compare at</strong> price. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.compare_at_price_varies", "product-compare_at_price_varies" %}
|
||||
|
||||
<p>Returns <code>true</code> if the <code>compare_at_price_min</code> is different from the <code>compare_at_price_max</code>. Returns <code>false</code> if they are the same.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.content", "product-content" %}
|
||||
|
||||
<p>Returns the description of the product. Alias for <a href="#product.description">product.description</a>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.description", "product-description" %}
|
||||
|
||||
<p>Returns the description of the product.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.featured_image", "product-featured_image" %}
|
||||
|
||||
<p>Returns the relative URL of the product's featured <a href="/themes/liquid-documentation/objects/image/">image</a>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.handle", "product-handle" %}
|
||||
|
||||
Returns the <a href="/themes/liquid-documentation/basics/handle/">handle</a> of a product.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.id", "product-id" %}
|
||||
|
||||
<p>Returns the id of the product.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.images", "product-images" %}
|
||||
|
||||
Returns an array of the product's <a href="/themes/liquid-documentation/objects/image/">images</a>. Use the <a href="/themes/liquid-documentation/filters/url-filters/#product_img_url">product_img_url</a> filter to link to the product image on Shopify's Content Delivery Network.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for image in product.images %}
|
||||
<img src="{{ image.src | product_img_url: 'medium' }}">
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<img src="//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311" />
|
||||
<img src="http://cdn.shopify.com/s/files/1/0087/0462/products/nice_shirt_medium.jpeg?v=1331480777">
|
||||
<img src="http://cdn.shopify.com/s/files/1/0087/0462/products/aloha_shirt_medium.jpeg?v=1331481001">
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.options", "product-options" %}
|
||||
|
||||
<p>Returns an array of the product's options.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for option in product.options %}
|
||||
{{ option }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Color Size Material
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Use <a href="/themes/liquid-documentation/filters/array-filters/#size">size</a> if you need to determine how many options a product has.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.options.size }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
3
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.price", "product-price" %}
|
||||
|
||||
<p>Returns the price of the product. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.price_max", "product-price_max" %}
|
||||
|
||||
<p>Returns the highest price of the product. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.price_min", "product-price_min" %}
|
||||
|
||||
<p>Returns the lowest price of the product. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.price_varies", "product-price_varies" %}
|
||||
|
||||
<p>Returns <code>true</code> if the product's variants have varying prices. Returns <code>false</code> if all of the product's variants have the same price.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.tags", "product-tags" %}
|
||||
|
||||
<p>Returns an array of all of the product's tags. The tags are returned in alphabetical order.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for tag in product.tags %}
|
||||
{{ tag }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
new
|
||||
leather
|
||||
sale
|
||||
special
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.template_suffix", "product-template_suffix" %}
|
||||
|
||||
Returns the name of the custom product template assigned to the product, without the <code>product.</code> prefix nor the <code>.liquid</code> suffix. Returns <code>nil</code> if a custom template is not assigned to the product.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- on product.wholesale.liquid -->
|
||||
{{ product.template_suffix }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
wholesale
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.title", "product-title" %}
|
||||
|
||||
<p>Returns the title of the product.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.type", "product-type" %}
|
||||
|
||||
<p>Returns the type of the product.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.url", "product-url" %}
|
||||
|
||||
<p>Returns the relative URL of the product.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ product.url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
/products/awesome-shoes
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.variants", "product-variants" %}
|
||||
|
||||
<p>Returns an array the product's <a href="/themes/liquid-documentation/objects/variant/">variants</a>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "product.vendor", "product-vendor" %}
|
||||
|
||||
<p>Returns the vendor of the product. </p>
|
||||
|
||||
|
||||
106
_posts/objects/search.md
Normal file
106
_posts/objects/search.md
Normal file
@@ -0,0 +1,106 @@
|
||||
---
|
||||
layout: default
|
||||
title: search
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# search
|
||||
|
||||
The <code>search</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "search.performed", "search-performed" %}
|
||||
|
||||
Returns <code>true</code> if an HTML form with the attribute <code>action="/search"</code> was submitted successfully. This allows you to show content based on whether a search was performed or not.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if search.performed %}
|
||||
<!-- Show search results -->
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "search.results", "search-results" %}
|
||||
|
||||
Returns an array of matching search result items. The items in the array can be a:
|
||||
|
||||
- <a href="/themes/liquid-documentation/objects/product/">product</a>,
|
||||
- <a href="/themes/liquid-documentation/objects/article/">article</a>,
|
||||
- <a href="/themes/liquid-documentation/objects/page/">page</a>.
|
||||
|
||||
You can access the attributes of the above three objects through <code>search.results</code>.
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for item in search.results %}
|
||||
<h3>{{ item.title | link_to: item.url }}</h3>
|
||||
{% if item.featured_image %}
|
||||
<div class="result-image">
|
||||
<a href="{{ item.url }}" title="{{ item.title | escape }}">
|
||||
{{ item.featured_image.src | product_img_url: 'small' | img_tag: item.featured_image.alt }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<span>{{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}</span>
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "search.results_count", "search-results_count" %}
|
||||
|
||||
<p>Returns the number of results found.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "search.terms", "search-terms" %}
|
||||
|
||||
<p>Returns the string that was entered in the search input box. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#highlight">highlight</a> filter to apply a different style to any instances in the search results that match up with <code>search.terms</code>.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ item.content | highlight: search.terms }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If the search term was "Yellow" -->
|
||||
<strong class="highlight">Yellow</strong> shirts are the best!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
95
_posts/objects/shipping_method.md
Normal file
95
_posts/objects/shipping_method.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
layout: default
|
||||
title: shipping_method
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# shipping_method
|
||||
|
||||
The <code>shipping_method</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "shipping_method.handle", "shipping_method-handle" %}
|
||||
|
||||
Returns the <a href="/themes/liquid-documentation/basics/handle/">handle</a> of the shipping method. The price of the shipping rate is appended to the end of the handle.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shipping_method.handle }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
shopify-international-shipping-25.00
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shipping_method.price", "shipping_method-price" %}
|
||||
|
||||
<p>Returns the price of the shipping method. Use a <a href="/themes/liquid-documentation/filters/money-filters/">money filter</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shipping_method.price | money }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
$15
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shipping_method.title", "shipping_method-title" %}
|
||||
|
||||
Returns the title of the shipping method.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shipping_method.title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
International Shipping
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
271
_posts/objects/shop.md
Normal file
271
_posts/objects/shop.md
Normal file
@@ -0,0 +1,271 @@
|
||||
---
|
||||
layout: default
|
||||
title: shop
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# shop
|
||||
|
||||
The <code>shop</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.collections_count", "shop-collections_count" %}
|
||||
|
||||
<p>Returns the number of collections in a shop.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.currency", "shop-currency" %}
|
||||
|
||||
<p>Returns the shop's currency in three-letter format (ex: USD).</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.description", "shop-description" %}
|
||||
|
||||
<p>Returns the description of the shop.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.domain", "shop-domain" %}
|
||||
|
||||
<p>Returns the primary domain of the shop.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.email", "shop-email" %}
|
||||
|
||||
<p>Returns the shop's email address.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.enabled_payment_types", "shop-enabled_payment_types" %}
|
||||
|
||||
<p>Returns an array of accepted credit cards for the shop. Use the <a href="/themes/liquid-documentation/filters/url-filters/#payment_type_img_url">payment_type_img_url</a> filter to link to the SVG image file of the credit card.</p>
|
||||
|
||||
The available values for this array are:
|
||||
|
||||
- visa
|
||||
- master
|
||||
- american_express
|
||||
- paypal
|
||||
- jcb
|
||||
- diners_club
|
||||
- maestro
|
||||
- google_wallet
|
||||
- discover
|
||||
- solo
|
||||
- switch
|
||||
- laser
|
||||
- dankort
|
||||
- forbrugsforeningen
|
||||
- dwolla
|
||||
- bitcoin
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.metafields", "shop-metafields" %}
|
||||
|
||||
<p>Returns the shop's metafields. Metafields can only be set using the Shopify API .</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.money_format", "shop-money_format" %}
|
||||
|
||||
<p>Returns a string that is used by Shopify to format money without showing the currency.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.money_with_currency", "shop-money_with_currency" %}
|
||||
|
||||
<p>Returns a string that is used by Shopify to format money while also displaying the currency.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.name", "shop-name" %}
|
||||
|
||||
<p>Returns the shop's name.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.permanent_domain", "shop-permanent_domain" %}
|
||||
|
||||
<p>Returns the <strong>.myshopify.com</strong> URL of a shop.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.products_count", "shop-products_count" %}
|
||||
|
||||
<p>Returns the number of products in a shop.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.types", "shop-types" %}
|
||||
|
||||
<p>Returns an array of all unique product types in a shop.</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product_type in shop.types %}
|
||||
{{ product_type | link_to_type }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.url", "shop-url" %}
|
||||
|
||||
<p>Returns the full URL of a shop.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ shop.url }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
http://johns-apparel.com
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "shop.vendors", "shop-vendors" %}
|
||||
|
||||
<p>Returns an array of all unique vendors in a shop.</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product_vendor in shop.vendors %}
|
||||
{{ product_vendor | link_to_vendor }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
140
_posts/objects/tablerow.md
Normal file
140
_posts/objects/tablerow.md
Normal file
@@ -0,0 +1,140 @@
|
||||
---
|
||||
layout: default
|
||||
title: tablerow
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# tablerow
|
||||
|
||||
The <code>tablerow</code> object is used within the <a href="/themes/liquid-documentation/tags/iteration-tags/#tablerow">tablerow</a> tag. It contains attributes of its parent for loop.
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link " tablerow.length", "tablerow-length" %}
|
||||
|
||||
<p>Returns the number of iterations of the <tt>tablerow</tt> loop.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link " tablerow.index", "tablerow-index" %}
|
||||
|
||||
Returns the current index of the <tt>tablerow</tt> loop, starting at 1.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link " tablerow.index0", "tablerow-index0" %}
|
||||
|
||||
Returns the current index of the <tt>tablerow</tt> loop, starting at 0.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link " tablerow.rindex", "tablerow-rindex" %}
|
||||
|
||||
Returns <a href="#tablerow.index">tablerow.index</a> in reverse order.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link " tablerow.rindex0", "tablerow-rindex0" %}
|
||||
|
||||
Returns <a href="#tablerow.index0">tablerow.index0</a> in reverse order.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link " tablerow.first", "tablerow-first" %}
|
||||
|
||||
Returns <code>true</code> if it's the first iteration of the <tt>tablerow</tt> loop. Returns <code>false</code> if it is not the first iteration.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tablerow.last", "tablerow-last" %}
|
||||
|
||||
Returns <code>true</code> if it's the last iteration of the <tt>tablerow</tt> loop. Returns <code>false</code> if it is not the last iteration.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tablerow.col", "tablerow-col" %}
|
||||
|
||||
Returns the index of the current row, starting at 1.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tablerow.col0", "tablerow-col0" %}
|
||||
|
||||
Returns the index of the current row, starting at 0.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tablerow.col_first", "tablerow-col_first" %}
|
||||
|
||||
Returns <code>true</code> if the current column is the first column in a row, returns <code>false</code> if it is not.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link " tablerow.col_last", "tablerow-col_last" %}
|
||||
|
||||
Returns <code>true</code> if the current column is the last column in a row, returns <code>false</code> if it is not.
|
||||
|
||||
|
||||
|
||||
114
_posts/objects/tax_line.md
Normal file
114
_posts/objects/tax_line.md
Normal file
@@ -0,0 +1,114 @@
|
||||
---
|
||||
layout: default
|
||||
title: tax_line
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# tax_line
|
||||
|
||||
The <code>tax_line</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tax_line.title", "tax_line-title" %}
|
||||
|
||||
Returns the title of the tax.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ tax_line.title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
GST
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tax_line.price", "tax_line-price" %}
|
||||
|
||||
Returns the amount of the tax. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ tax_line.price | money }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
€25
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tax_line.rate", "tax_line-rate" %}
|
||||
|
||||
Returns the rate of the tax in decimal notation.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ tax_line.rate }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
0.14
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tax_line.rate_percentage", "tax_line-rate_percentage" %}
|
||||
|
||||
Returns the rate of the tax in percentage format.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ tax_line.rate_percentage }}%
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
14%
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
37
_posts/objects/template.md
Normal file
37
_posts/objects/template.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
layout: default
|
||||
title: template
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# template
|
||||
|
||||
<code>template</code> returns the name of the template used to render the current page, with the <code>.liquid</code> extension omitted.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If you're on the index.liquid template -->
|
||||
{{ template }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
index
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
79
_posts/objects/theme.md
Normal file
79
_posts/objects/theme.md
Normal file
@@ -0,0 +1,79 @@
|
||||
---
|
||||
layout: default
|
||||
title: theme
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# theme
|
||||
|
||||
The <code>theme</code> object contains information about published themes in a shop. You can also use <code>themes</code> to iterate through both themes.
|
||||
|
||||
<p class="input">Input</p>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for t in themes %}
|
||||
{{ t.role }} theme: {{ t.name }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
mobile theme: minimal
|
||||
main theme: radiance
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
The <code>theme</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "theme.id", "theme-id" %}
|
||||
|
||||
Returns the theme's id. This is useful for when you want to link a user directly to the theme's Theme Settings.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Go to your <a href="/admin/themes/{{ theme.id }}/settings">theme settings</a> to change your logo.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Go to your <a href="/admin/themes/8196497/settings">theme settings</a> to change your logo.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "theme.role", "theme-role" %}
|
||||
|
||||
Returns one of the two possible roles of a theme: <code>main</code> or <code>mobile</code>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "theme.name", "theme-name" %}
|
||||
|
||||
Returns the name of the theme.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
122
_posts/objects/transaction.md
Normal file
122
_posts/objects/transaction.md
Normal file
@@ -0,0 +1,122 @@
|
||||
---
|
||||
layout: default
|
||||
title: transaction
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# transaction
|
||||
|
||||
The <code>transaction</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
{% anchor_link "transaction.id", "transaction-id" %}
|
||||
|
||||
Returns the id of the transaction.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "transaction.amount", "transaction-amount" %}
|
||||
|
||||
Returns the amount of the transaction. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "transaction.name", "transaction-name" %}
|
||||
|
||||
Returns the name of the transaction.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ transaction.name }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
c251556901.1
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "transaction.status", "transaction-status" %}
|
||||
|
||||
Returns the status of the transaction.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "transaction.created_at", "transaction-created_at" %}
|
||||
|
||||
<p>Returns the timestamp of when the transaction was created. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#date">date</a> filter to format the timestamp.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "transaction.gateway", "transaction-gateway" %}
|
||||
|
||||
Returns the name of the payment gateway used for the transaction.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ transaction.gateway }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Cash on Delivery (COD)
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% comment %} not including 'kind' and 'receipt' for now. No info can be found on these {% endcomment %}
|
||||
199
_posts/objects/variant.md
Normal file
199
_posts/objects/variant.md
Normal file
@@ -0,0 +1,199 @@
|
||||
---
|
||||
layout: default
|
||||
title: variant
|
||||
|
||||
nav:
|
||||
group: Liquid Variables
|
||||
---
|
||||
|
||||
# variant
|
||||
|
||||
The <code>variant</code> object has the following attributes:
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.available", "variant-available" %}
|
||||
|
||||
Returns <code>true</code> if the variant is available to be purchased, or <code>false</code> if it not. In order for a variant to be available, its <code>variant.inventory_quantity</code> must be greater than zero and its <code>variant.inventory_policy</code> must be <code>continue</code>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.barcode", "variant-barcode" %}
|
||||
|
||||
<p>Returns the variant's barcode.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.compare_at_price", "variant-compare_at_price" %}
|
||||
|
||||
<p>Returns the variant's compare at price. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.id", "variant-id" %}
|
||||
|
||||
<p>Returns the variant's unique id.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.inventory_management", "variant-inventory_management" %}
|
||||
|
||||
<p>Returns the variant's inventory tracking service.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.inventory_policy", "variant-inventory_policy" %}
|
||||
|
||||
Returns the string <code>continue</code> if the "Allow users to purchase this item, even if it is no longer in stock." checkbox is checked in the variant options in the Admin. Returns <code>deny</code> if it is unchecked.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.inventory_quantity", "variant-inventory_quantity" %}
|
||||
|
||||
<p>Returns the variant's inventory quantity.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.option1", "variant-option1" %}
|
||||
|
||||
Returns the value of the variant's first option.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.option2", "variant-option2" %}
|
||||
|
||||
Returns the value of the variant's second option.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.option3", "variant-option3" %}
|
||||
|
||||
Returns the value of the variant's third option.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.price", "variant-price" %}
|
||||
|
||||
<p>Returns the variant's price. Use one of the <a href="/themes/liquid-documentation/filters/money-filters/">money filters</a> to return the value in a monetary format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.sku", "variant-sku" %}
|
||||
|
||||
<p>Returns the variant's SKU.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.title", "variant-title" %}
|
||||
|
||||
<p>Returns the concatenation of all the variant's option values, joined by a <code>/</code>.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If variant's option1, option2, and option3 are "Red", "Small", "Wool", respectively -->
|
||||
{{ variant.title }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Red / Small / Wool
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "variant.weight", "variant-weight" %}
|
||||
|
||||
<p>Returns the variant's weight. Use the <a href="/themes/liquid-documentation/filters/additional-filters/#weight_with_unit">weight_with_unit</a> filter to convert it to the shop's weight format.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
176
_posts/tags/control-flow-tags.md
Normal file
176
_posts/tags/control-flow-tags.md
Normal file
@@ -0,0 +1,176 @@
|
||||
---
|
||||
layout: default
|
||||
title: Control Flow Tags
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 1
|
||||
---
|
||||
|
||||
# Control Flow Tags
|
||||
|
||||
Control Flow tags determine which block of code should be executed based on different conditions.
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "if", "if" %}
|
||||
|
||||
<p>Executes a block of code only if a certain condition is met.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.title == 'Awesome Shoes' %}
|
||||
These shoes are awesome!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
These shoes are awesome!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "elsif / else", "elsif-else" %}
|
||||
|
||||
<p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- If customer.name = 'anonymous' -->
|
||||
{% if customer.name == 'kevin' %}
|
||||
Hey Kevin!
|
||||
{% elsif customer.name == 'anonymous' %}
|
||||
Hey Anonymous!
|
||||
{% else %}
|
||||
Hi Stranger!
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
Hey Anonymous!
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "case/when", "case-when" %}
|
||||
|
||||
<p>Creates a switch statement to compare a variable with different values. <code>case</code> initializes the switch statement, and <code>when</code> compares its values.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% 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 %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
This is a cake
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "unless", "unless" %}
|
||||
|
||||
<p>Similar to <code>if</code>, but executes a block of code only if a certain condition is <strong>not</strong> met.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% unless product.title == 'Awesome Shoes' %}
|
||||
These shoes are not awesome.
|
||||
{% endunless %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
These shoes are not awesome.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
This would be the equivalent of doing the following:
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% if product.title != 'Awesome Shoes' %}
|
||||
These shoes are not awesome.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
22
_posts/tags/index.md
Normal file
22
_posts/tags/index.md
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
layout: default
|
||||
title: Tags
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 1
|
||||
---
|
||||
|
||||
# Tags
|
||||
|
||||
Liquid _tags_ are the programming logic that tells templates what to do. Tags are wrapped in: <code>{%</code> <code>%}</code>.
|
||||
|
||||
Certain tags, such as <a href="#for"><code>for</code></a> and <a href="#cycle"><code>cycle</code></a> can take on parameters. Details for each parameter can be found in their respective sections.
|
||||
|
||||
Tags can be broken down into four categories:
|
||||
|
||||
- [Control Flow Tags](/themes/liquid-documentation/tags/control-flow-tags/)
|
||||
- [Iteration Tags](/themes/liquid-documentation/tags/iteration-tags/)
|
||||
- [Theme Tags](/themes/liquid-documentation/tags/theme-tags/)
|
||||
- [Variable Tags](/themes/liquid-documentation/tags/variable-tags/)
|
||||
459
_posts/tags/iteration-tags.md
Normal file
459
_posts/tags/iteration-tags.md
Normal file
@@ -0,0 +1,459 @@
|
||||
---
|
||||
layout: default
|
||||
title: Iteration Tags
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 1
|
||||
---
|
||||
|
||||
# Iteration Tags
|
||||
|
||||
Iteration Tags are used to run a block of code repeatedly.
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "for", "for" %}
|
||||
|
||||
<p>Executes a block of code repeatedly. For a full list of attributes available within a for loop, see <a href="/themes/liquid-documentation/objects/for-loops/">forloop (object)</a>.</p>
|
||||
|
||||
For loops can only output a maximum of 50 results per page. In cases where there are more than 50 results, use the <a href="/themes/liquid-documentation/tags/theme-tags/#paginate">paginate</a> tag to split them across multiple pages.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% for product in collection.products %}
|
||||
{{ product.title }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
hat shirt pants
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="sub-sub-section">
|
||||
|
||||
<h2 class="parameter">parameters <span>for</span></h2>
|
||||
|
||||
<h4>limit</h4>
|
||||
Exits the for loop at a specific index.
|
||||
<br/><br/>
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if array = [1,2,3,4,5,6] -->
|
||||
{% for item in array limit:2 %}
|
||||
{{ item }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
1 2
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<h4>offset</h4>
|
||||
Starts the for loop at a specific index.
|
||||
<br/><br/>
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if array = [1,2,3,4,5,6] -->
|
||||
{% for item in array offset:2 %}
|
||||
{{ item }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
3 4
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<h4>range</h4>
|
||||
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
|
||||
<br/><br/>
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign num = 4 %}
|
||||
{% for i in (1..num) %}
|
||||
{{ i }}
|
||||
{% endfor %}
|
||||
|
||||
{% for i in (3..5) %}
|
||||
{{ i }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
1 2 3 4
|
||||
3 4 5
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<h4>reversed
|
||||
</h4>
|
||||
Reverses the order of the for loop.
|
||||
<br/><br/>
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- if array = [1,2,3,4,5,6] -->
|
||||
{% for item in array reversed %}
|
||||
{{ item }}
|
||||
{% endfor %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
6 5 4 3 2 1
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "cycle", "cycle" %}
|
||||
|
||||
Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time <code>cycle</code> is called, the next string that was passed as a parameter is output.
|
||||
|
||||
<code>cycle</code> must be used within a <a href="#for">for</a> loop block.
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% cycle 'one', 'two', 'three' %}
|
||||
{% cycle 'one', 'two', 'three' %}
|
||||
{% cycle 'one', 'two', 'three' %}
|
||||
{% cycle 'one', 'two', 'three' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
one
|
||||
two
|
||||
three
|
||||
one
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Uses for <code>cycle</code> include:
|
||||
|
||||
- applying odd/even classes to rows in a table
|
||||
- applying a unique class to the last product thumbnail in a row
|
||||
|
||||
<div class="sub-sub-section">
|
||||
|
||||
<h2 class="parameter">parameters <span>cycle</span></h2>
|
||||
|
||||
|
||||
<code>cycle</code> accepts a parameter called <strong>cycle group</strong> in cases where you need multiple <code>cycle</code> 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>The example below shows why cycle groups are necessary when there are multiple instances of the cycle block.</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<ul>
|
||||
{% for product in collections.collection-1.products %}
|
||||
<li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
|
||||
<a href="{{ product.url | within: collection }}">
|
||||
<img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul>
|
||||
{% for product in collections.collection-2.products %}
|
||||
<li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
|
||||
<a href="{{ product.url | within: collection }}">
|
||||
<img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p>In the code above, if the first collection only has two products, the second collection loop will continue the <code>cycle</code> where the first one left off. This will result in this undesired output:</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<ul style="clear:both">
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li class="last"></li>
|
||||
<li style="clear:both"></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p>To avoid this, cycle groups are used for each <code>cycle</code> block, as shown below.</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<ul>
|
||||
{% for product in collections.collection-1.products %}
|
||||
<li{% cycle 'group1': ' style="clear:both;"', '', '', ' class="last"' %}>
|
||||
<a href="{{ product.url | within: collection }}">
|
||||
<img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul>
|
||||
{% for product in collections.collection-2.products %}
|
||||
<li{% cycle 'group2': ' style="clear:both;"', '', '', ' class="last"' %}>
|
||||
<a href="{{ product.url | within: collection }}">
|
||||
<img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p>With the code above, the two <code>cycle</code> blocks are independent of each other. The result is shown below:</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<ul>
|
||||
<li style="clear:both"></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<!-- new cycle group starts! -->
|
||||
<ul>
|
||||
<li style="clear:both"></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li class="last"></li>
|
||||
</ul>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "tablerow", "tablerow" %}
|
||||
|
||||
<p>Generates an HTML <code><table></code>. Must be wrapped in an opening <table> and closing </table> HTML tags. For a full list of attributes available within a tablerow loop, see <a href="/themes/liquid-documentation/objects/tablerow">tablerow (object)</a>.</p>
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<table>
|
||||
{% tablerow product in collection.products %}
|
||||
{{ product.title }}
|
||||
{% endtablerow %}
|
||||
</table>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<table>
|
||||
<tr class="row1">
|
||||
<td class="col1">
|
||||
Cool Shirt
|
||||
</td>
|
||||
<td class="col2">
|
||||
Alien Poster
|
||||
</td>
|
||||
<td class="col3">
|
||||
Batman Poster
|
||||
</td>
|
||||
<td class="col4">
|
||||
Bullseye Shirt
|
||||
</td>
|
||||
<td class="col5">
|
||||
Another Classic Vinyl
|
||||
</td>
|
||||
<td class="col6">
|
||||
Awesome Jeans
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sub-sub-section">
|
||||
|
||||
<h2 class="parameter">parameters <span>tablerow</span></h2>
|
||||
|
||||
|
||||
<h4>cols</h4>
|
||||
|
||||
Defines how many columns the tables should have.
|
||||
<br/><br/>
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% tablerow product in collection.products cols:2 %}
|
||||
{{ product.title }}
|
||||
{% endtablerow %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<table>
|
||||
<tr class="row1">
|
||||
<td class="col1">
|
||||
Cool Shirt
|
||||
</td>
|
||||
<td class="col2">
|
||||
Alien Poster
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="row2">
|
||||
<td class="col1">
|
||||
Batman Poster
|
||||
</td>
|
||||
<td class="col2">
|
||||
Bullseye Shirt
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="row3">
|
||||
<td class="col1">
|
||||
Another Classic Vinyl
|
||||
</td>
|
||||
<td class="col2">
|
||||
Awesome Jeans
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<h4>limit</h4>
|
||||
|
||||
Exits the tablerow after a specific index.
|
||||
<br/><br/>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% tablerow product in collection.products cols:2 limit:3 %}
|
||||
{{ product.title }}
|
||||
{% endtablerow %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<h4>offset</h4>
|
||||
|
||||
Starts the tablerow after a specific index.
|
||||
<br/><br/>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% tablerow product in collection.products cols:2 offset:3 %}
|
||||
{{ product.title }}
|
||||
{% endtablerow %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<h4>range</h4>
|
||||
|
||||
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
|
||||
<br/><br/>
|
||||
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<!--variable number example-->
|
||||
|
||||
{% assign num = 4 %}
|
||||
<table>
|
||||
{% tablerow i in (1..num) %}
|
||||
{{ i }}
|
||||
{% endtablerow %}
|
||||
</table>
|
||||
|
||||
<!--literal number example-->
|
||||
|
||||
<table>
|
||||
{% tablerow i in (3..5) %}
|
||||
{{ i }}
|
||||
{% endtablerow %}
|
||||
</table>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
440
_posts/tags/theme-tags.md
Normal file
440
_posts/tags/theme-tags.md
Normal file
@@ -0,0 +1,440 @@
|
||||
---
|
||||
layout: default
|
||||
title: Theme Tags
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 1
|
||||
---
|
||||
|
||||
# Theme Tags
|
||||
|
||||
Theme Tags have various functions, including:
|
||||
|
||||
- Outputting template-specific HTML markup
|
||||
- Telling the theme which layout and snippets to use
|
||||
- Splitting a returned array into multiple pages.
|
||||
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "comment", "comment" %}
|
||||
|
||||
<p>Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing <code>comment</code> blocks will not be output, and any Liquid code within will not be executed.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
My name is {% comment %}super{% endcomment %} Shopify.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
My name is Shopify.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "include", "include" %}
|
||||
|
||||
Inserts a snippet from the **snippets** folder of a theme.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% include 'snippet-name' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
Note that the <tt>.liquid</tt> extension is omitted in the above code.
|
||||
|
||||
When a snippet is included, the code inside it will have access to the variables within its parent template.
|
||||
|
||||
|
||||
<h2 class="parameter">parameters <span>include</span></h2>
|
||||
|
||||
|
||||
|
||||
#### with
|
||||
|
||||
The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet.
|
||||
|
||||
For example, we can have a snippet named **color.liquid** which contains the following:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
color: '{{ color }}'
|
||||
shape: '{{ shape }}'
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
Within **theme.liquid**, we can include the **color.liquid** snippet as follows:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign shape = 'circle' %}
|
||||
{% include 'color' %}
|
||||
{% include 'color' with 'red' %}
|
||||
{% include 'color' with 'blue' %}
|
||||
{% assign shape = 'square' %}
|
||||
{% include 'color' with 'red' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
The output will be:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
color: shape: 'circle'
|
||||
color: 'red' shape: 'circle'
|
||||
color: 'blue' shape: 'circle'
|
||||
color: 'red' shape: 'square'
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "form", "form" %}
|
||||
|
||||
Creates an HTML <code><form></code> element with all the necessary attributes (action, id, etc.) and <code><input></code> to submit the form successfully.
|
||||
|
||||
<h2 class="parameter">parameters <span>form</span></h2>
|
||||
|
||||
|
||||
#### activate_customer_password
|
||||
|
||||
Generates a form for activating a customer account on the <a href="/themes/theme-development/templates/customers-activate-account/">activate_account.liquid</a> template.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form 'activate_customer_password' %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/activate" method="post">
|
||||
<input name="form_type" type="hidden" value="activate_customer_password" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
#### new_comment
|
||||
|
||||
|
||||
Generates a form for creating a new comment in the <a href="/themes/theme-development/templates/article-liquid/">article.liquid</a> template. Requires the <code>article</code> object as a parameter.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form "new_comment", article %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments" class="comment-form" id="article-10582441-comment-form" method="post">
|
||||
<input name="form_type" type="hidden" value="new_comment" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
#### contact
|
||||
|
||||
Generates a form for submitting an email through the <a href="/manual/configuration/store-customization/communicating-with-customers/provide-contact-points/add-a-contact-form">Liquid contact form</a>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form 'contact' %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="/contact" class="contact-form" method="post">
|
||||
<input name="form_type" type="hidden" value="contact" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
#### create_customer
|
||||
|
||||
Generates a form for creating a new customer account on the <a href="/themes/theme-development/templates/customers-register/">register.liquid</a> template.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form 'create_customer' %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account" id="create_customer" method="post">
|
||||
<input name="form_type" type="hidden" value="create_customer" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
#### customer_address
|
||||
Generates a form for creating or editing customer account addresses on the <a href="/themes/theme-development/templates/customers-addresses/">addresses.liquid</a> template. When creating a new address, include the parameter <code>customer.new_address</code>. When editing an existing address, include the parameter <code>address</code>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form 'customer_address', customer.new_address %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="/account/addresses/70359392" id="address_form_70359392" method="post">
|
||||
<input name="form_type" type="hidden" value="customer_address" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
#### customer_login
|
||||
|
||||
Generates a form for logging into Customer Accounts on the <a href="/themes/theme-development/templates/customers-login/">login.liquid</a> template.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form 'customer_login' %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/login" id="customer_login" method="post">
|
||||
<input name="form_type" type="hidden" value="customer_login" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
#### recover_customer_password
|
||||
|
||||
Generates a form for recovering a lost password on the <a href="/themes/theme-development/templates/customers-login/">login.liquid</a> template.
|
||||
|
||||
<p class="input">Input</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% form 'recover_customer_password' %}
|
||||
...
|
||||
{% endform %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
<form accept-charset="UTF-8" action="/account/recover" method="post">
|
||||
<input name="form_type" type="hidden" value="recover_customer_password" />
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
...
|
||||
</form>
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "layout", "layout" %}
|
||||
|
||||
Loads an alternate template file from the **layout** folder of a theme. If no alternate layout is defined, the **theme.liquid** template is loaded by default.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
<!-- loads the templates/alternate.liquid template -->
|
||||
{% layout 'alternate' %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
If you don't want **any** layout to be used on a specific template, you can use <code>none</code>.
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% layout none %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "paginate", "paginate" %}
|
||||
|
||||
Splitting products, blog articles, and search results across multiple pages is a necessary component of theme design as you are limited to 50 results per page in any <a href="/themes/liquid-documentation/tags/iteration-tags/#for">for</a> loop.
|
||||
|
||||
The <code>paginate</code> tag works in conjunction with the <code> for </code> tag to split content into numerous pages. It must wrap a <code>for</code> tag block that loops through an array, as shown in the example below:
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% paginate collection.products by 5 %}
|
||||
{% for product in collection.products %}
|
||||
<!--show product details here -->
|
||||
{% endfor %}
|
||||
{% endpaginate %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
The <code>by</code> parameter is followed by an integer <strong>between 1 and 50</strong> that tells the <code>paginate</code> tag how many results it should output per page.
|
||||
|
||||
|
||||
Within <code>paginate</code> tags, you can access attributes of the <a href="/themes/liquid-documentation/objects/paginate/">paginate</a> object. This includes the attributes to output the links required to navigate within the generated pages.
|
||||
|
||||
|
||||
{% comment %}
|
||||
|
||||
{% block "note-caution" %}
|
||||
Accessing any attributes of the array you are paginating <em>before</em> the opening <code>paginate</code> tag will cause errors. To avoid this, make sure any variables
|
||||
{% endblock %}
|
||||
|
||||
|
||||
**Bad Example**
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{{ collection.title }}
|
||||
{% paginate collection.products by 5 %}
|
||||
{% for product in collection.products %}
|
||||
{{ product.title }}
|
||||
{% endfor %}
|
||||
{% endpaginate %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
**Good Example**
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% paginate collection.products by 5 %}
|
||||
{% for product in collection.products %}
|
||||
<!--show product details here -->
|
||||
{% endfor %}
|
||||
{% endpaginate %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "raw", "raw" %}
|
||||
|
||||
<p>Allows output of Liquid code on a page without being parsed.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
<div class="highlight"><pre><code class="html">{% raw %}{{ 5 | plus: 6 }}{% endraw %} is equal to 11.</code></pre></div>
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
<div class="highlight"><pre><code class="html">{{ 5 | plus: 6 }} is equal to 11.</code></pre></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
219
_posts/tags/variable-tags.md
Normal file
219
_posts/tags/variable-tags.md
Normal file
@@ -0,0 +1,219 @@
|
||||
---
|
||||
layout: default
|
||||
title: Variable Tags
|
||||
landing_as_article: true
|
||||
|
||||
nav:
|
||||
group: Liquid Documentation
|
||||
weight: 1
|
||||
---
|
||||
|
||||
# Variable Tags
|
||||
|
||||
Variable Tags are used to create new Liquid variables.
|
||||
|
||||
<a id="topofpage"></a>
|
||||
{% table_of_contents %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "assign", "assign" %}
|
||||
|
||||
<p>Creates a new variable.</p>
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign my_variable = false %}
|
||||
{% if my_variable != true %}
|
||||
This statement is valid.
|
||||
{% endif %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
This statement is valid.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Use quotations ("") to save the variable as a string.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign foo = "bar" %}
|
||||
{{ foo }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
bar
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "capture", "capture" %}
|
||||
|
||||
<p>Captures the string inside of the opening and closing tags and assigns it to a variable. By default, variables created through {% capture %} are strings; use the <a href="/themes/liquid-documentation/filters/string-filters/#to_number">to_number</a> filter to convert the string into a number.</p>
|
||||
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% capture my_variable %}I am being captured.{% endcapture %}
|
||||
{{ my_variable }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
I am being captured.
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "increment", "increment" %}
|
||||
|
||||
Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% increment variable %}
|
||||
{% increment variable %}
|
||||
{% increment variable %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
0
|
||||
1
|
||||
2
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Variables created through the <code>increment</code> tag are independent from variables created through <code>assign</code> or <code>capture</code>.
|
||||
|
||||
In the example below, a variable named "var" is created through <code>assign</code>. The <code>increment</code> tag is then used several times on a variable with the same name. However, note that the <code>increment</code> tag does not affect the value of "var" that was created through <code>assign</code>.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
{% assign var = 10 %}
|
||||
{% increment var %}
|
||||
{% increment var %}
|
||||
{% increment var %}
|
||||
{{ var }}
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
0
|
||||
1
|
||||
2
|
||||
10
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% anchor_link "decrement", "decrement" %}
|
||||
|
||||
Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.
|
||||
|
||||
<p class="input">Input</p>
|
||||
|
||||
{% highlight html %}{% raw %}
|
||||
{% decrement variable %}
|
||||
{% decrement variable %}
|
||||
{% decrement variable %}
|
||||
{% endraw %}{% endhighlight %}
|
||||
|
||||
<p class="output">Output</p>
|
||||
|
||||
<div>
|
||||
{% highlight html %}{% raw %}
|
||||
-1
|
||||
-2
|
||||
-3
|
||||
{% endraw %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Like <a href="#increment">increment</a>, variables declared inside <code>decrement</code> are independent from variables created through <code>assign</code> or <code>capture</code>.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3
_site/README.md
Normal file
3
_site/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
#### Liquid Docs
|
||||
|
||||
Home of the Liquid Docs
|
||||
139
_site/about/index.html
Normal file
139
_site/about/index.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>About</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
|
||||
<link rel="canonical" href="http://yourdomain.com/about/">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="/css/stylesheets/main.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<a class="site-title" href="/">Your awesome title</a>
|
||||
|
||||
<nav class="site-nav">
|
||||
<a href="#" class="menu-icon">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 18 15" enable-background="new 0 0 18 15" xml:space="preserve">
|
||||
<path fill="#505050" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0
|
||||
h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
||||
<path fill="#505050" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484
|
||||
h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
||||
<path fill="#505050" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0
|
||||
c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="trigger">
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page-content">
|
||||
<div class="wrap">
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1>About</h1>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
<p>This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at <a href="http://jekyllrb.com/">jekyllrb.com</a></p>
|
||||
|
||||
<p>You can find the source code for the Jekyll new theme at: <a href="https://github.com/jglovier/jekyll-new">github.com/jglovier/jekyll-new</a></p>
|
||||
|
||||
<p>You can find the source code for Jekyll at <a href="https://github.com/jekyll/jekyll">github.com/jekyll/jekyll</a></p>
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<h2 class="footer-heading">Your awesome title</h2>
|
||||
|
||||
<div class="footer-col-1 column">
|
||||
<ul>
|
||||
<li>Your awesome title</li>
|
||||
<li><a href="mailto:your-email@domain.com">your-email@domain.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-2 column">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jekyll">
|
||||
<span class="icon github">
|
||||
<svg version="1.1" class="github-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C2C2C2" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761
|
||||
c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32
|
||||
c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472
|
||||
c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037
|
||||
C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65
|
||||
c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261
|
||||
c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082
|
||||
c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129
|
||||
c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">jekyll</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/jekyllrb">
|
||||
<span class="icon twitter">
|
||||
<svg version="1.1" class="twitter-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill="#C2C2C2" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27
|
||||
c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767
|
||||
c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206
|
||||
C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271
|
||||
c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469
|
||||
c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">jekyllrb</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-3 column">
|
||||
<p class="text">Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
_site/css/config.rb
Normal file
24
_site/css/config.rb
Normal file
@@ -0,0 +1,24 @@
|
||||
# Require any additional compass plugins here.
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "stylesheets"
|
||||
sass_dir = "sass"
|
||||
images_dir = "images"
|
||||
javascripts_dir = "javascripts"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# output_style = :expanded or :nested or :compact or :compressed
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
||||
5
_site/css/sass/ie.scss
Normal file
5
_site/css/sass/ie.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Welcome to Compass. Use this file to write IE specific override styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <!--[if IE]>
|
||||
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
* <![endif]--> */
|
||||
412
_site/css/sass/main.scss
Normal file
412
_site/css/sass/main.scss
Normal file
@@ -0,0 +1,412 @@
|
||||
/*sadfasdf*/
|
||||
|
||||
/* Base */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
|
||||
|
||||
a { color: #2a7ae2; text-decoration: none; }
|
||||
a:hover { color: #000; text-decoration: underline; }
|
||||
a:visited { color: #205caa; }
|
||||
|
||||
/* Utility */
|
||||
|
||||
.wrap:before,
|
||||
.wrap:after { content:""; display:table; }
|
||||
.wrap:after { clear: both; }
|
||||
.wrap {
|
||||
max-width: 800px;
|
||||
padding: 0 30px;
|
||||
margin: 0 auto;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Layout Styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
/* Site header */
|
||||
|
||||
.site-header {
|
||||
border-top: 5px solid #333;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
min-height: 56px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.site-title,
|
||||
.site-title:hover,
|
||||
.site-title:visited {
|
||||
display: block;
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
letter-spacing: -1px;
|
||||
float: left;
|
||||
line-height: 56px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
float: right;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon { display: none; }
|
||||
|
||||
.site-nav .page-link {
|
||||
margin-left: 20px;
|
||||
color: #727272;
|
||||
letter-spacing: -.5px;
|
||||
}
|
||||
|
||||
/* Site footer */
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.footer-heading {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.site-footer .column { float: left; margin-bottom: 15px; }
|
||||
|
||||
.footer-col-1 {
|
||||
width: 270px; /*fallback*/
|
||||
width: -webkit-calc(35% - 10px);
|
||||
width: -moz-calc(35% - 10px);
|
||||
width: -o-calc(35% - 10px);
|
||||
width: calc(35% - 10px);
|
||||
margin-right: 10px
|
||||
}
|
||||
.footer-col-2 {
|
||||
width: 175px; /*fallback*/
|
||||
width: -webkit-calc(23.125% - 10px);
|
||||
width: -moz-calc(23.125% - 10px);
|
||||
width: -o-calc(23.125% - 10px);
|
||||
width: calc(23.125% - 10px);
|
||||
margin-right: 10px
|
||||
}
|
||||
.footer-col-3 {
|
||||
width: 335px; /*fallback*/
|
||||
width: -webkit-calc(41.875%);
|
||||
width: -moz-calc(41.875%);
|
||||
width: -o-calc(41.875%);
|
||||
width: calc(41.875%);
|
||||
}
|
||||
|
||||
.site-footer ul { list-style: none; }
|
||||
|
||||
.site-footer li,
|
||||
.site-footer p {
|
||||
font-size: 15px;
|
||||
letter-spacing: -.3px;
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
.github-icon-svg,
|
||||
.twitter-icon-svg {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
|
||||
/* Page Content styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.page-content {
|
||||
padding: 30px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Home styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.home h1 { margin-bottom: 25px; }
|
||||
|
||||
.posts { list-style-type: none; }
|
||||
|
||||
.posts li { margin-bottom: 30px; }
|
||||
|
||||
.posts .post-link {
|
||||
font-size: 24px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.posts .post-date {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
|
||||
/* Post styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.post-header { margin: 10px 0 30px; }
|
||||
|
||||
.post-header h1 {
|
||||
font-size: 42px;
|
||||
letter-spacing: -1.75px;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.post-header .meta {
|
||||
font-size: 15px;
|
||||
color: #818181;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.post-content { margin: 0 0 30px; }
|
||||
|
||||
.post-content > * { margin: 20px 0; }
|
||||
|
||||
|
||||
.post-content h1,
|
||||
.post-content h2,
|
||||
.post-content h3,
|
||||
.post-content h4,
|
||||
.post-content h5,
|
||||
.post-content h6 {
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -1.25px;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 26px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.post-content h4 {
|
||||
font-size: 20px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.post-content blockquote {
|
||||
border-left: 4px solid #e8e8e8;
|
||||
padding-left: 20px;
|
||||
font-size: 18px;
|
||||
opacity: .6;
|
||||
letter-spacing: -1px;
|
||||
font-style: italic;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.post-content ul,
|
||||
.post-content ol { padding-left: 20px; }
|
||||
|
||||
.post pre,
|
||||
.post code {
|
||||
border: 1px solid #d5d5e9;
|
||||
background-color: #eef;
|
||||
padding: 8px 12px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
overflow:scroll;
|
||||
}
|
||||
|
||||
.post code { padding: 1px 5px; }
|
||||
|
||||
.post ul,
|
||||
.post ol { margin-left: 1.35em; }
|
||||
|
||||
.post pre code {
|
||||
border: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* terminal */
|
||||
.post pre.terminal {
|
||||
border: 1px solid #000;
|
||||
background-color: #333;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.post pre.terminal code { background-color: #333; }
|
||||
|
||||
/* Syntax highlighting styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.highlight { background: #ffffff; }
|
||||
.highlight .c { color: #999988; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
.highlight .k { font-weight: bold } /* Keyword */
|
||||
.highlight .o { font-weight: bold } /* Operator */
|
||||
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #aa0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #999999 } /* Generic.Heading */
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
|
||||
.highlight .go { color: #888888 } /* Generic.Output */
|
||||
.highlight .gp { color: #555555 } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.highlight .kc { font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #009999 } /* Literal.Number */
|
||||
.highlight .s { color: #d14 } /* Literal.String */
|
||||
.highlight .na { color: #008080 } /* Name.Attribute */
|
||||
.highlight .nb { color: #0086B3 } /* Name.Builtin */
|
||||
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #008080 } /* Name.Constant */
|
||||
.highlight .ni { color: #800080 } /* Name.Entity */
|
||||
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
|
||||
.highlight .nn { color: #555555 } /* Name.Namespace */
|
||||
.highlight .nt { color: #000080 } /* Name.Tag */
|
||||
.highlight .nv { color: #008080 } /* Name.Variable */
|
||||
.highlight .ow { font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #009999 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #d14 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #d14 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #d14 } /* Literal.String.Double */
|
||||
.highlight .se { color: #d14 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #d14 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #d14 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #009926 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #d14 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
|
||||
|
||||
/* media queries */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
|
||||
.footer-col-1 { width: 50%; }
|
||||
|
||||
.footer-col-2 {
|
||||
width: 45%; /*fallback*/
|
||||
width: -webkit-calc(50% - 10px);
|
||||
width: -moz-calc(50% - 10px);
|
||||
width: -o-calc(50% - 10px);
|
||||
width: calc(50% - 10px);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.site-footer .column.footer-col-3 {
|
||||
width: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
.wrap { padding: 0 12px; }
|
||||
|
||||
.site-nav {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 14px; right: 8px;
|
||||
background-color: white;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
color: #505050;
|
||||
float: right;
|
||||
width: 36px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon svg { width: 18px; height: 16px; }
|
||||
|
||||
.site-nav .trigger {
|
||||
clear: both;
|
||||
margin-bottom: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav:hover .trigger { display: block; }
|
||||
|
||||
.site-nav .page-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
line-height: 1.25;
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-header h1 { font-size: 36px; }
|
||||
.post-content h2 { font-size: 28px; }
|
||||
.post-content h3 { font-size: 22px; }
|
||||
.post-content h4 { font-size: 18px; }
|
||||
.post-content blockquote { padding-left: 10px; }
|
||||
.post-content ul,
|
||||
.post-content ol { padding-left: 10px; }
|
||||
|
||||
.site-footer .column {
|
||||
float: none;
|
||||
clear: both;
|
||||
width: auto;
|
||||
margin: 0 0 15px; }
|
||||
|
||||
}
|
||||
4
_site/css/sass/print.scss
Normal file
4
_site/css/sass/print.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Welcome to Compass. Use this file to define print styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
|
||||
|
||||
6
_site/css/sass/screen.scss
Normal file
6
_site/css/sass/screen.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Welcome to Compass.
|
||||
* In this file you should write your main styles. (or centralize your imports)
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
|
||||
|
||||
@import "compass/reset";
|
||||
5
_site/css/stylesheets/ie.css
Normal file
5
_site/css/stylesheets/ie.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Welcome to Compass. Use this file to write IE specific override styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <!--[if IE]>
|
||||
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
* <![endif]--> */
|
||||
849
_site/css/stylesheets/main.css
Normal file
849
_site/css/stylesheets/main.css
Normal file
@@ -0,0 +1,849 @@
|
||||
/*sadfasdf*/
|
||||
/* Base */
|
||||
/* ----------------------------------------------------------*/
|
||||
/* line 6, ../sass/main.scss */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* line 11, ../sass/main.scss */
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* line 13, ../sass/main.scss */
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
|
||||
/* line 21, ../sass/main.scss */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* line 23, ../sass/main.scss */
|
||||
a {
|
||||
color: #2a7ae2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* line 24, ../sass/main.scss */
|
||||
a:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* line 25, ../sass/main.scss */
|
||||
a:visited {
|
||||
color: #205caa;
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
/* line 30, ../sass/main.scss */
|
||||
.wrap:before,
|
||||
.wrap:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* line 31, ../sass/main.scss */
|
||||
.wrap:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* line 32, ../sass/main.scss */
|
||||
.wrap {
|
||||
max-width: 800px;
|
||||
padding: 0 30px;
|
||||
margin: 0 auto;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/* Layout Styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
/* Site header */
|
||||
/* line 45, ../sass/main.scss */
|
||||
.site-header {
|
||||
border-top: 5px solid #333;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
min-height: 56px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* line 54, ../sass/main.scss */
|
||||
.site-title,
|
||||
.site-title:hover,
|
||||
.site-title:visited {
|
||||
display: block;
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
letter-spacing: -1px;
|
||||
float: left;
|
||||
line-height: 56px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* line 65, ../sass/main.scss */
|
||||
.site-nav {
|
||||
float: right;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
/* line 70, ../sass/main.scss */
|
||||
.site-nav .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 72, ../sass/main.scss */
|
||||
.site-nav .page-link {
|
||||
margin-left: 20px;
|
||||
color: #727272;
|
||||
letter-spacing: -.5px;
|
||||
}
|
||||
|
||||
/* Site footer */
|
||||
/* line 80, ../sass/main.scss */
|
||||
.site-footer {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
/* line 85, ../sass/main.scss */
|
||||
.footer-heading {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* line 92, ../sass/main.scss */
|
||||
.site-footer .column {
|
||||
float: left;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* line 94, ../sass/main.scss */
|
||||
.footer-col-1 {
|
||||
width: 270px;
|
||||
/*fallback*/
|
||||
width: -webkit-calc(35% - 10px);
|
||||
width: -moz-calc(35% - 10px);
|
||||
width: -o-calc(35% - 10px);
|
||||
width: calc(35% - 10px);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* line 102, ../sass/main.scss */
|
||||
.footer-col-2 {
|
||||
width: 175px;
|
||||
/*fallback*/
|
||||
width: -webkit-calc(23.125% - 10px);
|
||||
width: -moz-calc(23.125% - 10px);
|
||||
width: -o-calc(23.125% - 10px);
|
||||
width: calc(23.125% - 10px);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* line 110, ../sass/main.scss */
|
||||
.footer-col-3 {
|
||||
width: 335px;
|
||||
/*fallback*/
|
||||
width: -webkit-calc(41.875%);
|
||||
width: -moz-calc(41.875%);
|
||||
width: -o-calc(41.875%);
|
||||
width: calc(41.875%);
|
||||
}
|
||||
|
||||
/* line 118, ../sass/main.scss */
|
||||
.site-footer ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* line 121, ../sass/main.scss */
|
||||
.site-footer li,
|
||||
.site-footer p {
|
||||
font-size: 15px;
|
||||
letter-spacing: -.3px;
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
/* line 128, ../sass/main.scss */
|
||||
.github-icon-svg,
|
||||
.twitter-icon-svg {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/* Page Content styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
/* line 140, ../sass/main.scss */
|
||||
.page-content {
|
||||
padding: 30px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Home styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
/* line 149, ../sass/main.scss */
|
||||
.home h1 {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* line 151, ../sass/main.scss */
|
||||
.posts {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* line 153, ../sass/main.scss */
|
||||
.posts li {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* line 155, ../sass/main.scss */
|
||||
.posts .post-link {
|
||||
font-size: 24px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* line 161, ../sass/main.scss */
|
||||
.posts .post-date {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
/* Post styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
/* line 171, ../sass/main.scss */
|
||||
.post-header {
|
||||
margin: 10px 0 30px;
|
||||
}
|
||||
|
||||
/* line 173, ../sass/main.scss */
|
||||
.post-header h1 {
|
||||
font-size: 42px;
|
||||
letter-spacing: -1.75px;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* line 180, ../sass/main.scss */
|
||||
.post-header .meta {
|
||||
font-size: 15px;
|
||||
color: #818181;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* line 186, ../sass/main.scss */
|
||||
.post-content {
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
/* line 188, ../sass/main.scss */
|
||||
.post-content > * {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* line 196, ../sass/main.scss */
|
||||
.post-content h1,
|
||||
.post-content h2,
|
||||
.post-content h3,
|
||||
.post-content h4,
|
||||
.post-content h5,
|
||||
.post-content h6 {
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
/* line 202, ../sass/main.scss */
|
||||
.post-content h2 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -1.25px;
|
||||
}
|
||||
|
||||
/* line 207, ../sass/main.scss */
|
||||
.post-content h3 {
|
||||
font-size: 26px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/* line 212, ../sass/main.scss */
|
||||
.post-content h4 {
|
||||
font-size: 20px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/* line 217, ../sass/main.scss */
|
||||
.post-content blockquote {
|
||||
border-left: 4px solid #e8e8e8;
|
||||
padding-left: 20px;
|
||||
font-size: 18px;
|
||||
opacity: .6;
|
||||
letter-spacing: -1px;
|
||||
font-style: italic;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
/* line 228, ../sass/main.scss */
|
||||
.post-content ul,
|
||||
.post-content ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* line 231, ../sass/main.scss */
|
||||
.post pre,
|
||||
.post code {
|
||||
border: 1px solid #d5d5e9;
|
||||
background-color: #eef;
|
||||
padding: 8px 12px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
/* line 242, ../sass/main.scss */
|
||||
.post code {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
/* line 245, ../sass/main.scss */
|
||||
.post ul,
|
||||
.post ol {
|
||||
margin-left: 1.35em;
|
||||
}
|
||||
|
||||
/* line 247, ../sass/main.scss */
|
||||
.post pre code {
|
||||
border: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* terminal */
|
||||
/* line 254, ../sass/main.scss */
|
||||
.post pre.terminal {
|
||||
border: 1px solid #000;
|
||||
background-color: #333;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* line 263, ../sass/main.scss */
|
||||
.post pre.terminal code {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Syntax highlighting styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
/* line 268, ../sass/main.scss */
|
||||
.highlight {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* line 269, ../sass/main.scss */
|
||||
.highlight .c {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Comment */
|
||||
/* line 270, ../sass/main.scss */
|
||||
.highlight .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
|
||||
/* Error */
|
||||
/* line 271, ../sass/main.scss */
|
||||
.highlight .k {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Keyword */
|
||||
/* line 272, ../sass/main.scss */
|
||||
.highlight .o {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Operator */
|
||||
/* line 273, ../sass/main.scss */
|
||||
.highlight .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Comment.Multiline */
|
||||
/* line 274, ../sass/main.scss */
|
||||
.highlight .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Comment.Preproc */
|
||||
/* line 275, ../sass/main.scss */
|
||||
.highlight .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Comment.Single */
|
||||
/* line 276, ../sass/main.scss */
|
||||
.highlight .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Comment.Special */
|
||||
/* line 277, ../sass/main.scss */
|
||||
.highlight .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
|
||||
/* Generic.Deleted */
|
||||
/* line 278, ../sass/main.scss */
|
||||
.highlight .gd .x {
|
||||
color: #000000;
|
||||
background-color: #ffaaaa;
|
||||
}
|
||||
|
||||
/* Generic.Deleted.Specific */
|
||||
/* line 279, ../sass/main.scss */
|
||||
.highlight .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Generic.Emph */
|
||||
/* line 280, ../sass/main.scss */
|
||||
.highlight .gr {
|
||||
color: #aa0000;
|
||||
}
|
||||
|
||||
/* Generic.Error */
|
||||
/* line 281, ../sass/main.scss */
|
||||
.highlight .gh {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* Generic.Heading */
|
||||
/* line 282, ../sass/main.scss */
|
||||
.highlight .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
|
||||
/* Generic.Inserted */
|
||||
/* line 283, ../sass/main.scss */
|
||||
.highlight .gi .x {
|
||||
color: #000000;
|
||||
background-color: #aaffaa;
|
||||
}
|
||||
|
||||
/* Generic.Inserted.Specific */
|
||||
/* line 284, ../sass/main.scss */
|
||||
.highlight .go {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* Generic.Output */
|
||||
/* line 285, ../sass/main.scss */
|
||||
.highlight .gp {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
/* Generic.Prompt */
|
||||
/* line 286, ../sass/main.scss */
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Generic.Strong */
|
||||
/* line 287, ../sass/main.scss */
|
||||
.highlight .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
/* Generic.Subheading */
|
||||
/* line 288, ../sass/main.scss */
|
||||
.highlight .gt {
|
||||
color: #aa0000;
|
||||
}
|
||||
|
||||
/* Generic.Traceback */
|
||||
/* line 289, ../sass/main.scss */
|
||||
.highlight .kc {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Keyword.Constant */
|
||||
/* line 290, ../sass/main.scss */
|
||||
.highlight .kd {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Keyword.Declaration */
|
||||
/* line 291, ../sass/main.scss */
|
||||
.highlight .kp {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Keyword.Pseudo */
|
||||
/* line 292, ../sass/main.scss */
|
||||
.highlight .kr {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Keyword.Reserved */
|
||||
/* line 293, ../sass/main.scss */
|
||||
.highlight .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Keyword.Type */
|
||||
/* line 294, ../sass/main.scss */
|
||||
.highlight .m {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
/* Literal.Number */
|
||||
/* line 295, ../sass/main.scss */
|
||||
.highlight .s {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String */
|
||||
/* line 296, ../sass/main.scss */
|
||||
.highlight .na {
|
||||
color: teal;
|
||||
}
|
||||
|
||||
/* Name.Attribute */
|
||||
/* line 297, ../sass/main.scss */
|
||||
.highlight .nb {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
/* Name.Builtin */
|
||||
/* line 298, ../sass/main.scss */
|
||||
.highlight .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Name.Class */
|
||||
/* line 299, ../sass/main.scss */
|
||||
.highlight .no {
|
||||
color: teal;
|
||||
}
|
||||
|
||||
/* Name.Constant */
|
||||
/* line 300, ../sass/main.scss */
|
||||
.highlight .ni {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
/* Name.Entity */
|
||||
/* line 301, ../sass/main.scss */
|
||||
.highlight .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Name.Exception */
|
||||
/* line 302, ../sass/main.scss */
|
||||
.highlight .nf {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Name.Function */
|
||||
/* line 303, ../sass/main.scss */
|
||||
.highlight .nn {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
/* Name.Namespace */
|
||||
/* line 304, ../sass/main.scss */
|
||||
.highlight .nt {
|
||||
color: navy;
|
||||
}
|
||||
|
||||
/* Name.Tag */
|
||||
/* line 305, ../sass/main.scss */
|
||||
.highlight .nv {
|
||||
color: teal;
|
||||
}
|
||||
|
||||
/* Name.Variable */
|
||||
/* line 306, ../sass/main.scss */
|
||||
.highlight .ow {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Operator.Word */
|
||||
/* line 307, ../sass/main.scss */
|
||||
.highlight .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
/* Text.Whitespace */
|
||||
/* line 308, ../sass/main.scss */
|
||||
.highlight .mf {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
/* Literal.Number.Float */
|
||||
/* line 309, ../sass/main.scss */
|
||||
.highlight .mh {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
/* Literal.Number.Hex */
|
||||
/* line 310, ../sass/main.scss */
|
||||
.highlight .mi {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
/* Literal.Number.Integer */
|
||||
/* line 311, ../sass/main.scss */
|
||||
.highlight .mo {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
/* Literal.Number.Oct */
|
||||
/* line 312, ../sass/main.scss */
|
||||
.highlight .sb {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Backtick */
|
||||
/* line 313, ../sass/main.scss */
|
||||
.highlight .sc {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Char */
|
||||
/* line 314, ../sass/main.scss */
|
||||
.highlight .sd {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Doc */
|
||||
/* line 315, ../sass/main.scss */
|
||||
.highlight .s2 {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Double */
|
||||
/* line 316, ../sass/main.scss */
|
||||
.highlight .se {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Escape */
|
||||
/* line 317, ../sass/main.scss */
|
||||
.highlight .sh {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Heredoc */
|
||||
/* line 318, ../sass/main.scss */
|
||||
.highlight .si {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Interpol */
|
||||
/* line 319, ../sass/main.scss */
|
||||
.highlight .sx {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Other */
|
||||
/* line 320, ../sass/main.scss */
|
||||
.highlight .sr {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
/* Literal.String.Regex */
|
||||
/* line 321, ../sass/main.scss */
|
||||
.highlight .s1 {
|
||||
color: #dd1144;
|
||||
}
|
||||
|
||||
/* Literal.String.Single */
|
||||
/* line 322, ../sass/main.scss */
|
||||
.highlight .ss {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
/* Literal.String.Symbol */
|
||||
/* line 323, ../sass/main.scss */
|
||||
.highlight .bp {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* Name.Builtin.Pseudo */
|
||||
/* line 324, ../sass/main.scss */
|
||||
.highlight .vc {
|
||||
color: teal;
|
||||
}
|
||||
|
||||
/* Name.Variable.Class */
|
||||
/* line 325, ../sass/main.scss */
|
||||
.highlight .vg {
|
||||
color: teal;
|
||||
}
|
||||
|
||||
/* Name.Variable.Global */
|
||||
/* line 326, ../sass/main.scss */
|
||||
.highlight .vi {
|
||||
color: teal;
|
||||
}
|
||||
|
||||
/* Name.Variable.Instance */
|
||||
/* line 327, ../sass/main.scss */
|
||||
.highlight .il {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
/* Literal.Number.Integer.Long */
|
||||
/* media queries */
|
||||
/* ----------------------------------------------------------*/
|
||||
@media screen and (max-width: 750px) {
|
||||
/* line 336, ../sass/main.scss */
|
||||
.footer-col-1 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* line 338, ../sass/main.scss */
|
||||
.footer-col-2 {
|
||||
width: 45%;
|
||||
/*fallback*/
|
||||
width: -webkit-calc(50% - 10px);
|
||||
width: -moz-calc(50% - 10px);
|
||||
width: -o-calc(50% - 10px);
|
||||
width: calc(50% - 10px);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* line 347, ../sass/main.scss */
|
||||
.site-footer .column.footer-col-3 {
|
||||
width: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
/* line 357, ../sass/main.scss */
|
||||
.wrap {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* line 359, ../sass/main.scss */
|
||||
.site-nav {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 14px;
|
||||
right: 8px;
|
||||
background-color: white;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
/* line 370, ../sass/main.scss */
|
||||
.site-nav .menu-icon {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
color: #505050;
|
||||
float: right;
|
||||
width: 36px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
/* line 380, ../sass/main.scss */
|
||||
.site-nav .menu-icon svg {
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* line 382, ../sass/main.scss */
|
||||
.site-nav .trigger {
|
||||
clear: both;
|
||||
margin-bottom: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 388, ../sass/main.scss */
|
||||
.site-nav:hover .trigger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* line 390, ../sass/main.scss */
|
||||
.site-nav .page-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
line-height: 1.25;
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* line 398, ../sass/main.scss */
|
||||
.post-header h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
/* line 399, ../sass/main.scss */
|
||||
.post-content h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
/* line 400, ../sass/main.scss */
|
||||
.post-content h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* line 401, ../sass/main.scss */
|
||||
.post-content h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* line 402, ../sass/main.scss */
|
||||
.post-content blockquote {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* line 404, ../sass/main.scss */
|
||||
.post-content ul,
|
||||
.post-content ol {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* line 406, ../sass/main.scss */
|
||||
.site-footer .column {
|
||||
float: none;
|
||||
clear: both;
|
||||
width: auto;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
}
|
||||
3
_site/css/stylesheets/print.css
Normal file
3
_site/css/stylesheets/print.css
Normal file
@@ -0,0 +1,3 @@
|
||||
/* Welcome to Compass. Use this file to define print styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
|
||||
3
_site/css/stylesheets/print2.css
Normal file
3
_site/css/stylesheets/print2.css
Normal file
@@ -0,0 +1,3 @@
|
||||
/* Welcome to Compass. Use this file to define print styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
|
||||
68
_site/css/stylesheets/screen.css
Normal file
68
_site/css/stylesheets/screen.css
Normal file
@@ -0,0 +1,68 @@
|
||||
/* Welcome to Compass.
|
||||
* In this file you should write your main styles. (or centralize your imports)
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
|
||||
/* line 17, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* line 22, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* line 24, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* line 26, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* line 28, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* line 30, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
/* line 103, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* line 32, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* line 116, ../../../../../../.rbenv/versions/1.9.3-p545/lib/ruby/gems/1.9.1/gems/compass-0.12.7/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
40
_site/feed.xml
Normal file
40
_site/feed.xml
Normal file
@@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Your awesome title</title>
|
||||
<description>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</description>
|
||||
<link>http://yourdomain.com/</link>
|
||||
<atom:link href="http://yourdomain.com/feed.xml" rel="self" type="application/rss+xml" />
|
||||
<pubDate>Wed, 23 Jul 2014 11:16:35 -0400</pubDate>
|
||||
<lastBuildDate>Wed, 23 Jul 2014 11:16:35 -0400</lastBuildDate>
|
||||
<generator>Jekyll v2.1.1</generator>
|
||||
|
||||
<item>
|
||||
<title>Welcome to Jekyll!</title>
|
||||
<description><p>You’ll find this post in your <code>_posts</code> directory - edit this post and re-build (or run with the <code>-w</code> switch) to see your changes!
|
||||
To add new posts, simply add a file in the <code>_posts</code> directory that follows the convention: YYYY-MM-DD-name-of-post.ext.</p>
|
||||
|
||||
<p>Jekyll also offers powerful support for code snippets:</p>
|
||||
|
||||
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
|
||||
<span class="nb">puts</span> <span class="s2">&quot;Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">&quot;</span>
|
||||
<span class="k">end</span>
|
||||
<span class="n">print_hi</span><span class="p">(</span><span class="s1">&#39;Tom&#39;</span><span class="p">)</span>
|
||||
<span class="c1">#=&gt; prints &#39;Hi, Tom&#39; to STDOUT.</span></code></pre></div>
|
||||
|
||||
<p>Check out the <a href="http://jekyllrb.com">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/jekyll/jekyll">Jekyll’s GitHub repo</a>.</p>
|
||||
|
||||
</description>
|
||||
<pubDate>Wed, 23 Jul 2014 06:55:39 -0400</pubDate>
|
||||
<link>http://yourdomain.com/jekyll/update/2014/07/23/welcome-to-jekyll/</link>
|
||||
<guid isPermaLink="true">http://yourdomain.com/jekyll/update/2014/07/23/welcome-to-jekyll/</guid>
|
||||
|
||||
|
||||
<category>jekyll</category>
|
||||
|
||||
<category>update</category>
|
||||
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
140
_site/index.html
Normal file
140
_site/index.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Your awesome title</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
|
||||
<link rel="canonical" href="http://yourdomain.com/">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="/css/stylesheets/main.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<a class="site-title" href="/">Your awesome title</a>
|
||||
|
||||
<nav class="site-nav">
|
||||
<a href="#" class="menu-icon">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 18 15" enable-background="new 0 0 18 15" xml:space="preserve">
|
||||
<path fill="#505050" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0
|
||||
h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
||||
<path fill="#505050" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484
|
||||
h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
||||
<path fill="#505050" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0
|
||||
c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="trigger">
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page-content">
|
||||
<div class="wrap">
|
||||
<div class="home">
|
||||
|
||||
<h1>Posts</h1>
|
||||
|
||||
<ul class="posts">
|
||||
|
||||
<li>
|
||||
<span class="post-date">Jul 23, 2014</span>
|
||||
<a class="post-link" href="/jekyll/update/2014/07/23/welcome-to-jekyll/">Welcome to Jekyll!</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<h2 class="footer-heading">Your awesome title</h2>
|
||||
|
||||
<div class="footer-col-1 column">
|
||||
<ul>
|
||||
<li>Your awesome title</li>
|
||||
<li><a href="mailto:your-email@domain.com">your-email@domain.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-2 column">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jekyll">
|
||||
<span class="icon github">
|
||||
<svg version="1.1" class="github-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C2C2C2" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761
|
||||
c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32
|
||||
c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472
|
||||
c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037
|
||||
C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65
|
||||
c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261
|
||||
c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082
|
||||
c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129
|
||||
c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">jekyll</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/jekyllrb">
|
||||
<span class="icon twitter">
|
||||
<svg version="1.1" class="twitter-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill="#C2C2C2" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27
|
||||
c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767
|
||||
c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206
|
||||
C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271
|
||||
c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469
|
||||
c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">jekyllrb</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-3 column">
|
||||
<p class="text">Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
148
_site/jekyll/update/2014/07/23/welcome-to-jekyll/index.html
Normal file
148
_site/jekyll/update/2014/07/23/welcome-to-jekyll/index.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Welcome to Jekyll!</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
|
||||
<link rel="canonical" href="http://yourdomain.com/jekyll/update/2014/07/23/welcome-to-jekyll/">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="/css/stylesheets/main.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<a class="site-title" href="/">Your awesome title</a>
|
||||
|
||||
<nav class="site-nav">
|
||||
<a href="#" class="menu-icon">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 18 15" enable-background="new 0 0 18 15" xml:space="preserve">
|
||||
<path fill="#505050" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0
|
||||
h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
|
||||
<path fill="#505050" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484
|
||||
h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
|
||||
<path fill="#505050" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0
|
||||
c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="trigger">
|
||||
|
||||
<a class="page-link" href="/about/">About</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page-content">
|
||||
<div class="wrap">
|
||||
<div class="post">
|
||||
|
||||
<header class="post-header">
|
||||
<h1>Welcome to Jekyll!</h1>
|
||||
<p class="meta">Jul 23, 2014</p>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
<p>You’ll find this post in your <code>_posts</code> directory - edit this post and re-build (or run with the <code>-w</code> switch) to see your changes!
|
||||
To add new posts, simply add a file in the <code>_posts</code> directory that follows the convention: YYYY-MM-DD-name-of-post.ext.</p>
|
||||
|
||||
<p>Jekyll also offers powerful support for code snippets:</p>
|
||||
|
||||
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
|
||||
<span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
|
||||
<span class="k">end</span>
|
||||
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
|
||||
<span class="c1">#=> prints 'Hi, Tom' to STDOUT.</span></code></pre></div>
|
||||
|
||||
<p>Check out the <a href="http://jekyllrb.com">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/jekyll/jekyll">Jekyll’s GitHub repo</a>.</p>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<h2 class="footer-heading">Your awesome title</h2>
|
||||
|
||||
<div class="footer-col-1 column">
|
||||
<ul>
|
||||
<li>Your awesome title</li>
|
||||
<li><a href="mailto:your-email@domain.com">your-email@domain.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-2 column">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jekyll">
|
||||
<span class="icon github">
|
||||
<svg version="1.1" class="github-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C2C2C2" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761
|
||||
c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32
|
||||
c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472
|
||||
c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037
|
||||
C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65
|
||||
c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261
|
||||
c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082
|
||||
c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129
|
||||
c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">jekyll</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/jekyllrb">
|
||||
<span class="icon twitter">
|
||||
<svg version="1.1" class="twitter-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<path fill="#C2C2C2" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27
|
||||
c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767
|
||||
c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206
|
||||
C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271
|
||||
c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469
|
||||
c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="username">jekyllrb</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col-3 column">
|
||||
<p class="text">Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
11
about.md
Normal file
11
about.md
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: page
|
||||
title: About
|
||||
permalink: /about/
|
||||
---
|
||||
|
||||
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/)
|
||||
|
||||
You can find the source code for the Jekyll new theme at: [github.com/jglovier/jekyll-new](https://github.com/jglovier/jekyll-new)
|
||||
|
||||
You can find the source code for Jekyll at [github.com/jekyll/jekyll](https://github.com/jekyll/jekyll)
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
24
css/config.rb
Normal file
24
css/config.rb
Normal file
@@ -0,0 +1,24 @@
|
||||
# Require any additional compass plugins here.
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "stylesheets"
|
||||
sass_dir = "sass"
|
||||
images_dir = "images"
|
||||
javascripts_dir = "javascripts"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# output_style = :expanded or :nested or :compact or :compressed
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
||||
5
css/sass/ie.scss
Normal file
5
css/sass/ie.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Welcome to Compass. Use this file to write IE specific override styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <!--[if IE]>
|
||||
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
* <![endif]--> */
|
||||
412
css/sass/main.scss
Normal file
412
css/sass/main.scss
Normal file
@@ -0,0 +1,412 @@
|
||||
/*sadfasdf*/
|
||||
|
||||
/* Base */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
|
||||
|
||||
a { color: #2a7ae2; text-decoration: none; }
|
||||
a:hover { color: #000; text-decoration: underline; }
|
||||
a:visited { color: #205caa; }
|
||||
|
||||
/* Utility */
|
||||
|
||||
.wrap:before,
|
||||
.wrap:after { content:""; display:table; }
|
||||
.wrap:after { clear: both; }
|
||||
.wrap {
|
||||
max-width: 800px;
|
||||
padding: 0 30px;
|
||||
margin: 0 auto;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Layout Styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
/* Site header */
|
||||
|
||||
.site-header {
|
||||
border-top: 5px solid #333;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
min-height: 56px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.site-title,
|
||||
.site-title:hover,
|
||||
.site-title:visited {
|
||||
display: block;
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
letter-spacing: -1px;
|
||||
float: left;
|
||||
line-height: 56px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
float: right;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon { display: none; }
|
||||
|
||||
.site-nav .page-link {
|
||||
margin-left: 20px;
|
||||
color: #727272;
|
||||
letter-spacing: -.5px;
|
||||
}
|
||||
|
||||
/* Site footer */
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.footer-heading {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.site-footer .column { float: left; margin-bottom: 15px; }
|
||||
|
||||
.footer-col-1 {
|
||||
width: 270px; /*fallback*/
|
||||
width: -webkit-calc(35% - 10px);
|
||||
width: -moz-calc(35% - 10px);
|
||||
width: -o-calc(35% - 10px);
|
||||
width: calc(35% - 10px);
|
||||
margin-right: 10px
|
||||
}
|
||||
.footer-col-2 {
|
||||
width: 175px; /*fallback*/
|
||||
width: -webkit-calc(23.125% - 10px);
|
||||
width: -moz-calc(23.125% - 10px);
|
||||
width: -o-calc(23.125% - 10px);
|
||||
width: calc(23.125% - 10px);
|
||||
margin-right: 10px
|
||||
}
|
||||
.footer-col-3 {
|
||||
width: 335px; /*fallback*/
|
||||
width: -webkit-calc(41.875%);
|
||||
width: -moz-calc(41.875%);
|
||||
width: -o-calc(41.875%);
|
||||
width: calc(41.875%);
|
||||
}
|
||||
|
||||
.site-footer ul { list-style: none; }
|
||||
|
||||
.site-footer li,
|
||||
.site-footer p {
|
||||
font-size: 15px;
|
||||
letter-spacing: -.3px;
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
.github-icon-svg,
|
||||
.twitter-icon-svg {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
|
||||
/* Page Content styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.page-content {
|
||||
padding: 30px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Home styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.home h1 { margin-bottom: 25px; }
|
||||
|
||||
.posts { list-style-type: none; }
|
||||
|
||||
.posts li { margin-bottom: 30px; }
|
||||
|
||||
.posts .post-link {
|
||||
font-size: 24px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.posts .post-date {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
|
||||
/* Post styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.post-header { margin: 10px 0 30px; }
|
||||
|
||||
.post-header h1 {
|
||||
font-size: 42px;
|
||||
letter-spacing: -1.75px;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.post-header .meta {
|
||||
font-size: 15px;
|
||||
color: #818181;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.post-content { margin: 0 0 30px; }
|
||||
|
||||
.post-content > * { margin: 20px 0; }
|
||||
|
||||
|
||||
.post-content h1,
|
||||
.post-content h2,
|
||||
.post-content h3,
|
||||
.post-content h4,
|
||||
.post-content h5,
|
||||
.post-content h6 {
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -1.25px;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 26px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.post-content h4 {
|
||||
font-size: 20px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.post-content blockquote {
|
||||
border-left: 4px solid #e8e8e8;
|
||||
padding-left: 20px;
|
||||
font-size: 18px;
|
||||
opacity: .6;
|
||||
letter-spacing: -1px;
|
||||
font-style: italic;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.post-content ul,
|
||||
.post-content ol { padding-left: 20px; }
|
||||
|
||||
.post pre,
|
||||
.post code {
|
||||
border: 1px solid #d5d5e9;
|
||||
background-color: #eef;
|
||||
padding: 8px 12px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
overflow:scroll;
|
||||
}
|
||||
|
||||
.post code { padding: 1px 5px; }
|
||||
|
||||
.post ul,
|
||||
.post ol { margin-left: 1.35em; }
|
||||
|
||||
.post pre code {
|
||||
border: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* terminal */
|
||||
.post pre.terminal {
|
||||
border: 1px solid #000;
|
||||
background-color: #333;
|
||||
color: #FFF;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.post pre.terminal code { background-color: #333; }
|
||||
|
||||
/* Syntax highlighting styles */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
.highlight { background: #ffffff; }
|
||||
.highlight .c { color: #999988; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
.highlight .k { font-weight: bold } /* Keyword */
|
||||
.highlight .o { font-weight: bold } /* Operator */
|
||||
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #aa0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #999999 } /* Generic.Heading */
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
|
||||
.highlight .go { color: #888888 } /* Generic.Output */
|
||||
.highlight .gp { color: #555555 } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.highlight .kc { font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #009999 } /* Literal.Number */
|
||||
.highlight .s { color: #d14 } /* Literal.String */
|
||||
.highlight .na { color: #008080 } /* Name.Attribute */
|
||||
.highlight .nb { color: #0086B3 } /* Name.Builtin */
|
||||
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #008080 } /* Name.Constant */
|
||||
.highlight .ni { color: #800080 } /* Name.Entity */
|
||||
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
|
||||
.highlight .nn { color: #555555 } /* Name.Namespace */
|
||||
.highlight .nt { color: #000080 } /* Name.Tag */
|
||||
.highlight .nv { color: #008080 } /* Name.Variable */
|
||||
.highlight .ow { font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #009999 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #d14 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #d14 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #d14 } /* Literal.String.Double */
|
||||
.highlight .se { color: #d14 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #d14 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #d14 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #009926 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #d14 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
|
||||
|
||||
/* media queries */
|
||||
/* ----------------------------------------------------------*/
|
||||
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
|
||||
.footer-col-1 { width: 50%; }
|
||||
|
||||
.footer-col-2 {
|
||||
width: 45%; /*fallback*/
|
||||
width: -webkit-calc(50% - 10px);
|
||||
width: -moz-calc(50% - 10px);
|
||||
width: -o-calc(50% - 10px);
|
||||
width: calc(50% - 10px);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.site-footer .column.footer-col-3 {
|
||||
width: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
.wrap { padding: 0 12px; }
|
||||
|
||||
.site-nav {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 14px; right: 8px;
|
||||
background-color: white;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
color: #505050;
|
||||
float: right;
|
||||
width: 36px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon svg { width: 18px; height: 16px; }
|
||||
|
||||
.site-nav .trigger {
|
||||
clear: both;
|
||||
margin-bottom: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav:hover .trigger { display: block; }
|
||||
|
||||
.site-nav .page-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
line-height: 1.25;
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-header h1 { font-size: 36px; }
|
||||
.post-content h2 { font-size: 28px; }
|
||||
.post-content h3 { font-size: 22px; }
|
||||
.post-content h4 { font-size: 18px; }
|
||||
.post-content blockquote { padding-left: 10px; }
|
||||
.post-content ul,
|
||||
.post-content ol { padding-left: 10px; }
|
||||
|
||||
.site-footer .column {
|
||||
float: none;
|
||||
clear: both;
|
||||
width: auto;
|
||||
margin: 0 0 15px; }
|
||||
|
||||
}
|
||||
4
css/sass/print.scss
Normal file
4
css/sass/print.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Welcome to Compass. Use this file to define print styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
|
||||
|
||||
6
css/sass/screen.scss
Normal file
6
css/sass/screen.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Welcome to Compass.
|
||||
* In this file you should write your main styles. (or centralize your imports)
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
|
||||
|
||||
@import "compass/reset";
|
||||
5
css/stylesheets/ie.css
Normal file
5
css/stylesheets/ie.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Welcome to Compass. Use this file to write IE specific override styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <!--[if IE]>
|
||||
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
* <![endif]--> */
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user