Newer
Older
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
---
So basically, if you have a document named `cool.md`, you would probably do the following:
```md
---
layout: page
title: Cool Stuff!
---
Awwwww dog!
```
Then, all you need is to create a layout named `page`, which your `.md` file will used to style itself (It's going to be HTML, of course):
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- This is the "title" variable we defined in the "cool.md". -->
<title>{{ title }}</title>
</head>
<body>
<!-- And here's where the magic happens! -->
{% raw %}{{ content }} {% endraw %}
</body>
</html>
```
So you see the {% raw %}`{{ content }}`{% endraw %}? That's a variable defined by the static site generator. It contains the HTML form of the content you wrote in `cool.md`, or any other document wishing to use that specific `page` layout.
Also, the {% raw %}`{{ title }}`{% endraw %} is a variable defined by the document, which is then passed to the `page` layout.
In most cases, you set variables in your content, and then your layout inherits those variables. This allows you to do a multitude of cool things, like setting a {% raw %}`{{title}}`{% endraw %} through the page as demonstrated above.
Basically, your content *defines* the variables, then your layout has access to them. It can then do whatever it wants.
You can also have data sets (this differentiates across generators), from which you can dynamically create the HTML for the header (or footer, whatever really). Here's an example using Liquid (a general-purpose language for templates):
```
{% raw %}{% for item in header_items %}
<a href="{{ item.link }}">{{ item.title }}</a>
{% endfor %}{% endraw %}
```
So instead of manually appending items to the header, you can set a state variable *outside* of the HTML, and then use that to generate HTML.
In most cases, a static site generator allows you to transform state (variables) into HTML. This saves you from manually entering this state into the HTML, as seen with your page: the footer is copy-pasted onto every site, with no generation.
They're good. Really. Try them out.