Pyramid – ein neues Layout (vollendet)

Dynamische Inhalte

Für die dynamischen Inhalte gibt es im Pymramid/Jinja2-Gespann einen speziellen Block, der im Original-Layout zu finden ist.

{% block content %}
   <p>No content</p>
{% endblock content %}

Umbau

Eingebunden in die Datei layout-neu.jinja2 sieht es dann wie folgt aus:

1
2
3
4
5
6
7
8
9
	<!-- Right Column -->
	<div class="w3-twothird">
	  
	  <div class="w3-container w3-card w3-white w3-margin-bottom">
	    {% block content %}
            <p>No content</p>
	    {% endblock content %}

	  </div>

Das Ergebnis

../../_images/result3.png

Der Quelltext nach dem Umbau

Wenn alle Kommentare und Inhalte entfernt wurden, erhält man eine Vorlage, die für die gesamte Website eingesetzt werden kann. Das Original layout.jinja2 kann gelöscht werden und die Vorlage layout-neu.jinja2 wird zur neuen layout.jinja2. Es bleiben 66 Zeilen als vorläufiges Gerüst übrig.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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 href="http://localhost:6543/static/w3.css" rel="stylesheet">
    <link href="http://localhost:6543/static/tachyons.min.css" rel="stylesheet">
  </head>
  <body class="w3-light-grey">
    <!-- Page Container -->
    <div class="w3-content w3-margin-top" style="max-width:1400px;">
      <!-- The Grid -->
      <div class="w3-row-padding">
	<!-- Left Column -->
	<div class="w3-third">
	  <div class="w3-white w3-text-grey w3-card-4">
            <div class="w3-display-container bg-yellow">
              <!--img src="/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar"-->
	      <img class="logo img-responsive br-pill  w-50"
		   src="http://localhost:6543/static/mein-bild.png"
		   alt="Mein Bild">
              <div class="w3-display-bottomleft w3-container w3-text-black">
		<h2>Peter Koppatz</h2>
              </div>
            </div>
            <div class="w3-container">
	      <div class="links">
		<p><a href="/blog">Mein Blog</a></p>
		<p><a href="/empfehlungen">Empfehlungen</a></p>
		<p><a href="/quallifikationen">Quallifikationen</a></p>
	      </div>
            </div>
	  </div>
	  <!-- End Left Column -->
	</div>
	<!-- Right Column -->
	<div class="w3-twothird">
	  <div class="w3-container w3-card w3-white w3-margin-bottom">
	    
<div class="content">
  <h1><span class="font-normal">Meine Qualifikationen</span></h1>
</div>

	  </div>
	  <div class="w3-container w3-card w3-white"></div>
	  <!-- End Right Column -->
	</div>
	<!-- End Grid -->
      </div>
      <!-- End Page Container -->
      <footer class="w3-container w3-teal w3-center w3-margin-top">
	<p>Powered by <a href="https://trypyramid.com"
			 target="_blank">Pyramid</a></p>
      </footer>
    </div>
<link rel="stylesheet" type="text/css" href="http://localhost:6543/_debug_toolbar/static/toolbar/toolbar_button.css">

<div id="pDebug">
    <div  id="pDebugToolbarHandle">
        <a title="Show Toolbar" id="pShowToolBarButton"
           href="http://localhost:6543/_debug_toolbar/34343732353439303430" target="pDebugToolbar">&#171;</a>
    </div>
</div>
</body>
</html>

Download

Die Schritt-für-Schritt-Anleitung sollte die Zusammenhänge sichtbar und alle Arbeitsschritte nachvollziehbar machen. Wenn doch etwas schief gegangen ist, hier ein Zwischenstand als Download:

MyWebsite als zip-Datei