Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

278 lines (226 sloc) 11.204 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii" />
<title>Liquid Templating language</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
body { margin: 0; margin-bottom: 25px; padding: 0; background-color: #f0f0f0; font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana"; font-size: 13px; color: #333; }
h1 { font-size: 28px; color: #000; }
h2 { font-size: 15px; color: #000; margin-top: 2em; margin-bottom: 0.5em; }
a {color: #03c}
a:hover { background-color: #03c; color: white; text-decoration: none; }
#page { width: 900px; margin: 0; margin-top: 20px; margin-left: auto; margin-right: auto; }
#content { float: left; background-color: white; border: 3px solid #aaa; padding: 25px; width: 650px; }
#sidebar { float: right; width: 175px; }
#footer { clear: both; padding: 5px 2px; color: #999; font-size: 9px; }
#header, #intro { padding-left: 10px; padding-right: 30px; }
#header h1, #header h2 { margin: 0 }
#header h2 { color: #888; font-weight: normal; font-size: 16px; }
#intro { border-top: 1px solid #ccc; margin-top: 25px; padding-top: 15px; }
#intro h1 { margin: 0; font-size: 20px; }
#intro ol { margin-left: 0; padding-left: 0; }
#intro li { font-size: 18px; color: #888; margin-bottom: 25px; }
#intro li p { color: #555; font-size: 13px; }
#sidebar ul { margin-left: 0; padding-left: 0; }
#sidebar ul h3 { margin-top: 25px; font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid #ccc; }
#sidebar li { list-style-type: none; }
#sidebar ul.links li { margin-bottom: 5px; }
#outtro { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #eee; color: #555; font-size: 9px; padding: 10px; margin: 5em 0 0 0; text-align: center; }
#outtro a { color: #333; }
#outtro a:hover { color: white; }
span.highlight { background: #ffc; }
table.downloads { width: 100%; border-spacing: 0 4px; }
table.downloads tr { height: 80px; }
table.downloads td { background: #efefef; }
table.downloads h2 { margin: 0; width: 100%; }
table.downloads .icon { text-align: center; width: 105px; }
table.downloads p.code { margin-right:10px; padding: 4px 10px; overflow: auto; border: 1px solid #aaa; border-left: 4px solid #aaa; }
table.code { margin: 0; padding: 0.5em; width: 100%; border-left: 4px solid #ddd; background: #efefef; }
/* Pygments */
.c { color: #999988; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { font-weight: bold } /* Keyword */
.o { font-weight: bold } /* Operator */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.c1 { color: #999988; font-style: italic } /* Comment.Single */
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #999999 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { font-weight: bold } /* Keyword.Constant */
.kd { font-weight: bold } /* Keyword.Declaration */
.kn { font-weight: bold } /* Keyword.Namespace */
.kp { font-weight: bold } /* Keyword.Pseudo */
.kr { font-weight: bold } /* Keyword.Reserved */
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */
.s { color: #bb8844 } /* Literal.String */
.na { color: #008080 } /* Name.Attribute */
.nb { color: #999999 } /* Name.Builtin */
.nc { color: #445588; font-weight: bold } /* Name.Class */
.no { color: #008080 } /* Name.Constant */
.ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; font-weight: bold } /* Name.Exception */
.nf { color: #990000; font-weight: bold } /* Name.Function */
.nn { color: #555555 } /* Name.Namespace */
.nt { color: #000080 } /* Name.Tag */
.nv { color: #008080 } /* Name.Variable */
.ow { font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #bb8844 } /* Literal.String.Backtick */
.sc { color: #bb8844 } /* Literal.String.Char */
.sd { color: #bb8844 } /* Literal.String.Doc */
.s2 { color: #bb8844 } /* Literal.String.Double */
.se { color: #bb8844 } /* Literal.String.Escape */
.sh { color: #bb8844 } /* Literal.String.Heredoc */
.si { color: #bb8844 } /* Literal.String.Interpol */
.sx { color: #bb8844 } /* Literal.String.Other */
.sr { color: #808000 } /* Literal.String.Regex */
.s1 { color: #bb8844 } /* Literal.String.Single */
.ss { color: #bb8844 } /* Literal.String.Symbol */
.bp { color: #999999 } /* Name.Builtin.Pseudo */
.vc { color: #008080 } /* Name.Variable.Class */
.vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */
/*]]>*/
</style>
<script type="text/javascript" src="javascripts/prototype.js">
</script>
<script type="text/javascript" src="javascripts/effects.js">
</script>
</head>
<body>
<div id="page">
<div id="sidebar">
<ul id="sidebar-items">
<li>
<h3>General</h3>
<ul class="links">
<li><a href="#download">Download</a></li>
<li><a href="https://groups.google.com/forum/#!forum/liquid-templates">Discussion</a></li>
<li><a href="https://github.com/Shopify/liquid/wiki">Documentation</a></li>
</ul>
</li>
<li>
<h3>Development</h3>
<ul class="links">
<li><a href="https://github.com/Shopify/liquid">GitHub</a></li>
<li><a href="https://github.com/Shopify/liquid/issues">Issues</a></li>
</ul>
</li>
<li>
<h3>Developers</h3>
<ul class="links">
<li><a href="http://www.shopify.com">Shopify</a></li>
<li><a href="http://blog.leetsoft.com">Tobias L&uuml;tke</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="header">
<h1>Liquid</h1>
<h2>Ruby library for rendering safe templates which cannot affect the security of the server they are rendered
on.</h2>
</div>
<div id="intro">
<p>Liquid is an <span class="highlight">extraction from the e-commerce system <a href=
"http://shopify.com">Shopify</a></span>. Shopify powers many thousands of e-commerce stores which all call for
unique designs. For this we developed Liquid which allows our customers complete design freedom while
maintaining the integrity of our servers.</p>
<p>Liquid has been in <span class="highlight">production use since June 2006</span> and is now used by many
other hosted web applications.</p>
<p>It was developed for usage in <span class="highlight">Ruby on Rails</span> web applications and
integrates seamlessly as a plugin but it also works excellently as a stand alone library.</p>
<h2>What does it look like?</h2>
<p>Example snippet:</p>
<table class="code">
<tr>
<td class="code">
<pre>
<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;products&quot;</span><span class="nt">&gt;</span>
{% for product in products %}
<span class="nt">&lt;li&gt;</span>
<span class="nt">&lt;h2&gt;</span>{{ product.title }}<span class="nt">&lt;/h2&gt;</span>
Only {{ product.price | format_as_money }}
<span class="nt">&lt;p&gt;</span>{{ product.description | prettyprint | truncate: 200 }}<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/li&gt;</span>
{% endfor %}
<span class="nt">&lt;/ul&gt;</span>
</pre>
</td>
</tr>
</table>
<p>Code to render</p>
<table class="code">
<tr>
<td class="code">
<pre>
<span class="no">Liquid</span><span class="o">::</span><span class="no">Template</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">template</span><span class="p">)</span><span class="o">.</span><span class="n">render</span> <span class="s1">&#39;products&#39;</span> <span class="o">=&gt;</span> <span class="no">Product</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="ss">:all</span><span class="p">)</span>
</pre>
</td>
</tr>
</table>
<h2 id="download">How do I get it?</h2>
<table class="downloads">
<tr>
<td class="icon"><img src="images/rubygems.png" width="100" height="100" alt="Rubygems" align=
"middle" /></td>
<td>
<h2>Rubygems</h2>
<p class="code"><code>gem install liquid</code></p>
</td>
</tr>
<tr>
<td class="icon"><img src="images/rails.png" width="60" alt="Ruby on Rails" /></td>
<td>
<h2>Ruby on Rails plugin</h2>
<h4>Rails 3.0</h4>
<p>Add <tt>gem 'liquid'</tt> to your Gemfile.</p>
<h4>Rails 2.3</h4>
<p class="code"><code>./script/plugin install \</code>
<code>&nbsp;&nbsp;git://github.com/Shopify/liquid.git</code></p>
</td>
</tr>
<tr>
<td class="icon"><img src="images/ruby.png" width="60" height="60" alt="Ruby" /></td>
<td>
<h2>Download Release</h2>
<p><a href="http://rubygems.org/gems/liquid">from RubyGems</a></p>
</td>
</tr>
<tr>
<td class="icon"><img src="images/ruby.png" width="60" height="60" alt="Ruby" /></td>
<td>
<h2>Git Clone</h2>
<p><a href="http://github.com/Shopify/liquid/commits/master">from Github</a></p>
</td>
</tr>
</table>
</div>
<div id="outtro">
<strong>Liquid</strong> is a sponsored and made possible by constant development from <a href=
"http://www.shopify.com">Shopify</a>.
</div>
</div>
<div id="footer">
&copy; 2011
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.