Pyramid – ein neues Layout (start)

Für den Austausch des Layout vom Starterpaket sind folgende Schritte notwendig:

  1. eine neues Layout suchen und in einer neuen Datei speichern (hier als layout-neu.jinja2)

    • nicht vergessen auch alle zum Layout gehörenden CSS und JavaScript-Dateien zu speichern

    • wenn vorhanden sollten die Dateien im Ordner static gespeichert werden

  2. eine View für das Einbinden des neuen Layout erstellen

  3. eine Route zur neuen View defindieren

  4. Wenn das Layout gefällt kann es auf alle Views angewendet werden!

Layout speichern und umbauen …

Im Beispiel wird ein Layout der w3school-Website verwendet:

Das CSS lokal speichern

Wie im Head zu sehen ist, wird eine CSS-Datei eingebunden, diese kann auch aufgerufen und lokal gespeichert werden.

CDN und Google ausschließen

Was auf der einen Seite der Medaile eine Erleichterung ist, weil die Anbieter die Dateien weltweit zur Verfügung stellen, hat auf der Kehrseite einen Preis: Wir helfen, mit unseren und unserer Kunden Daten den sammelwütigen Diensten, bei der Erschaffung des gläsernen Bürgers!

Brauchen wir diesen Service wirklich und ist weniger vielleicht mehr?

Versuchen wir es mal ohne den kostenlosen Service und kommentieren die folgenden Zeilen (8-11) aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>W3.CSS Template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"-->
    <link href="{{request.static_url('my_homepage:static/w3.css')}}" rel="stylesheet">
    <link href="{{request.static_url('my_homepage:static/tachyons.min.css')}}" rel="stylesheet">

    <!--
	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	-->
	<style>

Neu ist das Element head in den Zeilen 3 und 15, denn diese fehlen in der Vorlage, gehören aber wie das Element body zum Grundgerüst einer HTML-Seite.

Neue Route

Für den neuen Inhalt (Angaben zur Person) legen wir eine neue Route mit der Zuordnung einer interner Bezeichnung zu einer URL. Sie könnten unterschiedliche Namen erhalten, aber in unserem Fall erhalten beide Teile die gleiche Bezeichnung (Zeile 4).

1
2
3
4
def includeme(config):
    config.add_static_view('static', 'static', cache_max_age=3600)
    config.add_route('home', '/')
    config.add_route('qualifikationen', '/qualifikationen')

Neue View: »meine-qualifikationen.py«

Aktuell machen wir uns noch keine Gedanken über die Struktur und bringen die neue View in der Datei »default.py« unter (Zeilen 10-13):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
from pyramid.view import view_config


@view_config(route_name='home',
             renderer='../templates/mytemplate.jinja2')
def my_view(request):
    return {'project': 'Meine erste Website'}


@view_config(route_name='qualifikationen',
             renderer='../templates/meine-qualifikationen.jinja2')
def my_cv_view(request):
    return {'project': 'Meine Qualifikationen'}

Neues Template: »meine-qualifikationen.jinj2«

Es soll das neue Layout nutzen und und zukünftig die Platzhalter (die es noch nicht gibt) mit konkreten Werten füllen.

1
2
3
4
5
6
7
{% extends "layout-neu.jinja2" %}

{% block content %}
<div class="content">
  <h1><span class="font-normal">{{project}}</span></h1>
</div>
{% endblock content %}

Erster Test

Nach dem Neustart des Servers kann im Browser folgende URL aufgerufen werden:

http://localhost:6543/qualifikationen