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

http://github.com/hyde/hyde · HTML · 85 lines · 61 code · 24 blank · 0 comment · 0 complexity · 8a66f4c835a967c027aa12b085ef23e3 MD5 · raw file

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