Starter Template

Kombiniere MODX Chunks und Bootstrap

Wir verwenden von Anfang an Chunks und verbinden damit Dinge, die zusammen gehören. Für dieses Beispiel lege ich zunächst folgende Chunks an:

head, navbar, footer, bottom

Daraus kann sich bespielsweise dieses Template ergeben:


<!doctype html>
<html lang="de">
    <head>
        [[$head]]
    </head>
    <body data-id="[[*id]]" data-template="[[*template]]">
        <!--Navbar -->
        [[$navbar]]
        <div class="container">
            <!-- content -->
            <div class="row">
                <div class="col-lg-12">
                    <h1>[[*longtitle:default=`[[*pagetitle]]`]]</h1>
                    [[*content]]
                </div>
            </div>
        </div>
        <!-- footer -->
        [[$footer]]
        [[$bottom]]
    </body>
</html>

data-id & data-template

Die beiden Variablen [[*id]] und [[*template]] im <body> helfen dir bei der Untersuchung im Frontend, besonders bei größeren Websites, um betreffende Ressourcen im Backend zu finden.

<body data-id="[[*id]]" data-template="[[*template]]">

Chunks erstellen

head

Nun füllen wir unsere Chunks und beginnen dabei mit dem <head>. Wie im Template zu sehen ist, rufen wir den Chunk mit [[$head]] auf. Hier ein Beispiel-Code für diesen Chunk mit Meta Tags zum selbst ausfüllen:


<title>[[*pagetitle]] - [[++site_name]]</title>

<base href="[[!++site_url]]" />
    
<meta charset="[[++modx_charset]]" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="eine Beschreibung der Website">
<meta name="keywords" content="gewünschte Keywords">
<meta name="author" content="Author Name">

<!-- stylesheets -->    
<link rel="stylesheet" href="pfad zu deinem stylesheet">
<link rel="stylesheet" href="pfad zur bootstrap.min.css">

navbar

Als nächstes können wir eine Navbar einbauen. Ich habe hierzu ein kleines Tutorial zur Erstellung einer Bootstrap Navbar in Kombination mit pdoMenu geschrieben.

footer

Der Footer kann ein wichtiges Element einer Website sein. Es können Basis-Infos darin enthalten sein oder Links, die du in der Navbar nicht ausgeben möchtest. Typischerweise bilde ich die Service Seiten wie Impressum, Datenschutz und Kontakt im Footer ab.

Hier findest du einige Beispiele für Footer: https://getbootstrap.com/docs/5.1/examples/footers/

Hier ein Beispiel für einen Footer:


<div class="container bg-secondary">
  <footer class="py-3 my-4">
    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
      <li class="nav-item"><a href="" class="nav-link px-2 text-white">Impressum</a></li>
      <li class="nav-item"><a href="" class="nav-link px-2 text-white">Datenschutz</a></li>
      <li class="nav-item"><a href="" class="nav-link px-2 text-white">Kontakt</a></li>
      <li class="nav-item"><a href="" class="nav-link px-2 text-white">FAQs</a></li>
    </ul>
    <p class="text-center text-white">© 2023 Company, Inc</p>
  </footer>
</div>

So sieht der Beispiel Footer aus:

bottom

In diesem Chunk verorten wir alle Scripte, die wir benötigen. Ich gebe ein Beispiel zum Einbinden von Bottstrap JS und jQuery, was ich lokal auf meinem Webserver liegen habe.


<!-- jQuery -->
<script src="pfad zur jquery.min.js"></script>
<!-- bootstrap js -->
<script src="pfad zur bootstrap.bundle.min.js"></script>

title & longtitle

Im Template findest du die Zeile:

[[*longtitle:default=`[[*pagetitle]]`]]

Hier sprechen wir zwei MODX Template-Variablen an. Diese Zeile gibt den longtitle aus, sofern das Feld im Dokument im MODX Backend ausgefüllt wurde. Ist kein longtitle vorhanden, wird der Seitentitel - bezeichnet mit pagetitle - ausgegeben, der beim Erstellen eines Dokuments ein Pflichtfeld ist und somit immer ausgefüllt werden muss, damit das Dokument überhaupt gespeichert werden kann.