/hyde/layouts/starter/content/first-steps.html

 1---
 2extends: base.j2
 3title: First steps
 4---
 5{# In-file metadata. Supplements data from the site's configuration file 
 6   and node (folder) level data in "meta.yaml" files.
 7
 8   Use the AutoExtendPlugin to extend templates from metadata. In this
 9   case the metadata and "extends" statement has to be on the top of the
10   file.
11#}
12
13{% block content %}
14Walk this way if you're a beginner
15==================================
16
17This template was created to look at its code. So you should spend about
185% of your time looking at the web from the outside and the other 95%
19tinkering with things under the hood.
20
21The template is not perfect nor does it contain the best practices. It
22is not even consistent. It is designed to help you with the learning
23process. If you follow the steps below, you'll get a pretty good picture of
24how things work. Every step adds some new features and builds upon the
25previous one.
26
27
281. Site structure and configuration file
29----------------------------------------
30
31The site is made of two folders and a [Hyde configuration][hyde_config]
32file. The folders are **content** and **layout**.
33
34**content** contains all your page content, blog articles, pictures and
35resources like CSS and JavaScript. Everything that is unique is here.
36
37**layout** contains templates and macros. Everything that you'll want to
38reuse is here.
39
40
412. Jinja2 template
42------------------
43
44**base.j2** is a very short and simple Jinja2 template. This way you can
45concentrate on some of the basic features. Notice meta and context
46variables invocation inside curly braces, dynamic media path generation
47and running all content through the Markdown filter.
48
49**macros.j2** contains macros for common and repetitive tasks.
50
51For more information or to try something new, visit the extensive [Jinja2
52documentation][jinja2_docs].
53
54
553. Content
56----------
57
58Look at the three files in this order: [index.html](index.html),
59[first-steps.html](first-steps.html) and [about.html](about.html).
60
61[Index](index.html) extends the base layout in the classic Jinja way and
62fills the content block with some simple Markdown data.
63
64[First steps](first-steps.html) goes a step furher. It introduces the
65in-file metadata that plugins will use to extend and fill the layout. It
66also uses some new Markdown features.
67
68[About](about.html) has a **default_block** metadata and mixes Markdown
69content with Jinja templates.
70
71[hyde_config]: http://hyde.github.com/config.html "Hyde configuration"
72[jinja2_docs]: http://jinja.pocoo.org/docs/templates/ "Jinja2 documentation"
73
74
754. Advanced sections
76--------------------
77
78While searching and navigating this template you'll find more files and
79sections than mentioned on this page (something like **meta.yaml**
80files, the **content/advanced** folder or other Jinja templates). Those
81files are needed for the [advanced topics](advanced/overview.html) so
82just ignore them at the beginning.  They will start to make sense while
83you're working through the template or will be explicitly explained when
84the right time comes.
85{% endblock %}