Skip to content

C
crscd-view12.10
Switch branch/tag
Find file
Normal viewHistoryPermalink
index.html 5.13 KB
Newer Older
YazhouChen's avatar
11
82002de4
 
YazhouChen committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>Hogan.js</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="stylesheets/skeleton.css">
	<link rel="stylesheet" href="stylesheets/layout.css">

</head>
<body>



	<!-- Primary Page Layout
	================================================== -->

	<header class="hogan-hero">
		<div class="stripes"></div>
		<div class="noise"></div>
		<div class="container">
			<h1>Hogan.js</h1>
			<h3>JavaScript templating from Twitter.</h3>
			<a href="https://github.com/twitter/hogan.js" class="download button">View on Github</a>
		</div>
	</header>
		<div class="primary container">

		<!--  Layout 1  -->
		<div class="five columns">
			<h4>Getting started</h4>
			<p>
				Hogan.js is a 2.5k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.
			</p>
			<p>
				If you're developing with Node.js, just use NPM to add the Hogan package.
			</p>
			<pre><code>$ npm install hogan.js</code></pre>
			<p>
				Alternatively, drop hogan.js in your browser by adding the following script.
			</p>
			<pre><code>&lt;script src="http://twitter.github.com/hogan.js/builds/3.0.0/hogan-3.0.0.js"&gt;&lt;/script&gt;</code></pre>

		</div>
		<div class="ten columns offset-by-one">
			<script src="https://gist.github.com/1484613.js"> </script>
		</div>
		<div class="hogan-divider">
			<div class="hogan-icon"></div>
		</div>

		<!--  Layout 2  -->
		<div class="five columns">
			<h4>Templates</h4>
			<p>
				Hogan.js was developed against the mustache test suite, so everything that holds true for templates as specified <a href="//mustache.github.com/mustache.5.html">here</a>, is also the case for hogan.js.
			</p>
			<p>
				That means you get variables, sections, lambdas, partials, filters, and everything else you've come to expect from mustache templating - only much, much faster.
			</p>
		</div>
		<div class="ten columns offset-by-one">
			<script src="https://gist.github.com/1484342.js"></script>
		</div>
		<div class="hogan-divider">
			<div class="hogan-icon"></div>
		</div>

		<!--  Layout 3  -->
		<div class="five columns">
			<h4>Compiling</h4>
			<p>
				Use <code>hogan.compile()</code> to precompile your templates into vanilla JS.
			</p>
			<p>
				It's best to serve your templates precompiled whenever you can (rather than the raw templates), as parsing is the most time consuming operation.
			</p>
			<p>
			</p>
		</div>
		<div class="ten columns offset-by-one">
			<script src="https://gist.github.com/1484513.js"> </script>
		</div>
		<div class="hogan-divider">
			<div class="hogan-icon"></div>
		</div>

		<!--  Layout 4  -->
		<div class="five columns">
			<h4 id='rendering'>Rendering</h4>
			<p>
				Once compiled, call the <code>render()</code> method with a context and optional partials object.
			</p>
			<p>
				If supplying partials, you can compile them ahead of time, or pass string templates.</p>
			<p>
			</p>
		</div>
		<div class="ten columns offset-by-one">
			<script src="https://gist.github.com/1575714.js"> </script>
		</div>
		<div class="hogan-divider">
			<div class="hogan-icon"></div>
		</div>


		<!--  Layout 5  -->
		<div class="five columns">
			<h4 id='rendering'>Hulk</h4>
			<p>
				Hulk is Hogan's command line utility. Use it to easily compile your templates as js files.
			</p>
			<p>
				Hulk supports the <code>*</code> wilcard (even on windows) and allows you to target specific file extensions as well.</p>
			<p>
			</p>
		</div>

		<div class="ten columns offset-by-one">
			<script src="https://gist.github.com/2322961.js"> </script>
		</div>

		<div class="sixteen columns hogan-footer">
			<span class="copyright">
				Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/sayrer" target="_blank">@sayrer</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
          Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
			</span>
			<span class="colophon">
				<a href="#">Back to top</a>
			</span>
		</div>

	</div><!-- container -->


<!-- End Document
================================================== -->
</body>
</html>