Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Template Organization in Craft

Template Organization in Craft

Use the power of Craft and Twig to create a context-focused templating system that is as flexible, powerful, and manageable as you need.

Anthony Colangelo

June 17, 2014
Tweet

More Decks by Anthony Colangelo

Other Decks in Technology

Transcript

  1. Home ⌂ index.html Blog blog.html Events events.html Photos photos.html Photo

    Blog Post blog- post.html Event event- detail.html
  2. Home ⌂ index.html Blog blog.html Events events.html Photos photos.html Blog

    Post blog- post.html Event event- detail.html Photo photo- detail.html
  3. ! ! ! {% for entry in craft.entries.section(['blog','event','photo']) %} <article>

    <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> {% endfor %} index.html {% extends "layout" %} ! {% block content %} {% endblock %}
  4. ! ! ! {% for entry in craft.entries.section('blog') %} <article>

    <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> {% endfor %} blog.html {% extends "layout" %} ! {% block content %} {% endblock %}
  5. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser' %} index.html
  6. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser-'~entry.section.handle %} index.html
  7. templates layout.html index.html teaser.html ! ! ! blog event photo

    teaser-blog.html teaser-event.html teaser-photo.html
  8. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> <p class="meta"><time>{{ entry.postDate.format("F

    jS, Y") }}</time></p> </article> teaser-blog.html <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> <p class="meta"><time>{{ entry.startTime.format("F jS, Y") }}</time></p> <address>{{ entry.location }}</address> </article> teaser-event.html
  9. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser-'~entry.section.handle %} index.html
  10. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser-'~entry.section.handle %} index.html
  11. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include ['teaser-'~entry.section.handle, 'teaser'] %} index.html
  12. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(['blog','event','photo']) %} ! {% endfor %} {% endblock %} {% include 'teaser' %} index.html
  13. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> ! ! </article>

    {% block teaserContent %} {% endblock %} teaser/default.html
  14. {% extends "teaser/default" %} ! {% block teaserContent %} <p

    class="meta"><time>{{ entry.postDate.format("F jS, Y") }}</time></p> {% endblock %} {% extends "teaser/default" %} ! {% block teaserContent %} <p class="meta"><time>{{ entry.startTime.format("F jS, Y") }}</time></p> <address>{{ entry.location }}</address> {% endblock %} teaser/blog.html teaser/event.html
  15. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(entry.channel) %} {% include 'teaser' %} {% endfor %} {% endblock %} landing/default.html
  16. {% for block in matrix %} {% include ['matrix/' ~

    block.type ~ '-' ~ entry.section.handle, 'matrix/' ~ block.type] %} {% endfor %} matrix.html
  17. {% include ['teaser/' ~ entry.section.handle, 'teaser/default'] %} ! {% include

    ['entry/' ~ entry.section.handle, 'entry/default'] %} ! {% include ['landing/' ~ entry.channel, 'landing/default'] %} ! {% include ['matrix/' ~ block.type ~ '-' ~ entry.section.handle, 'matrix/' ~ block.type] %}