mirror of
https://github.com/kemko/liquid.git
synced 2026-01-01 15:55:40 +03:00
278 lines
11 KiB
HTML
278 lines
11 KiB
HTML
<!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ü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"><ul</span> <span class="na">id=</span><span class="s">"products"</span><span class="nt">></span>
|
|
{% for product in products %}
|
|
<span class="nt"><li></span>
|
|
<span class="nt"><h2></span>{{ product.title }}<span class="nt"></h2></span>
|
|
Only {{ product.price | format_as_money }}
|
|
|
|
<span class="nt"><p></span>{{ product.description | prettyprint | truncate: 200 }}<span class="nt"></p></span>
|
|
|
|
<span class="nt"></li></span>
|
|
{% endfor %}
|
|
<span class="nt"></ul></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">'products'</span> <span class="o">=></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> 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">
|
|
© 2011
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|