Twig of Twigs

guy kicking Godzilla's butt

If you've every wanted to kick Godzilla's butt, now is the time! Break out your keyboard and flex those keys to the heat of a laser. Once you hit mach 2 speed, you'll be able to pierce right through the stratosphere and straight into Godzilla!

After a mighty task like that, writing Twig must be pretty easy ;) With this handy guide, you'll dive head first into basics and most frequently used elements of Twig.

If you're looking for a more in-depth tutorial, check out my past post to learn twig with trees.

Tree of Contents:

Twig & Gulp

  var gulp = require('gulp'),
    packageJSON = require('./package.json'),
    twig = require('gulp-twig'),
    rename = require('gulp-rename');

gulp.task('twig', function() {

  return gulp.src([
    'twig/templates/*.twig',
    '!twig/templates/_*.twig'
    ])
    .pipe(twig({
      data: packageJSON,
      cache: true
    }))
    .pipe(rename({
      extname: '.html'
    }))
    .pipe(gulp.dest('static/templates'));

});

Variables

  {# Declaration #}
{% set string = 'Willow' %}
{% set number = 100 %}
{% set array = ['Elm', 'Cedar'] %}
{% set object = {
  label: 'Sugar',
  name: 'Maple'
} %}

{# Usage #}
<p>{{string}}</p>
<p>{{object.label}}</p>

Iterations

  {# Simple Arrays #}
{% set array = ['Driftwood', 'Oak'] %}

{% for item in array %}
  <p>{{item}}</p>
{% endfor %}

{# Nested Arrays #}
{% set nestedArray = [
  {
    name: 'Birch',
    children: ['Betula', 'Alders']
  },
  {
    name: 'Fig',
    children: ['Ficus', 'Vines', 'Epiphyte']
  }
] %}

{% for item in nestedArray %}
  <h2>{{item.name}}</h2>
  {% for child in item.children %}
    <p>{{child}}</p>
  {% endfor %}
{% endfor %}

Filters

  {{variable|default('Sugar Maple')}}

{{'Sweet Gum'|replace({
  'Gum': 'Bubble'
})}}

{{["baby jazz", "rock smooth"]|length}}
{{'chestnut oak'|capitalize}}
{{'eastern hemlock'|upper}}

Conditionals

  {% if item %}
  <p>{{item}}</p>
{% endif %}

{% if condition %}
{% elseif condition %}
{% else %}
{% endif %}

{% if item == 'Oak' or item == 'Fern' %}
{% elseif item != 'Pine' and item != 'Plum' %}
{% endif %}

Macros

  {# Define #}
{# comma separated parameters can be a string, number, array, or object #}
{% macro item(data) %}
  <h2>{{data.name}}</h2>
  <h3>{{data.type}}</h3>
{% endmacro %}

{# Import macro from a different file #}
{% import 'maple.twig' as bank %}

{# Import from the same file #}
{% import _self as bank %}

{# Usage #}
{{bank.item({
  name: 'orange',
  type: 'tree'
})}}

Includes

  {% include 'tree.twig' %}

{% include 'tree.twig' with {
  name: 'Hazel',
  siblings: ['Juniper', 'Linden']
} %}

Extends & Blocks

  {# base.twig #}
{% block pageData %}
  {% set page = {
    title: 'Title'
  } %}
{% endblock %}
<html>
  <head>
    <title>{{page.title}}</title>
  </head>
  <body>
    <main>
      {% block main %}
        <p>Meet Olive and Spruce, a surprising match fit for a romance novel.</p>
      {% endblock %}
    </main>
  </body>
</html>

  {# about.twig #}
{% extends 'base.twig' %}

{% block pageData %}
  {% set page = {
    title: 'Tree Love'
  } %}
{% endblock %}

{% block main %}
  {{parent()}}
  <p>Who knew they could be so lovely together!</p>
{% endblock %}

Branches of Contents:

That's a wrap yall!

hamster godzilla going crazy

I'd love to hear how you all use twig on a day to day basis. Plant a comment down below and let's get this cheat sheet really sproutin!


1,049 4 13