Online Visitenkarte – Die erste Sektion mit Twig

PortfolioIn dem Artikel “Eigene Online Visitenkarte richtig erstellen” habe ich bereits gezeigt, wie ihr den Grundstein für eine eigenen Online Visitenkarte legt. Heute zeig ich euch, wie eine Sektion erstellt. Wir beginnen hier mit der Header Sektion.

Dafür passen wir als erstes die meta.json entsprechend an.

meta.json

Als erstes definieren wir in Zeile drei die Section mit dem Namen Über mich. Innerhalb dieser Section definieren wir verschiedene Textbausteine im Key/Value Schema (heading, name,  description,template). Hier gibt es eine Besonderheit.

template: Mit diesem Eintrag lege ich fest, welche Twig Datei verwendet werden soll.

Damit wäre die meta.json für die erste Sektion fertig.

header.html.twig anlegen

Um die Informationen aus der meta.json anzeigen zu können, brauchen wir nun noch eine Twig Datei für die Sektion. Diese wird Ordner resources->section angelegt. Der Name muss dabei mit dem Eintrag bei template in der meta.json übereinstimmen.

In der header.html.twig Datei können wir die komplette Formatierung mit den standard HTML Befehlen durchführen. Um auf die Inhalte der meta.json zuzugreifen, verwenden wir die Twig Syntax. Der Twig Ausdruck steht dabei immer zwischen doppelten geschweiften Klammern. Innerhalb dieser Klammern fangen wir den Aufruf mit section an und fügen über die Punktnotation den Key des entsprechenden Textbausteines an.

Beim Aufruf der Seite wird anschließend das entsprechende Value ausgegeben. Das ganze sieht dann so aus.

portfolio-header

Wenn wir jetzt noch ein Bild hinzufügen, etwas mit Bootstrap, Front Awesome und creative-brands.js herumspielen, kann das ganze zum Beispiel so aussehen:

portfolio-header-real

Ich hoffe ihr habt nun einen ersten guten Einblick in die Verwendung der Sektionen bekommen. Sollte ihr Fragen oder Anregungen haben, dann lasst mir gerne ein Kommentar hier.

About Christian Piazzi

Ich blogge hier über alles, was mir so in meinem ITler Altag über den Weg läuft =)
Man findet mich privat bei Google+ und Twitter

Speak Your Mind

*