Twig для верстальщика и фронтендера

Лиза Позднякова

Twig для верстальщика и фронтендера

Лиза Позднякова

TWIG

TWIG LOGO
Fabien Potencier
Armin Ronacher

Armin Ronacher

Давайте использовать

но зачем

Преимущества

Что он умеет:

Структура проекта

Шаблон документа — layout.twig

            <head>
                <title>{{ title | default("Axiom") }}</title>
                {% block styles %}{% endblock %}
                <link href="css/style.css" rel="stylesheet">
            </head>
            
            <body class="page {{ class }}">
                {% block body %}{% endblock %}
                <script src="js/scripts.js"></script>
                {% block scripts %}{% endblock %}
            </body>
        

Шаблон конкретной страницы — index.twig

            {% extends "core/layout.twig" %}
            {% set title = "AxiomSL" %} 
            {% set class = "frontpage" %} 
            {% block body %} 
                {% include 'blocks/card.twig' %}             
            {% endblock %}
            {% block scripts %}
                <script> <!-- здесь какой-то скритпт --> </script>
            {% endblock %}
        

Шаблон блока — card.twig

            <article class="card card--{{ mod }}">
                <img src="img/{{ image }}" alt="" class="card__image">
                <p class="card__heading">{{ heading }}</p>
            </article>
        

Один БЭМ-блок — один файл

Переменные

Зачем?

Чтобы не повторять многократно одно и то же

Способы работы с переменными

  1. прямо в контент {{ "Привет #{name}! }}
  2. with при вставке блока с include
     {% include 'blocks/card.twig' with {heading: 'Pikachu'} %}
  3. через атрибут set, если используется extends
    {% set class = "frontpage" %}
  4. вставка объекта на страницу
  5. c помощью json-файла

data.json

в начале шаблона {% set card_name = 'pikachu' %}

вставка переменной {{ cards[card_name].heading }}

            {
                "cards": {
                    "pikachu": {
                        mod: 'black', 
                        heading: 'Pikachu',
                    }
                }
            }
        

Фильтры

Зачем?

Изменять выведенный в шаблон контент

{{ 'chermander'|upper }}
       {% filter upper %}
           Этот текст будет в верхнем регистре
       {% endfilter %}
       

Типы фильтров

Полный список фильтров

Макросы

Зачем?

Устанавливать значения для аргументов по умолчанию

        {% macro button(text = "Отправить", type = "button", color = "green") %}
            <button type="{{ type }}" data-color={{ color }}> {{ text }}</button>
        {% endmacro %}
        

Можно использовать макроc внутри макроса

Вставка макроса

         {% import "button.twig" as buttons %} // задаем название шаблона  
         {{ buttons.button }} 
         // обращаемся к шаблону и используем его название макроса 
         {{ buttons.button('Сражаться', 'submit', 'red') }}     
          // изменяем дефолтные значения переменных
    

Функции

Зачем?

Генерированиt контента на уровне шаблона

        {{ random(['pikachu', 'chermander', 'bulbasaur']) }}   
        // вернет рандомного покемона 
        

Типы функций

Полный список функций

Операторы

Зачем?

Возможность выбора что рендерить в шаблоне

Все операторы

Экранирование

— это замена в коде символов, отвечающих за синтаксис

Ещё больше возможностей

Сборка

gulp таск

        gulp.task('twig', function () { 
            gulp.src(paths.templates + '*.twig') 
            .pipe(twig())  
            .pipe(gulp.dest(paths.html)) 
            .pipe(reload({ 
                stream: true 
            })); 
        }); 
        

Плагины для ide

Больше ide

Ссылки

Вопросы?