# Benutzerdefinierte Seiten

smoxy ermöglicht es dir, die Standard-Fehler-, Sicherheits- und Wartungsseiten durch eigene HTML-Seiten zu ersetzen. So hast du die volle Kontrolle darüber, was deine Besucher bei Ausfällen, Sicherheitsblockierungen oder geplanten Wartungsarbeiten sehen.

***

### Seitentypen

smoxy unterstützt drei benutzerdefinierte Seitentypen, die jeweils durch unterschiedliche Szenarien ausgelöst werden:

| Seitentyp            | Ausgelöst wenn                                                           | HTTP-Statuscodes                         |
| -------------------- | ------------------------------------------------------------------------ | ---------------------------------------- |
| **Fehlerseite**      | Dein Origin-Server nicht erreichbar ist oder nicht rechtzeitig antwortet | 502 (Bad Gateway), 504 (Gateway Timeout) |
| **Sicherheitsseite** | Eine Anfrage durch WAF oder Sicherheitsregeln blockiert wird             | 403 (Forbidden)                          |
| **Wartungsseite**    | Du den Wartungsmodus für deine Site aktivierst                           | 503 (Service Unavailable)                |

Jeder Seitentyp kann unabhängig aktiviert werden — du kannst eine benutzerdefinierte Fehlerseite verwenden, ohne deine Sicherheits- oder Wartungsseiten anzupassen.

***

### Template-Variablen

Benutzerdefinierte Seiten unterstützen dynamische Template-Variablen, die smoxy beim Ausliefern der Seite durch echte Werte ersetzt. Verwende diese, um deinen Besuchern kontextbezogene Informationen anzuzeigen.

| Variable             | Beschreibung                                           | Verfügbar in       |
| -------------------- | ------------------------------------------------------ | ------------------ |
| `::SX_STATUS::`      | Der HTTP-Statuscode (z. B. `502`, `403`)               | Fehler, Sicherheit |
| `::SX_STATUS_TEXT::` | Lesbarer Statustext (z. B. `Bad Gateway`, `Forbidden`) | Fehler, Sicherheit |
| `::SX_HOST::`        | Der Hostname, der die Anfrage empfangen hat            | Fehler, Sicherheit |
| `::SX_REMOTE_IP::`   | Die IP-Adresse des Besuchers                           | Fehler, Sicherheit |

{% hint style="info" %}
**Hinweis:** Wartungsseiten unterstützen keine Template-Variablen. Die Wartungsseite wird als statischer Inhalt ausgeliefert.
{% endhint %}

#### Beispiel

```html
<!DOCTYPE html>
<html>
<head>
    <title>Fehler ::SX_STATUS:: - ::SX_HOST::</title>
</head>
<body>
    <h1>::SX_STATUS:: ::SX_STATUS_TEXT::</h1>
    <p>Beim Laden von <strong>::SX_HOST::</strong> ist leider ein Fehler aufgetreten.</p>
    <p>Deine IP: ::SX_REMOTE_IP::</p>
    <p>Wenn dieses Problem weiterhin besteht, kontaktiere bitte unser Support-Team.</p>
</body>
</html>
```

***

### Anforderungen

| Anforderung             | Details                                    |
| ----------------------- | ------------------------------------------ |
| **Dateiformat**         | Nur HTML (`.html` oder `.txt` Erweiterung) |
| **Maximale Dateigröße** | 256 KB                                     |
| **MIME-Typ**            | `text/html`                                |

Andere Dateitypen (Bilder, PDFs, Skripte) werden nicht akzeptiert. Deine HTML-Seite sollte eigenständig sein — binde CSS und Bilder als Base64-Data-URIs inline ein, falls nötig.

***

### Benutzerdefinierte Seite hochladen

1. Navigiere zu deiner **Site** in smoxy
2. Öffne die **Grundkonfiguration**
3. Scrolle zum entsprechenden Abschnitt (**Benutzerdefinierte Fehlerseite**, **Benutzerdefinierte Sicherheitsseite** oder **Wartungsmodus**)
4. Aktiviere die Funktion
5. Lade deine HTML-Datei hoch
6. Speichere die Konfiguration

Nach dem Upload erscheint eine Live-Vorschau deiner Seite im Konfigurationsbereich. Du kannst auf die Vorschau klicken, um sie in einem neuen Tab zu öffnen.

***

### Details zu den Seitentypen

#### Fehlerseite

Die Fehlerseite wird angezeigt, wenn smoxy deinen Origin-Server nicht erreichen kann oder der Origin zu lange für eine Antwort braucht.

**Wann sie erscheint:**

* **502 Bad Gateway** — Dein Origin hat eine ungültige Antwort zurückgegeben oder ist offline
* **504 Gateway Timeout** — Dein Origin hat nicht rechtzeitig geantwortet

**Template-Variablen:** Alle 4 Variablen verfügbar (`::SX_STATUS::`, `::SX_STATUS_TEXT::`, `::SX_HOST::`, `::SX_REMOTE_IP::`)

**Tipp:** Verwende `::SX_STATUS::`, um zwischen 502- und 504-Fehlern auf einer einzigen Seite zu unterscheiden, z. B. um unterschiedliche Problemlösungshinweise anzuzeigen.

#### Sicherheitsseite

Die Sicherheitsseite wird angezeigt, wenn eine Anfrage durch die Sicherheitsregeln oder WAF von smoxy blockiert wird.

**Wann sie erscheint:**

* **403 Forbidden** — Die Anfrage wurde durch eine Zugriffsregel oder die WAF blockiert

**Template-Variablen:** Alle 4 Variablen verfügbar

**Voraussetzung:** Die Sicherheitsfunktion muss auf deiner Site aktiviert sein, damit Sicherheitsblockierungen auftreten. Siehe Sicherheit & WAF für Details.

#### Wartungsseite

Die Wartungsseite wird angezeigt, wenn du den Wartungsmodus für deine Site aktivierst. Dies ist nützlich für geplante Ausfallzeiten oder Deployments.

**Wann sie erscheint:**

* **503 Service Unavailable** — Der Wartungsmodus ist aktiv

**Template-Variablen:** Keine — die Wartungsseite wird als statisches HTML ohne Variablenersetzung ausgeliefert.

**Tipp:** Da Wartungsseiten keine Template-Variablen unterstützen, solltest du alle notwendigen Informationen direkt im HTML einbinden.

***

### Vorschau

Nach dem Upload einer benutzerdefinierten Seite bietet smoxy eine interaktive Vorschau mit einer Toolbar, die es dir ermöglicht, zu testen, wie deine Seite mit verschiedenen Werten aussieht:

* **Statuscode** — Wähle verschiedene Statuscodes, um zu sehen, wie deine Template-Variablen gerendert werden
* **Hostname** — Gib einen Hostnamen ein, um die `::SX_HOST::`-Ersetzung zu testen
* **Remote IP** — Gib eine IP ein, um die `::SX_REMOTE_IP::`-Ersetzung zu testen

Die Vorschau wird in Echtzeit aktualisiert, wenn du die Toolbar-Werte änderst.

***

### Wichtige Hinweise

* **Eigenständiges HTML:** Deine benutzerdefinierte Seite sollte eine einzelne HTML-Datei sein. Externe Ressourcen (CSS-Dateien, Bilder, JavaScript), die auf deinen eigenen Servern gehostet werden, laden möglicherweise nicht, wenn dein Origin nicht erreichbar ist. Verwende stattdessen Inline-Styles und Base64-kodierte Bilder.
* **Dateigrößenlimit:** Halte deine Seiten unter 256 KB. Dieses Limit stellt eine schnelle Auslieferung auch unter hoher Last sicher.
* **Keine JavaScript-Abhängigkeiten:** Vermeide es, auf externe JavaScript-Bibliotheken angewiesen zu sein. Wenn dein Origin oder CDN nicht erreichbar ist, werden auch diese Ressourcen nicht geladen.
* **Mit der Vorschau testen:** Verwende immer die Vorschaufunktion, um sicherzustellen, dass deine Template-Variablen korrekt gerendert werden, bevor du live gehst.
* **Eine Seite pro Typ:** Jede Site hat eine benutzerdefinierte Seite pro Typ. Du kannst keine unterschiedlichen Seiten für verschiedene Hostnamen auf derselben Site konfigurieren.
