Twig Nedir? Nasıl Kullanılır?

Bu yazı öncesinde JavaScript dili ile yazılmış Handlebars.js ve Mustache.js'e değinmiştim. Şimdi sırada Grav teması yazarken ihtiyaç duyacağımız, oldukça geniş bir kullanıma sahip PHP tabanlı bir şablon (template) sistemi olan Twig var. Template yapıları ve işlemleri JavaScript dışından değerlendirildiğinde elbette çok daha farklı çözümler ve diller karşımıza çıkacaktır. Smarty, Blade ve yine Mustache en bilinen örneklerden birkaçı.

Tüm alternatiflerden bahsetmek elbette mümkün değil, en azından benim hedeflediğim noktayı göz önünde bulundurmam gerekirse. Tema hazırlama süreçlerinde Ghost, Grav ve WordPress üzerinden ilerlemek istediğim için template sistemlerini de bu uygulamalarla sınırlandırdım. Örneğin, bu uygulamalar arasında yer almayan ancak daha evvel bahsi geçmiş olan PrestaShop Smarty şablon moturunu kullanmakta¹. Ancak, ilerleyen zaman içerisinde, öncelikle ele almak istediğim konular arasında PrestaShop olmadığı için Smarty ile ilgili yazı yayınlamayacağım. Her neyse! Konumuza dönelim ve Twig şablon (template) sistemi motorunun ne olduğuna ve nasıl işlediğine yakından bakalım.

Twig Template Engine

Symfony framework²'un yaratıcılarından Fabien Potencier³ tarafından geliştirilmiştir. Sözdizimi Jinja⁴ ve Django⁵ yapılarını temel almaktadır. Süslü parantezler elbette Mustache‘i de hatırlatmaktadır. Symfony2 ile birlikte framework ön tanımlı şablon motoru olarak Twig⁶'i kullanmaktadır.

Twig Kurulumu

JavaScript temelli templane engine’lerden farklı olarak Twig kurulumu için birkaç farklı işlem uygulamamız gerekir. Elbette, kodların çalıştırılabilmesi için de Apache ve PHP desteği. macOS X Üzerinde Kurulumsuz PHP Çalıştırmak başlıklı yazımda macOS işletim sisteminin halihazırda PHP kodlarını kurulum gerektirmeksizin çalıştırabildiğine değinmiştim. O halde, sırada temel bir kurulum işleminin gerçekleştirilmesi var⁷.

Twig kurulumu için template engine’in Github sayfasında, release edilmiş son sürümü kullanabiliriz⁸. İlgili arşiv pakedini sunucuya çıkararak composer yardımıyla kurulum sürecini yürütelim.

composer require twig/twig:~2.7.4

Kısa bir beklemenin vendor klasörümüz oluşturulacaktır. Şimdi lib, src, test ve vendor klasörlerinin olduğu ana dizinimizde içeriği aşağıdaki şekilde olan bir index.php dosyası oluşturalım.

<?php
require 'vendor/autoload.php';
?>

Bu işlemle birlikte aslında Twig kurulum sürecimiz de sonlanmış oluyor. Ancak, ilgili kurulumu görüntülemek istediğimizde elbette karşımıza bir çıktı dökülmeyecektir. O halde işlemlerimizi biraz daha devam ettirelim ve bir örnek sayfa oluşturalım.

Twig Kullanımı

Twig yer tutucu olarak {{...}} kullanmakta. İlgili yer tutucu bir değişkenin içeriğini veya bir işlemin sonucunu barındırabilir. Ek olarak, {#...#} ifadelerine rastlayabilirsiniz. Bu ifadeler şablonlara yorum eklemek için kullanılırlar ve render edilen sayfaya aktarılmazlar. Son olarak, {%...%} ifadelerinden bahsedebiliriz. Bu ifade ise döngüler ve if ifadelerini çalıştırmak için kullanılır. Örneğin; {% set myArray = [1, 2] %}.

Bu örnek için bir tema klasörü oluşturmamız gerekmekte. Ana dizinde themes adında bir klasör oluşturacağım.

mkdir themes

themes klasörü bizim kullanacağımız temalar için bir kapsayıcı alan. Aslında işlemlerimiz bu kapsayıcı dizin içerisinde oluşturacağımız alt klasörlerle sağlanacak. WordPress tema yönetimine aşina iseniz themes altındaki her klasörün birbirinden bağımsız temalar olduklarını anımsayabilirsiniz. Biz de bu mantıkla ilerleyelim ve default adında themes klasörü içerisinde yer alan ilk temamızı oluşturmaya başlayalım.

mkdir default

Hatırlarsanız ana dizin içerisinde bir index.php dosyası oluşturmuştuk. Şimdi bu dosyayı tekrar açıp oluşturduğumuz tema yolunu eklemeliyiz.

$loader = new Twig_Loader_Filesystem('themes/default');

Eklediğimiz satırlarla ilgili daha detaylı anlatımlarım olacak. Şimdilik, özet bir şekilde değinmek gerekirse; themes/default yolunu ilettiğimiz Twig_Loader_Filesystem metotu iki adet parametre üzerinden işlem gerçekleştirir. İlk parametre tema dosyaları, ikinci parametre ise temaların yer aldığı ana dizini alıyor. Şimdilik ilk temamızın adı default. Ancak, farklı bir tema daha oluşturmak istersek (örneğin ilk temaya ulaşamadığında gidilecek bir başka tema olsun) bu temanın adını da ilgili metot içerisinde ifade ederiz. Örnek olarak default ve project temalarımızı ifade etmiş olalım ve ilgili kodumuzu güncelleyelim:

$loader = new Twig_Loader_Filesystem(['default','project'], 'themes');

Temalarımızın tanımlanması yeterli değil elbette. Temaları tanımladığımız metotun çağırmadığımız sürece bir işlem gerçekleştirilmeyecektir. Dolayısıyla index.php dosyasına şu satırı eklemeli ve $loader‘ı işleme almalıyız.

$twig = new Twig_Environment($loader);

$twig temaların bulunduğu dizini ve temaları kapsayan Twig_Environment()‘ı oluşturmakta. Bu metot da 2 parametre almakta. İlk parametre tema detaylarını, ikinci parametre ise cache klasörü detaylarını almakta. Aşağıdaki örnekte $loader sonrasında çağırlılan $config değişkenini ve bu değişkenin bir üst satırda aldığı değerleri görmektesiniz.

$config = ["cache" => "cache_folder", "charset => "UTF-8"];
$twig = new Twig_Environment($loader, $config);

Bu işlemleri basit bir şekilde sürdürmek istediğim için çok detaya girmeyecek ve hemen tema dosyasının yapılandırılacağı adıma geçeceğim. Az önce themes klasörü içerisinde default adında bir alt klasör yani tema oluşturmuştuk. Bu klasörün içeriğine geçip who.html adında bir HTML dosyası oluşturalım.

nano /themes/default/who.html

who.html içeriğine şimdilik klasik bir örnek olarak Hello World! yazdırmamız yeterli olacaktır. Bu işlem için who.html dosyamızı açıp şu satırı eklememiz yeterli.

<h1>{{whoami}}</h1>

Dosyamızı kayıt edip kapattıktan sonra, yine ana dizinde oluşturduğumuz index.php dosyasını açmalı ve who.html dosyasındaki yer tutucuya gönderilecek veriyi ifade etmeliyiz.

echo $twig->render('who.html', ["whoami" => "Hayden Mcguire"]);

index.php dosyamızın içeriği son durumda şu şekilde olacaktır:

<?php
require 'vendor/autoload.php';
$loader = new Twig_Loader_Filesystem(['default'], 'themes'); // birden fazla tema tanımında ['default', 'project', ...] şeklinde genişletilebilir.
$twig = new Twig_Environment($loader);
echo $twig->render('who.html', ["whoami" => "Hayden Mcguire"]);
?>

Ya da şu kullanımı da tercih edebilirsiniz.

<?php
require 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader(['default'], 'themes');
$twig = new \Twig\Environment($loader);
echo $twig->render('who.html', ['whoami' => 'Hayden Mcguire']);
?>

who.html dosyamızın içeriği ise h1 etiketi içerisindeki {{whoami}} yer tutucudan ibaret.

<h1>{{whoami}}</h1>

İlgili URL’i açtığımızda karşımıza Hayden Mcguire ifadesi çıkacaktır⁹. Evet, şimdilik işlemlerimiz bu kadar. Web şablon sistemleri ile ilgili bir dizi yazının ardından umuyorumki tema geliştirme adımlarına da hızlıca geçebileceğiz. Amacım template engine karşılaştırması yapmak olmadığı ve temel olarak WordPress, Grav ve Ghost tema hazırlama süreçlerini hedef aldığım için avantajlar ve dezavantajlardan bahsetmedim. Ancak, farklı ihtiyaçlar çerçevesinde template engine araştırması yapıyorsanız, aşağıdaki yazılara göz atabilirsiniz.

İleri Okumalar

• Twig for Template Designers
• Symfony View