Skip to content

Latest commit

 

History

History
83 lines (49 loc) · 3.08 KB

exercise_06-intro-to-twig.md

File metadata and controls

83 lines (49 loc) · 3.08 KB
Raw

Drupal 8 Theming

Exercise 6:

Intro to Twig

Twig is a modern, advanced, templating language for PHP. Twig is also the new templating engine for Drupal 8. It replaces the old and antiquated phptemplate engine. Twig is fast, secure, and incredibly flexible, but one of its best attributes is that it does not allow some of the bad habits in Drupal theming that phptemplate allowed in the past. (I'm referring to stuff like database queries and data preprocessing in the template files. We've all done it at some point, and yes, we are all ashamed.)

If debugging is not enabled, please see "Exercise 1"

Basic Twig

There are 3 Basic Syntaxes of Twig. Mostly, we will use just 2 of them.

###The “Say Something” Syntax: {{ ... }}

The double-curly-brace ({{) is always used to print something. If whatever you need to do will result in something being printed to the screen, then you’ll use this syntax. I call this the “say something” tag, because it’s how you “speak” in Twig.

  • Printing a variable

    {{ content }}

###The “Do Something” Syntax: {% ... %}

The curly-percent ({%) is the other syntax, which we call the “do something” syntax. It’s used for things like if and for tags as well as other things that “do” something. There are only a handful of things that can be used inside of it. See Twig’s documentation for all Twig functionality. Twig tags can be used inside of a “do something” statement. The only ones you need to worry about now are if and for. We’ll talk about a bunch more of these later.

  • Running a conditional check (in this case, check if the variable 'logo' is set, if so print the logo)

    {% if logo %}
    {{ logo }}
{% endif %}

  • Running a loop and printing a value (in this case, for each product item in products array, it'll print out the product item content)

    {% for product in products %}
    <h2>{{product}}</h2>
{% endfor %}

###The Comment Syntax: {# ... #}

There is a third syntax, used for comments: {#. Just like with the “say something” and “do something” syntaxes, write the opening {# and also the closing #} at the end of your comments:

  • An example comment

    {# This is a comment for you to enjoy :) #}

What's in a twig template

  1. Open your theme's node.html.twig file in a text editor and add one of the following lines somewhere at the end of the twig template {{ dump(date) }} or {{ kint(content_attributes) }}

  2. Visit a node page, and lets see what it gives us.

Use Twig

Print out the bundle type for the node:

  1. Inspect the node.html.twig template, review the comments and variables.

  2. Add a line to output the the node's bundle type before <div{{ content_attributes.addClass('node__content') }}>:

    <h4>{{ node.bundle}}</h4>

  3. Clear cache, visit (or refresh) a node.

##Questions you may have

  • Can I modify a variable through Twig?

Done ☺

Get your Exercise 7 - Regions on.