Twig is the core of this section.
If you master Twig:

• You gain easy points
• You avoid common traps
• You understand render flow
• You improve debugging speed

Exam mindset rule:

If question mentions:

• Markup output
• Template override
• Variable printing
• Escaping
• Template hierarchy

→ Think TWIG FIRST.

1. What Twig Is in Drupal

Twig is Drupal’s templating engine.

It replaces:

❌ PHP inside templates (Drupal 7)

With:

✔ Secure templating layer
✔ Auto-escaping
✔ Separation of logic and markup

Core integration:

Drupal\Core\Template\TwigEnvironment
Drupal\Core\Template\TwigExtension

Location:

core/lib/Drupal/Core/Template/

Drupal 10 & 11 use Twig 3.

2. Twig Syntax (Must Memorize for Exam)

Three main structures:

Output variable:

{{ variable }}

Logic:

{% if condition %}
{% endif %}

Comments:

{# comment #}

Exam Memory Rule:

{{ }} → print
{% %} → logic
{# #} → comment

3. Filters (Very Important)

Filters modify output.

Common filters tested:

Example:

{{ label|clean_class }}

Exam Trap:

Never use |raw unless absolutely required.

4. Control Structures

If statement:

{% if page.sidebar_first %}
  {{ page.sidebar_first }}
{% endif %}

Loop:

{% for item in items %}
  {{ item.content }}
{% endfor %}

Exam Pattern:

If you need to check region exists → use if.
If you need to loop fields → use for.

5. Twig + Drupal Variables

Common variables:

• page
• content
• attributes
• title_attributes
• content_attributes

Example:

<div{{ attributes }}>
  {{ content }}
</div>

Exam Reminder:

attributes variable is special — do not remove it.

6. attach_library in Twig

Correct way:

{{ attach_library('my_theme/global') }}

Never:

❌

Exam Trigger:
If question says "load JS for template only" → use attach_library.

7. Template Inheritance & Hierarchy

Template override order example (node):

node--article.html.twig
node--1.html.twig
node.html.twig

More specific = higher priority.

Exam Rule:

More hyphens → more specific template.

8. How Twig Gets Variables (Architect Understanding)

Flow:

Controller → Render Array → Preprocess → Twig

Twig never queries database.
Twig never loads entities.
Twig only prints.

Exam Trick Question:

Where should you add new variable for template?

Correct Answer:
Preprocess function.

9. Debugging Twig (Exam Awareness)

Enable Twig debug in services.yml.

Then Drupal prints template suggestions in HTML comments.

Exam concept:

Template discovery is done via suggestions.

10. Required vs Optional

11. Common Exam Traps

❌ Putting PHP inside Twig
❌ Using |raw carelessly
❌ Hardcoding JS
❌ Removing attributes variable
❌ Adding heavy logic in Twig

Exam Mental Shortcut:

Logic → preprocess
Markup → Twig
Assets → libraries

12. Real Project Scenario

Scenario:
Client wants custom class on article nodes.

Correct approach:

1. Override node--article.html.twig
2. Use {{ attributes.addClass('custom') }}

OR

Add class in preprocess.

Wrong approach:
Hardcode class in random div.

13. Interview Questions

1. Why does Drupal use Twig instead of PHP templates?
2. Explain Twig auto-escaping.
3. What is template suggestion hierarchy?
4. Where do variables passed to Twig come from?
5. When should you use preprocess instead of Twig logic?

14. Exam-Style Questions

Q1: What is the correct syntax to print a variable in Twig?
A.
B. {{ var }}
C. {% var %}
D. <%= var %>

Correct: B

Q2: Where should new variables for a template be added?
A. Inside Twig
B. Controller
C. Preprocess function
D. libraries.yml

Correct: C

Q3: Which filter prevents XSS?
A. raw
B. clean_class
C. escape
D. render

Correct: C

15. Quick Exam Memory Sheet

{{ }} → print
{% %} → logic
Preprocess → add variables
attach_library → load JS
More specific template → more hyphens
Never use |raw unless necessary