Anonymous user
A tour of the templates: Difference between revisions
no edit summary
imported>Paulproteus No edit summary |
imported>Paulproteus No edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
Line 9:
* A ''template file'' is a file (e.g., mysite/base/templates/base/base.html) that usually ends in ".html")
* Our templates make extensive use of template inheritance. You can read more about that in the Django documentation, or in [http://jeffcroft.com/blog/2006/feb/25/django-templates-the-power-of-inheritance/ this nice article]. The inheritance feature lets use replaceable, named ''blocks''.
* The OpenHatch code is broken up into different Django ''apps''. The [
== Who should read this? ==
Line 20:
== Begin at the begin: base.html ==
All web pages that render into HTML eventually extend from base.html. You can look at the [
=== Important template blocks in the <head> of the document ===
Line 26:
* '''title''': If you want your page to have a custom HTML TITLE, override the title block. It gets wrapped inside the '''whole_title''' block.
* '''js_in_head''': You can override this if your page needs to add JavaScript tags to the <head> section of the HTML document. Use sparingly, as putting JavaScript here will cause the browser to wait for the script to load before rendering the document.
* '''css''': If you want to add custom CSS, you can add it by extending this block. Be sure to
=== Generally useful template blocks for the <body> ===
The most useful one:
* '''content''': This is where the main page content goes. Probably, you're not going to be using base.html directly; you'll be inheriting from some page that inherits from it. That page will probably wrap your content in some more fluff.
The rest:
* '''body_id''' and '''body_class''': If you want your page to provide a hint to CSS as to what page it is, you can use these.
* '''nav''': This adds the top navigation links.
* '''greeting'': Some view functions set the "explain_to_anonymous_users" flag.
** Note: In my opinion, the greeting block should be extracted out, like '''greeting''.
* '''pagetop''': Stuff included toward the end of the navigation bar.
* '''footer''': You probably don't want to override this.
* '''js_before_bundle''' and '''js''': If you want to add JavaScript to the page, you can put it here. You should use '''js''' unless you know you have a reason not to.
** Note: If you're using this, you should probably talk to us on IRC or the mailing list about adding your JavaScript file to the bundle.
== A tour of a complex template: landing.html ==
This page:
* '''extends''' base.html.
It overrides:
* '''js_in_head''': It uses a quick JavaScript snippet that sets the CSS class of the <html> element to that JavaScript works. This is part of our [http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content fight against the flash of unstyled content/].
It uses:
* The '''cache''' template tag, so that lots of people loading this popular page doesn't cause us to do a lot of computation.
And then it mostly uses '''module'''s lay itself out. A '''module''' in the OpenHatch CSS is just a box, often with a header.
| |||