/hyde/layouts/starter/content/first-steps.html
HTML | 85 lines | 61 code | 24 blank | 0 comment | 0 complexity | 8a66f4c835a967c027aa12b085ef23e3 MD5 | raw file
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 %}