-
Notifications
You must be signed in to change notification settings - Fork 420
/
index.html
86 lines (75 loc) · 5.38 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<link href="/blog/feed.xml" rel="alternate" title="Middleman Blog" type="application/atom+xml">
<link href="/stylesheets/site.css" media="screen" rel="stylesheet" type="text/css">
<link href="/stylesheets/pygments/solarized.css?1312479203" media="screen" rel="stylesheet" type="text/css">
<title>Middleman: Local YAML Data</title>
</head>
<body>
<div id="frame">
<div class="container">
<aside><header><h1><a href="/">Middleman</a></h1>
<h4>Hand-crafted frontend development</h4>
</header><h3>All Guides</h3>
<nav><ul>
<li><a href="/guides/getting-started">Getting Started</a></li>
<li><a href="/guides/migrating">Migrating to Middleman 2.0</a></li>
<li><a href="/guides/templates-layouts-partials">Templates, Layouts and Partials</a></li>
<li><a href="/guides/sass-and-compass">Sass and Compass</a></li>
<li><a href="/guides/js-coffee-and-sprockets">Javascript, CoffeeScript and Sprockets</a></li>
<li><a href="/guides/dynamic-pages">Dynamic Pages</a></li>
<li><a href="/guides/pretty-urls">Pretty URLs (Directory Indexes)</a></li>
<li><a href="/guides/frontend-optimization">Frontend Optimization</a></li>
<li><a href="/guides/individual-page-configuration">Individual Page Configuration (YAML Frontmatter)</a></li>
<li><a href="/guides/livereload">LiveReload</a></li>
<li><a href="/guides/local-yaml-data">Local YAML Data</a></li>
<li><a href="/guides/extensions">Custom Extensions</a></li>
<li><a href="/guides/rack-middleware">Rack Middleware</a></li>
</ul></nav><h3>Blog Posts</h3>
<ul>
<li>
<small>Jul 11</small><br><a href="/blog/2011/07/11/brand-new-documentation">Brand New Documentation</a>
</li>
</ul>
<h3>Other</h3>
<ul>
<li><a href="/built-using-middleman">Sites Built Using Middleman</a></li>
</ul>
<footer><p>This site is itself a Middleman project.
Fork & contribute <a href="https://github.com/tdreyno/middleman-guides">on GitHub</a>.<br><br>
Middleman is open-source software licensed under the <a href="https://github.com/tdreyno/middleman/blob/master/LICENSE">MIT License</a>.<br><br>
© 2011 <a href="http://awardwinningfjords.com">Thomas Reynolds</a></p> </footer></aside><article id="main" role="main"><h1>Local YAML Data</h1>
<p>Sometimes it is useful to extract the data content of a page from the rendering. This way some team members can concentrate on building up the database on content, while another team member can build the structure of the site. Local YAML Data allows you to create <code>.yml</code> files in a folder called <code>data</code> and makes this information available in your templates.</p>
<p>Here's an example file at <code>data/people.yml</code> with the contents:</p>
<div class="highlight"><pre><span class="l-Scalar-Plain">friends</span><span class="p-Indicator">:</span>
<span class="p-Indicator">-</span> <span class="l-Scalar-Plain">Tom</span>
<span class="p-Indicator">-</span> <span class="l-Scalar-Plain">Dick</span>
<span class="p-Indicator">-</span> <span class="l-Scalar-Plain">Harry</span>
</pre></div>
<p>Now, anywhere in our template files, we will have access to this data:</p>
<div class="highlight"><pre><span class="x"><h1>Friends</h1></span>
<span class="x"><ol></span>
<span class="x"> </span><span class="cp"><%</span> <span class="n">data</span><span class="o">.</span><span class="n">people</span><span class="o">.</span><span class="n">friends</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">f</span><span class="o">|</span> <span class="cp">%></span><span class="x"></span>
<span class="x"> <li></span><span class="cp"><%=</span> <span class="n">f</span> <span class="cp">%></span><span class="x"></li></span>
<span class="x"> </span><span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span><span class="x"></span>
<span class="x"></ol></span>
</pre></div>
<p>Which will render:</p>
<div class="highlight"><pre><span class="nt"><h1></span>Friends<span class="nt"></h1></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>Tom<span class="nt"></li></span>
<span class="nt"><li></span>Dick<span class="nt"></li></span>
<span class="nt"><li></span>Harry<span class="nt"></li></span>
<span class="nt"></ol></span>
</pre></div>
<p>Notice that the name of the <code>.yml</code> file (people) is the name of the object which stores the data in your template: <code>data.people</code>.</p>
</article>
</div>
</div>
<!-- Google Analytics --><script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-90027-21']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })();</script>
</body>
</html>