GET THE LATEST TRENDS IN DIGITAL MARKETING!


Digitale Trends, Best Practices und Marketing-Inspirationen – alle zwei Wochen als Newsletter. Sie können sich natürlich jederzeit mit nur einem Klick wieder abmelden.

Danke, wir sind über jedes Feedback dankbar


Unser Ziel ist es diese Webseite ständig besser und attraktiver zu machen. Her mit deinen Anregungen!

Info

  • Lesedauer:
    5 min
  • Datum:
    13.3.2019

Tags

#performance #general #coding

Follow us!

Serverless Website - Ein Fallbeispiel mit Nunjucks

Eine Webseite zu erstellen bedeutet eigentlich immer sich um Frontend und Backend zu kümmern.
Doch was ist das eigentlich?

Frontend, na klar das sind die HTML5 Tags welche die Struktur der Seite festlegen und das CSS kümmert sich um die Optik?
Bloß nicht zu vergessen, das Javascript, welches für die coole Dynamik wie Animationen (Slideshow, Accordions, etc) und andere Effekte zuständig ist. All das passiert im Browser (Client).

Backend, das sind die dynamischen Inhalte und Objekte einer Seite, welche über ein Content Management System gepflegt werden und in irgendeiner Datenbank (mySQL, etc) vorliegen.
Typische CMS Systeme wären Typo3, Wordpress, Joomla und wie sie nicht alle heißen.

Normal braucht man entweder jeweils einen Experten auf beiden Seiten oder man hat Glück und jemand kennt sich in beiden Gebieten aus. Oft wird dadurch die Seite langsam, ist überdimensional groß für die Anforderungen oder einfach nicht zu durchblicken. Was wenn viele Seiten durch bessere Überlegung nicht standardmässig diesen Weg gehen müssten.

Wir wollten für uns selbst den Test machen. Unsere alte Seite war ein klassisches Typo3, wie viele unserer damaligen Kundenprojekte.

Zuerst machten wir uns Gedanken, was die neue Seite können soll. Wir wollten sie schnell und dynamisch machen, sie sollte UseCases unserer Kunden haben und wir wollten unbedingt einen Blog, in dem wir Geschichten wie diese erzählen können.
Klingt erstmal stark nach CMS Lösung. Wie sollte man sonst Inhalte verwalten, Blog Beiträge erstellen können, SEO Strukturen und URLs verwalten und Zugriff auf alle Elemente haben.
Wenn man es versucht, geht tatsächlich mehr als man denkt. Der Vorteil einer statischen Seite ist naheliegend. Schnell, sicher und kostengünstig!
Unser Blick fiel auf die Template Sprache Nunjucks, anhand der wir jetzt Schritt für Schritt einige Basics anschauen

monacofriends.com - Eine Agenturseite mit einem fixen Header, Navigation, Footer und Hammer Inhalt ;)

Eine statische Webseite in der jede Unterseite eine eigene HTML Datei ist und individuell verlinkt sein müsste, wäre eine Themaverfehlung. Wir sind schließlich im Jahre 2019. Wir wollen wiederkehrende Elemente wie Header, Menü, Footer, etc auslagern und wiederverwenden. Somit brauchen wir includes und ein Basislayout welches aus diesen und einem Chunk von HTML besteht.



 <!DOCTYPE html><html
<head {% block meta %}
<title> {{ title }} </title>
{% endblock %}
{% block cssjshead %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block footerJS %}
BASIC JS
{% endblock %}
{% block additionalFooterJS %}
{% endblock %}
</body></html>


Wie man hier schon sieht, besteht das Template (layout.njk) aus nicht viel, wie aus einer klassischen HTML Struktur die an bestimmten Stellen mit Variablen bzw. mit Blöcken gefüllt wird. Interessant wird es jetzt wenn man die Datei index.njk ansieht. njk ist die Endung der Nunjucks Dateien.



{% import "partials/nav.njk" as nav %}
{% import "partials/navbar.njk" as navbar %}
{% import "partials/footer.njk" as footer %}
{% import "partials/loader.njk" as loader %}
{% set body = 'blog-posts job-post' %}
{% set title = 'Monaco Friends - Jobs' %}
{% extends "layout.njk" %}
{% block cssjshead %}
<style>
body { overflow-x: hidden !important; }
</style>
{% endblock %}
{% block content %}
{{ loader.loader() }}
{{ nav.nav(0,0,0,0,1,config) }}
{{ navbar.navbar(0,1) }}
hier steht der Inhalt ...


Ja, was passiert hier? Erstmal importieren wir wiederkehrende Partials. Navigation, Footer und ein Ladeicon. Diese werden einmal programmiert, ausgelagert und eingebunden.
Anschließend erweitern wir unser layout.njk. Danach wird der Meta Title der Seite in einer Variablen gespeichtert und im Template ausgegeben. Ein kleiner Inline CSS Style der den CSS Block erweitert und schon werden Funktionen aus den zuvor inkludierten Partials aufgerufen.
Ja, richtig gehört.
Es gibt quasi Funktionen in HTML Templates. Gleich mehr dazu. Erst kommt noch der Content Block, der das eigentliche HTML der individuellen Seite enthalten kann.
Das wars schon fast. Jetzt brauchen wir uns nur noch ein dynamisches Partial ansehen und der Kreis schließt sich. Am Leichtesten ist es mit dem Partial nav.njk getan, welches für die Navigation und das Highlighting des aktiven Menüpunktes zuständig ist.



{% macro nav(about,work,stories,contact,jobs,config) %}

{% if about %} active{% endif %}


Ein Macro erlaubt wiederverwendbaren Content. Wie in einer Funktion lassen sich dort Felder übergeben, mit denen ich einfach if Abfragen hinterlegen kann um somit unterschiedliche Bereiche zu rendern.

In obrigem Beispiel wird eine Klasse gesetzt, um somit einen aktiven Menüpunkt zu zeigen. So leicht geht es mit wenig Aufwand wiederverwendbare und dynamische Seiten zu bauen.
In der nächsten Story gehen wir ein darauf ein, wie wir verwaltbaren dynamischen Inhalt mit Gulp und diversen anderen Funktionen automatisieren und die Seite weiter aufbauen.

Photo by Irvan Smith on Unsplash

Do not miss out!

Bekommen Sie jetzt alle digitalen News auch direkt in Ihr Postfach.

Das wird Sie auch interessieren!

#performance   #usability   #seo  

Die 5 größten Fehler vor dem Relaunch

Wirklich an alles gedacht? Mit dieser einfachen Checkliste helft Ihr Euch und Eurem Kunden! Jeder, der schonmal an einem digitalen Projekt gearbeitet hat, wird wissen, dass Planung das A und O ist.

#onlinemarketing   #general  

Ist Ihre Webseite bereit für den neuen EU-Datenschutz? Wir prüfen das!

2018 kommen auf alle Unternehmen weitreichende Änderungen zu: Ab dem 25. Mai 2018 gilt die neue EU Datenschutzgrundverordnung (EU-DSGVO) auch in Deutschland.

#usability   #performance   #seo   #coding  

AMP, der neue Standard des mobilen Webs?

AMP ist ein von Google definierter neuer Standard. Durch diesen Standard können Webseiteninhalte auf Mobilgeräten rasend schnell geladen werden. Das hat natürlich aus mehreren Perspektiven einen Vorteil.