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.

4b9a52ce862b15437f17695c02c61467?s=128

Anthony Colangelo

June 17, 2014
Tweet

Transcript

  1. None
  2. Template Organization

  3. Credit: https://www.flickr.com/photos/rubbermaid/5630536467

  4. Credit: https://www.flickr.com/photos/jdtornow/5132907504

  5. Credit: http://www.bonkersworld.net/building-software

  6. None
  7. None
  8. Sample Site

  9. Photos Events Blog

  10. Home ⌂

  11. Home ⌂ Events Blog Photos

  12. Event Blog Post Photo Home ⌂ Events Blog Photos

  13. Event Blog Post Photo Events Blog Photos Home ⌂ index.html

  14. Event Blog Post Photo Home ⌂ index.html Events Photos Blog

    blog.html
  15. Home ⌂ index.html Event Blog Post Photo Photos Blog blog.html

    Events events.html
  16. Event Blog Post Photo Home ⌂ index.html Blog blog.html Events

    events.html Photos photos.html
  17. Home ⌂ index.html Blog blog.html Events events.html Photos photos.html Event

    Photo Blog Post blog- post.html
  18. Home ⌂ index.html Blog blog.html Events events.html Photos photos.html Photo

    Blog Post blog- post.html Event event- detail.html
  19. 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
  20. templates index.html blog.html blog-post.html events.html event-detail.html photos.html photo-detail.html

  21. templates ... blog.html blog-post.html ... ! !

  22. templates ... blog blog.html blog-post.html ... !

  23. templates ... blog index.html blog-post.html ... !

  24. templates ... blog index.html post.html ... !

  25. templates index.html blog index.html post.html event index.html detail.html photo index.html

    detail.html
  26. templates index.html blog event photo

  27. templates ! index.html blog event photo layout.html

  28. {% extends "layout" %} ! ! {% block content %}

    ... {% endblock %}
  29. templates layout.html index.html blog index.html post.html event index.html detail.html photo

    index.html detail.html
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. Home ⌂ Events Blog Photos

  37. ! ! ! {% 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 %}
  38. ! ! ! {% 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 %}
  39. None
  40. templates layout.html index.html ! blog event photo teaser.html

  41. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> teaser.html

  42. {% extends "layout" %} ! {% block content %} {%

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

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

    teaser-blog.html teaser-event.html teaser-photo.html
  48. <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
  49. {% extends "layout" %} ! {% block content %} {%

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

  51. {% extends "layout" %} ! {% block content %} {%

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

  53. None
  54. None
  55. {% extends "layout" %} ! {% block content %} {%

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

  57. templates ! ... teaser.html teaser-blog.html teaser-event.html teaser-photo.html ...

  58. templates ! ... teaser teaser.html teaser-blog.html teaser-event.html teaser-photo.html ...

  59. templates ! ... teaser teaser.html blog.html event.html photo.html ...

  60. templates ! ... teaser default.html blog.html event.html photo.html ...

  61. templates ! ... teaser.html teaser default.html blog.html event.html photo.html ...

  62. {% extends "layout" %} ! {% block content %} {%

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

  64. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> </article> teaser/default.html

  65. <article> <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2> ! ! </article>

    {% block teaserContent %} {% endblock %} teaser/default.html
  66. {% 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
  67. templates layout.html index.html teaser.html teaser blog event photo

  68. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing

  69. templates layout.html index.html teaser.html teaser ! ! landing.html landing entry.html

    entry
  70. None
  71. None
  72. None
  73. {% include ['entry/'~entry.section.handle, 'entry/default'] %} entry.html

  74. templates layout.html index.html teaser.html teaser entry.html entry ! landing.html landing

  75. None
  76. None
  77. {% include ['landing/'~entry.channel, 'landing/default'] %} landing.html

  78. {% extends "layout" %} ! {% block content %} {%

    for entry in craft.entries.section(entry.channel) %} {% include 'teaser' %} {% endfor %} {% endblock %} landing/default.html
  79. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing !

  80. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing !

    matrix.html matrix
  81. {% include 'matrix' with {'matrix': entry.body} %} entry/default.html

  82. {% for block in matrix %} {% include ['matrix/' ~

    block.type ~ '-' ~ entry.section.handle, 'matrix/' ~ block.type] %} {% endfor %} matrix.html
  83. matrix.html matrix blockquote.html blockquote-event.html gallery.html image.html image-blog.html text.html

  84. {% include 'matrix' with {'matrix': entry.body} %} entry/default.html

  85. None
  86. templates layout.html index.html teaser.html teaser entry.html entry landing.html landing matrix.html

    matrix
  87. {% include 'teaser' %}

  88. {% include 'matrix' with {'matrix': entry.body} %}

  89. {% 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] %}
  90. @acolangelo