Ein Kirby-Theme erstellen
von Martin Waldau
Eigentlich wollten wir für designfrei ein fertiges Theme nutzen, um schnell an den Start gehen zu können. Eigentlich.
Einige Themes haben wir uns angeschaut und vor allem auch mal einen Blick unter die Haube geworfen, was uns letztendlich dazu brachte es doch selbst in die Hand zu nehmen. Nicht ganz unwichtig, Kirby macht es Entwicklern sehr einfach eigene Themes zu erstellen.
Grundsätzlich bestehen Themes aus den Assets (Bilder, CSS, Javascript etc.), Templates und Snippets. Snippets sind Code-Schnipsel, die wiederverwendet werden können (um in mehreren Templates benutzt zu werden). Diese Aufteilung wird auch von der Ordnerstruktur gespiegelt. Eine kleine Besonderheit hat Kirby: es kann sich nur ein Theme physisch in einer Kirby-Installation befinden. Also nicht wie in z.B. Wordpress, wo beliebig viele Themes vorhanden sein können, aber nur eins aktiviert werden kann.
Wie gehts?
Kirby-Themes werden in HTML und PHP geschrieben. Man muss keine sonderbare Templatesprache - wie Twig beispielsweise - lernen, sondern kann direkt mit seinem Handwerkszeug loslegen. Keep it simple.
Schon kann es losgehen. Die PHP-Objekte und -Funktionen die Kirby bereitstellt sind leicht verständlich und ebenso einfach zu benutzen. Um ein bestimmtes Template für eine bestimmte Art von Content zu benutzen, benennt man dann die Text-Datei wie das Template. Also möchte ich das “article.php” als Template benutzt wird, benenne ich meine Text-Datei “article.txt”.
Das Standard-Template nennt sich in Kirby “default.php” und wird immer dann benutzt, wenn kein passendes Template für den Content gefunden wird.
Nun aber genug Theorie, lasst uns selbst ein kleines Theme bauen! Aufgabe ist ein Template für einen Artikel sowie die nötigen bzw. sinnvollen Snippets anzulegen.
Ausgangspunkt ist der Prototyp unseres Themes, den Fabian erstellt hat (ich hab ihn hier wegen der Übersichtlichkeit etwas gekürzt):
<!DOCTYPE html>
<html lang="de" class="no-js">
<head>
<meta charset="utf-8">
<title>designfrei.trilodge.de</title>
<meta name="viewport" content="width=device-width; maximum-scale=1.2; user-scalable=1; initial-scale=1; ">
<meta name="keywords" content="...">
<meta name="description" content="...">
<meta name="robots" content="index,follow,noarchive">
<link href="css/core.css" rel="stylesheet" media="all">
<link href="css/respond.css" rel="stylesheet" media="all">
<script src="js/jquery.js"></script>
<script src="js/modernizr.custom.14937.js"></script>
</head>
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->
<div id="Wrapper">
<header>
<h1><a href="index.html">designfrei.trilodge.de</a></h1>
</header>
<article>
<h1>Designfrei</h1>
<h2><span><i>von</i> Fabian Tempel</span></h2>
<p>Es wird Zeit, dass sich hier wieder etwas dreht. Lang genug ist es still gewesen um trilodge.de als Webseite. Wir nehmen es uns schon so lange vor etwas Neues zu machen, aber wie so oft fehlte es an Zeit oder sogar an Motivation. Leider. Das ändert sich jetzt!</p>
</article>
<nav class="pager clearfix">
<h3 class="hidden">Artikelnavigation:</h3>
<a href="#" class="prev">zum vorherigen Artikel <b>←</b></a>
<a href="#" class="next"><b>→</b> zum nächsten Artikel</a>
</nav>
</div>
<footer class="info">
<div class="content">
<p>Made with ♥ & kirby on a mac - <a href="about.html">Impressum</a> - © 2013 trilodge.de</p>
</div>
</footer>
</body>
</html>
Im ersten Schritt machen wir genau das, was unser Template erledigen soll. Wir fügen die dynamischen Elemente für unseren Artikel ein: Titel, Autor, Text und die Links zum nächsten bzw. vorherigen Artikel.
<!DOCTYPE html>
<html lang="de" class="no-js">
<head>
<meta charset="utf-8">
<title>designfrei.trilodge.de</title>
<meta name="viewport" content="width=device-width; maximum-scale=1.2; user-scalable=1; initial-scale=1; ">
<meta name="keywords" content="...">
<meta name="description" content="...">
<meta name="robots" content="index,follow,noarchive">
<link href="css/core.css" rel="stylesheet" media="all">
<link href="css/respond.css" rel="stylesheet" media="all">
<script src="js/jquery.js"></script>
<script src="js/modernizr.custom.14937.js"></script>
</head>
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->
<div id="Wrapper">
<header>
<h1><a href="index.html">designfrei.trilodge.de</a></h1>
</header>
<article>
<h1><?=$page->title() ?></h1>
<h2><span><i>von</i> <?php echo html($page->author()) ?></span></h2>
<?php echo kirbytext($page->text()) ?>
</article>
<nav class="pager clearfix">
<h3 class="hidden">Artikelnavigation:</h3>
<?php if ($page->hasPrevVisible()): ?>
<a href="<?php echo $page->prevVisible()->url() ?>" class="prev">zum vorherigen Artikel <b>←</b></a>
<?php endif; ?>
<?php if ($page->hasNextVisible()): ?>
<a href="<?php echo $page->nextVisible()->url() ?>" class="next"><b>→</b> zum nächsten Artikel</a>
<?php endif; ?>
</nav>
</div>
<footer class="info">
<div class="content">
<p>Made with ♥ & kirby on a mac - <a href="about.html">Impressum</a> - © 2013 trilodge.de</p>
</div>
</footer>
</body>
</html>
Anstelle des Beispieltextes des Artikels sind nun PHP-Elemente getreten. Im PHP-Objekt $page befinden sich alle Daten der aktuellen Seite, in unserem Fall die Elemente des Artikels.
Aber reicht das schon? Was ist, wenn wir noch ein weiteres Template brauchen? Wären dann Header und Footer nicht doppelt zu pflegen? Also machen wir daraus noch schnell zwei Snippets und schon sieht unser Artikel so aus:
<?php snippet('header') ?>
<article>
<h1><?=$page->title() ?></h1>
<h2><span><i>von</i> <?php echo html($page->author()) ?></span></h2>
<?php echo kirbytext($page->text()) ?>
</article>
<nav class="pager clearfix">
<h3 class="hidden">Artikelnavigation:</h3>
<?php if ($page->hasPrevVisible()): ?>
<a href="<?php echo $page->prevVisible()->url() ?>" class="prev">zum vorherigen Artikel <b>←</b></a>
<?php endif; ?>
<?php if ($page->hasNextVisible()): ?>
<a href="<?php echo $page->nextVisible()->url() ?>" class="next"><b>→</b> zum nächsten Artikel</a>
<?php endif; ?>
</nav>
<?php snippet('footer') ?>
Snippets lassen sich ganz einfach mittels der Funktion snippet() einbinden.
Das Header-Snippet:
<!DOCTYPE html>
<html lang="de" class="no-js">
<head>
<meta charset="utf-8">
<title><?php echo $site->title(); ?></title>
<meta name="viewport" content="width=device-width; maximum-scale=1.2; user-scalable=1; initial-scale=1; ">
<meta name="keywords" content="<?php echo $site->keywords(); ?>">
<meta name="description" content="<?php echo $site->description(); ?>">
<meta name="robots" content="index,follow,noarchive">
<?php echo css('assets/css/core.css') ?>
<?php echo css('assets/css/respond.css') ?>
<?php echo js('assets/js/modernizr.custom.14937.js') ?>
<?php echo js('assets/js/jquery.js') ?>
</head>
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->
<div id="Wrapper">
<header>
<h1><a href="<?php echo url() ?>"><?php echo html($site->title()) ?></a></h1>
</header>
Zum Schluss noch das Snippet für den Footer:
</div>
<footer class="info">
<div class="content">
<?php echo kirbytext($site->copyright()) ?>
</div>
</footer>
</body>
</html>
Kirby bringt zahlreiche Helper-Funktionen mit. Außerdem gibt es noch ein PHP-Objekt, das in allen Templates verfügbar ist: $site. Es enthält die globalen Informationen zur Seite wie Seitentitel oder Footer-Infos. Weitere Informationen zu den Objekten und Funktionen findet ihr in der Kirby-Dokumentation.
Wie ihr seht, lassen sich mit Kirby sehr schnell eigene Templates bzw. auch ganze Themes erstellen.
Fabian hatte zuerst die Prototypen in reinem HTML und mit Blindtext erstellt. Die Übernahme in die Templates und Snippets war dann erstaunlich einfach. Das liegt vor allem daran, dass Kirby auf eine unsinnige wie auch meist überflüssige Templatesprache verzichtet.
Eine gute Dokumentation oder schicke Cheat-Sheets tun dann ein Übriges, um schnell sichtbare Ergebnisse zu erzielen.