Skip to main content

⚙️ Erste Schritte nach der Installation

🏷️ Name der Website festlegen

Im Manager → Systemeinstellungen (Zahnrad unten links).
Nach site_name suchen und den gewünschten Namen eintragen.
Dieser erscheint anschließend automatisch überall, wo [[++site_name]] verwendet wird.

🌐 Wichtige Einstellungen im Kontext pflegen

Übersichtlich – bei mehreren ein Muss

Wenn mehrere Kontexte genutzt werden (z.B. web, intranet, en), müssen die wichtigsten Einstellungen direkt in den Kontext-Einstellungen gepflegt werden.
Nur so kann jeder Kontext eigene Werte nutzen und globale Systemeinstellungen sauber überschreiben.

  1. Im Manager → Kontexte öffnen
  2. gewünschten Kontext auswählen (z.B. web)
  3. Reiter Kontext-Einstellungen öffnen
  4. Über Erstellen neue Einträge anlegen oder bestehende bearbeiten
  5. Als Schlüssel die bekannten System-Schlüssel verwenden und passende Werte setzen

Pflicht-Einstellungen pro Kontext:

  • site_name – Name der Website für diesen Kontext
  • site_url – vollständige URL des Kontextes (z.B. https://malbergweich.de/)
  • base_url – Basis-Pfad des Kontextes (z.B. /)
  • default_template – Template-ID für neue Ressourcen
  • error_page – Ressourcen-ID für die 404-Seite
  • site_start – Ressourcen-ID der Startseite
  • site_unavailable_page – Ressourcen-ID für Wartungsmodus
  • site_unavailable_message – Text für „nicht erreichbar“-Status
  • site_status – online/offline

Alle diese Werte können wie gewohnt über [[++site_name]], [[++site_url]] usw. im Template verwendet werden – je Kontext automatisch mit den dort gesetzten Werten.

🧭 Orientierung im Manager (MODX 3)

Nach dem Login öffnet sich der MODX 3 Manager mit einer übersichtlichen, linksbündigen Seitenleiste.
Diese enthält die Hauptbereiche:

  • Ressourcen – Seitenbaum deiner Website
  • Elemente – Templates, Chunks, Snippets, TVs
  • Dateien – Zugriff auf Media Sources (Dateibrowser)
  • Extras – Paketverwaltung, Tools und Add-ons
  • Benutzer – Benutzer, Rollen, Zugriffsrechte
  • System – Systemeinstellungen, Logs, Pakete

Der Arbeitsbereich rechts zeigt jeweils den gewählten Inhalt oder Editor.

📁 Ordnerstruktur für Assets

Unter Dateien befindet sich standardmäßig der Ordner /assets/.
Für eine klarere Struktur kannst du (optional) folgende Unterordner anlegen:

  • assets/modx/templates
  • assets/modx/content
  • assets/modx/content/images

Hinweis: Achte darauf, die Pfade konsequent zu verwenden und in deinen Templates korrekt zu referenzieren.
Ein eigener modx-Ordner ist sinnvoll, wenn du später mehrere Domains per Kontext betreiben willst (z.B. modx2, modx3 usw.).

🖼️ Media Sources (Dateiquellen)

Unter System → Media Sources lassen sich verschiedene Speicherquellen verwalten:

  • Standard: File System (/assets/)
  • Erweiterbar: z.B. Amazon S3 oder externe Pfade

Media Sources werden in TVs, im Dateibrowser und bei Datei-Uploads verwendet.

➕ Extras → Package Management

  1. Extras → Package-Verwaltung öffnen
  2. Download Extras wählen
  3. Nach gewünschtem Paket suchen
  4. Download & Install ausführen

Empfohlene Starter-Extras:

  • UpgradeMODX – Core-Updates direkt aus dem Backend
  • pdoTools – leistungsstarke Snippets (Navigation, Listen, Queries)
  • FormIt – Formularverwaltung
  • CKEditor oder TinyMCE – Lade einen aktuellen Rich Text Editor (RTE)
  • TwoFactorX – TOTP-basierte Zwei-Faktor-Authentifizierung

TinyMCE: Block-Fehler im RTE vermeiden (optional)

Damit der RTE <script>-Blöcke nicht mehr automatisch in ungültige <p>-Tags einbettet, wird TinyMCE auf <div> als Standard-Block umgestellt; gleichzeitig bleiben reguläre Blockelemente erhalten, Tabellen werden als gültige Kindelemente akzeptiert, überflüssige <br>-Tags am Ende entfernt und alle Tabellenzellen im Editor stets oben ausgerichtet angezeigt.

  1. System → Systemeinstellungen öffnen
  2. Nach tinymcerte.settings suchen (Bereich: TinyMCE)
  3. Das Feld Zusätzliche Einstellungen öffnen
  4. Folgenden JSON-Wert eintragen:
{"forced_root_block":"div","valid_children":"*+body[table],+div[table]","remove_trailing_brs":true,"content_style":"table td, table th { vertical-align: top; }"}
  1. Speichern
  2. MODX-Cache leeren
  3. RTE neu öffnen, Inhalt prüfen

🧱 Dein erstes selbstgebautes Template (HTML5)

  1. Menü Elemente → Templates → Neu
  2. Titel vergeben (z.B. „Main“)
  3. HTML einfügen:

(Einfaches Template zum testen, üben und spielen. Mit einfachem CSS ohne externe Datei, extra Chunks oder TVs)

<!doctype html>

<html lang="de">
<head>
  <meta charset="utf-8">
  <title>[[*pagetitle]] | [[++site_name]]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="[[++site_url]]">
  <link rel="icon" type="image/png" href="assets/modx/content/images/icon_48x48.png">

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f5f5f5;
      color: #333;
    }

    header,
    footer {
      background: #123; /* Hauptfarbe Blau */
      color: #fff;
      padding: 15px 20px;
    }

    h1 {
      margin: 0 0 10px 0;
      font-size: 24px;
    }

    /* Navigation allgemein */
    nav {
      margin-top: 5px;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* Hauptmenü horizontal */
    nav > ul {
      display: flex;
      gap: 30px; /* Abstand zwischen Hauptpunkten */
    }

    /* jedes Haupt-Element als Spalte: Link oben, Untermenü darunter */
    nav > ul > li {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 4px 0;
      display: inline-block;
      font-size: 15px;
    }

    nav a:hover {
      text-decoration: underline;
    }

    /* Hervorhebung aktiver Menüpunkt */
    nav .active {
      font-weight: bold;
      text-decoration: underline;
    }

    /* Untermenüs: vertikal unter dem jeweiligen Hauptpunkt */
    nav ul ul {
      margin-top: 4px;
      padding-left: 10px; /* leichte Einrückung */
    }

    nav ul ul li {
      margin: 2px 0;
    }

    nav ul ul a {
      font-size: 14px; /* etwas kleiner als Hauptmenü */
    }

    main {
      padding: 20px;
      background: #fff;
      margin: 20px;
      border-radius: 4px;
    }

    main h2 {
      margin-top: 0;
    }

    footer p {
      margin: 0;
      font-size: 14px;
    }

    .breadcrumb {
      font-size: 14px;
      padding: 10px 20px;
      background: #f2f4f8;
      border-bottom: 1px solid #ccc;
      color: #123;
    }

    .breadcrumb a {
      color: #123;
      text-decoration: none;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }

    .breadcrumb span {
      color: #555;
    }

  </style>

</head>
<body>
  <header>
    <h1>[[++site_name]]</h1>

  <nav>
      [[!pdoMenu?
        &parents=`0`
        &level=`2`
        &showStart=`1`
        &tplOuter=`@INLINE <ul>[[+wrapper]]</ul>`
        &tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>`
        &tplHere=`@INLINE <li class="active"><a class="active" href="[[+link]]">[[+menutitle]]</a></li>`
        &tplParentRow=`@INLINE <li class="has-children"><a href="[[+link]]">[[+menutitle]]</a></li>`
        &tplParentRowHere=`@INLINE <li class="active has-children"><a class="active" href="[[+link]]">[[+menutitle]]</a>[[+wrapper]]</li>`
        &tplInner=`@INLINE <ul class="submenu">[[+wrapper]]</ul>`
      ]]
  </nav>
  </header>

  <div class="breadcrumb">
    [[!pdoCrumbs?
      &from=`0`
      &showHome=`1`
      &showAtHome=`0`
      &showCurrent=`1`
      &outputSeparator=` | `
      &tpl=`@INLINE <a href="[[+link]]">[[+menutitle]]</a>`
      &tplCurrent=`@INLINE <span>[[+menutitle]]</span>`
      &tplWrapper=`@INLINE [[+output]]`
    ]]
  </div>

  <main>
    <h2>[[*longtitle:default=`[[*pagetitle]]`]]</h2>
    [[*content]]
  </main>

  <footer>
    <p>&copy; [[++site_name]]</p>
  </footer>
</body>
</html>
  1. Ressource „Home“ → Template „Main“ zuweisen
  2. Systemeinstellung default_template auf dieses Template setzen

In einem zweiten Browserfenster die Frontpage prüfen. Eventuell ist ein Refresh (F5) notwendig.

Info zum Template:
Das aktuelle pdoMenu Snippet ist technisch einwandfrei, funktioniert zuverlässig und ist HTML5-konform.

Eine Optimierung mit [[+classes]] und vollständigem &tplParentRow-Wrapper würde zwar das Markup verbessern, verändert jedoch das Verhalten:
Untermenüs erscheinen dann immer, statt wie im Template-Beispiel nur beim aktiven Parent.

Eine spätere Umstellung auf eine flexiblere Menüstruktur (z.B. Bootstrap 5) kann zu einem späteren Zeitpunkt erfolgen.

Hinweise

  • Backticks (`) erzeugst du mit Shift + der Taste links neben Backspace (zweimal drücken)
  • [[!pdoMenu? …]] = uncached Snippet-Aufruf
  • [[+wrapper]] = Platzhalter für die Unterpunkte des Menüs
  • [[++…]] = Systemeinstellungen
  • [[*…]] = Resource-Felder

Parser (mit ! = ohne Cache)

  • TV → [[*tvName]]
  • Chunk → [[$chunk]]
  • Snippet → [[snippet]]
  • Placeholder → [[+platzhalter]]
  • Link → [[~id]]
  • System-Einstellung → [[++einstellung]]

MODX Tag-Syntax
👉 https://docs.modx.com/current/en/building-sites/tag-syntax

🧩 Template-Variablen (TVs)

TVs erweitern Ressourcen um zusätzliche Felder, z.B. Teaserbild oder BannerText.

  1. Elemente → Template-Variablen → Neu
  2. Typ, Name und Standardwert festlegen
  3. Template-Zuweisung setzen
  4. In der Ressource im Reiter „Template-Variablen“ befüllen
  5. Im Template ausgeben mit [[*bannerText]] oder [[*bannerText:default=``]]
Back to top