--- /dev/null
+# Statische Assets der DokumentationsoberflÀche (selbst hosten)
+
+Die API-Dokumentation verwendet **Swagger UI** und **ReDoc**, und jede dieser Dokumentationen benötigt einige JavaScript- und CSS-Dateien.
+
+StandardmĂ€Ăig werden diese Dateien von einem <abbr title="Content Delivery Network â Inhalte-Auslieferungs-Netzwerk: Ein Dienst, der normalerweise aus mehreren Servern besteht und statische Dateien wie JavaScript und CSS bereitstellt. Er wird normalerweise verwendet, um diese Dateien von einem Server bereitzustellen, der nĂ€her am Client liegt, wodurch die Leistung verbessert wird.">CDN</abbr> bereitgestellt.
+
+Es ist jedoch möglich, das anzupassen, ein bestimmtes CDN festzulegen oder die Dateien selbst bereitzustellen.
+
+## Benutzerdefiniertes CDN fĂŒr JavaScript und CSS
+
+Nehmen wir an, Sie möchten ein anderes <abbr title="Content Delivery Network">CDN</abbr> verwenden, zum Beispiel möchten Sie `https://unpkg.com/` verwenden.
+
+Das kann nĂŒtzlich sein, wenn Sie beispielsweise in einem Land leben, in dem bestimmte URLs eingeschrĂ€nkt sind.
+
+### Die automatischen Dokumentationen deaktivieren
+
+Der erste Schritt besteht darin, die automatischen Dokumentationen zu deaktivieren, da diese standardmĂ€Ăig das Standard-CDN verwenden.
+
+Um diese zu deaktivieren, setzen Sie deren URLs beim Erstellen Ihrer `FastAPI`-App auf `None`:
+
+```Python hl_lines="8"
+{!../../../docs_src/custom_docs_ui/tutorial001.py!}
+```
+
+### Die benutzerdefinierten Dokumentationen hinzufĂŒgen
+
+Jetzt können Sie die *Pfadoperationen* fĂŒr die benutzerdefinierten Dokumentationen erstellen.
+
+Sie können die internen Funktionen von FastAPI wiederverwenden, um die HTML-Seiten fĂŒr die Dokumentation zu erstellen und ihnen die erforderlichen Argumente zu ĂŒbergeben:
+
+* `openapi_url`: die URL, unter welcher die HTML-Seite fĂŒr die Dokumentation das OpenAPI-Schema fĂŒr Ihre API abrufen kann. Sie können hier das Attribut `app.openapi_url` verwenden.
+* `title`: der Titel Ihrer API.
+* `oauth2_redirect_url`: Sie können hier `app.swagger_ui_oauth2_redirect_url` verwenden, um die Standardeinstellung zu verwenden.
+* `swagger_js_url`: die URL, unter welcher der HTML-Code fĂŒr Ihre Swagger-UI-Dokumentation die **JavaScript**-Datei abrufen kann. Dies ist die benutzerdefinierte CDN-URL.
+* `swagger_css_url`: die URL, unter welcher der HTML-Code fĂŒr Ihre Swagger-UI-Dokumentation die **CSS**-Datei abrufen kann. Dies ist die benutzerdefinierte CDN-URL.
+
+Und genau so fĂŒr ReDoc ...
+
+```Python hl_lines="2-6 11-19 22-24 27-33"
+{!../../../docs_src/custom_docs_ui/tutorial001.py!}
+```
+
+!!! tip "Tipp"
+ Die *Pfadoperation* fĂŒr `swagger_ui_redirect` ist ein Hilfsmittel bei der Verwendung von OAuth2.
+
+ Wenn Sie Ihre API mit einem OAuth2-Anbieter integrieren, können Sie sich authentifizieren und mit den erworbenen Anmeldeinformationen zur API-Dokumentation zurĂŒckkehren. Und mit ihr interagieren, die echte OAuth2-Authentifizierung verwendend.
+
+ Swagger UI erledigt das hinter den Kulissen fĂŒr Sie, benötigt aber diesen âUmleitungsâ-Helfer.
+
+### Eine *Pfadoperation* erstellen, um es zu testen
+
+Um nun testen zu können, ob alles funktioniert, erstellen Sie eine *Pfadoperation*:
+
+```Python hl_lines="36-38"
+{!../../../docs_src/custom_docs_ui/tutorial001.py!}
+```
+
+### Es ausprobieren
+
+Jetzt sollten Sie in der Lage sein, zu Ihrer Dokumentation auf <a href="http://127.0.0.1:8000/docs" class="external-link" target="_blank">http://127.0.0.1:8000/docs</a> zu gehen und die Seite neu zuladen, die Assets werden nun vom neuen CDN geladen.
+
+## JavaScript und CSS fĂŒr die Dokumentation selbst hosten
+
+Das Selbst Hosten von JavaScript und CSS kann nĂŒtzlich sein, wenn Sie beispielsweise möchten, dass Ihre Anwendung auch offline, ohne bestehenden Internetzugang oder in einem lokalen Netzwerk weiter funktioniert.
+
+Hier erfahren Sie, wie Sie diese Dateien selbst in derselben FastAPI-App bereitstellen und die Dokumentation fĂŒr deren Verwendung konfigurieren.
+
+### Projektdateistruktur
+
+Nehmen wir an, die Dateistruktur Ihres Projekts sieht folgendermaĂen aus:
+
+```
+.
+âââ app
+â âââ __init__.py
+â âââ main.py
+```
+
+Erstellen Sie jetzt ein Verzeichnis zum Speichern dieser statischen Dateien.
+
+Ihre neue Dateistruktur könnte so aussehen:
+
+```
+.
+âââ app
+â  âââ __init__.py
+â  âââ main.py
+âââ static/
+```
+
+### Die Dateien herunterladen
+
+Laden Sie die fĂŒr die Dokumentation benötigten statischen Dateien herunter und legen Sie diese im Verzeichnis `static/` ab.
+
+Sie können wahrscheinlich mit der rechten Maustaste auf jeden Link klicken und eine Option wie etwa `Link speichern unter...` auswÀhlen.
+
+**Swagger UI** verwendet folgende Dateien:
+
+* <a href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui-bundle.js" class="external-link" target="_blank">`swagger-ui-bundle.js`</a>
+* <a href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui.css" class="external-link" target="_blank">`swagger-ui.css`</a>
+
+Und **ReDoc** verwendet diese Datei:
+
+* <a href="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js" class="external-link" target="_blank">`redoc.standalone.js`</a>
+
+Danach könnte Ihre Dateistruktur wie folgt aussehen:
+
+```
+.
+âââ app
+â  âââ __init__.py
+â  âââ main.py
+âââ static
+ âââ redoc.standalone.js
+ âââ swagger-ui-bundle.js
+ âââ swagger-ui.css
+```
+
+### Die statischen Dateien bereitstellen
+
+* Importieren Sie `StaticFiles`.
+* âMountenâ Sie eine `StaticFiles()`-Instanz in einem bestimmten Pfad.
+
+```Python hl_lines="7 11"
+{!../../../docs_src/custom_docs_ui/tutorial002.py!}
+```
+
+### Die statischen Dateien testen
+
+Starten Sie Ihre Anwendung und gehen Sie auf <a href="http://127.0.0.1:8000/static/redoc.standalone.js" class="external-link" target="_blank">http://127.0.0.1:8000/static/redoc.standalone.js</a>.
+
+Sie sollten eine sehr lange JavaScript-Datei fĂŒr **ReDoc** sehen.
+
+Sie könnte beginnen mit etwas wie:
+
+```JavaScript
+/*!
+ * ReDoc - OpenAPI/Swagger-generated API Reference Documentation
+ * -------------------------------------------------------------
+ * Version: "2.0.0-rc.18"
+ * Repo: https://github.com/Redocly/redoc
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof m
+
+...
+```
+
+Das zeigt, dass Sie statische Dateien aus Ihrer Anwendung bereitstellen können und dass Sie die statischen Dateien fĂŒr die Dokumentation an der richtigen Stelle platziert haben.
+
+Jetzt können wir die Anwendung so konfigurieren, dass sie diese statischen Dateien fĂŒr die Dokumentation verwendet.
+
+### Die automatischen Dokumentationen deaktivieren, fĂŒr statische Dateien
+
+Wie bei der Verwendung eines benutzerdefinierten CDN besteht der erste Schritt darin, die automatischen Dokumentationen zu deaktivieren, da diese standardmĂ€Ăig das CDN verwenden.
+
+Um diese zu deaktivieren, setzen Sie deren URLs beim Erstellen Ihrer `FastAPI`-App auf `None`:
+
+```Python hl_lines="9"
+{!../../../docs_src/custom_docs_ui/tutorial002.py!}
+```
+
+### Die benutzerdefinierten Dokumentationen, mit statischen Dateien, hinzufĂŒgen
+
+Und genau wie bei einem benutzerdefinierten CDN können Sie jetzt die *Pfadoperationen* fĂŒr die benutzerdefinierten Dokumentationen erstellen.
+
+Auch hier können Sie die internen Funktionen von FastAPI wiederverwenden, um die HTML-Seiten fĂŒr die Dokumentationen zu erstellen, und diesen die erforderlichen Argumente ĂŒbergeben:
+
+* `openapi_url`: die URL, unter der die HTML-Seite fĂŒr die Dokumentation das OpenAPI-Schema fĂŒr Ihre API abrufen kann. Sie können hier das Attribut `app.openapi_url` verwenden.
+* `title`: der Titel Ihrer API.
+* `oauth2_redirect_url`: Sie können hier `app.swagger_ui_oauth2_redirect_url` verwenden, um die Standardeinstellung zu verwenden.
+* `swagger_js_url`: die URL, unter welcher der HTML-Code fĂŒr Ihre Swagger-UI-Dokumentation die **JavaScript**-Datei abrufen kann. **Das ist die, welche jetzt von Ihrer eigenen Anwendung bereitgestellt wird**.
+* `swagger_css_url`: die URL, unter welcher der HTML-Code fĂŒr Ihre Swagger-UI-Dokumentation die **CSS**-Datei abrufen kann. **Das ist die, welche jetzt von Ihrer eigenen Anwendung bereitgestellt wird**.
+
+Und genau so fĂŒr ReDoc ...
+
+```Python hl_lines="2-6 14-22 25-27 30-36"
+{!../../../docs_src/custom_docs_ui/tutorial002.py!}
+```
+
+!!! tip "Tipp"
+ Die *Pfadoperation* fĂŒr `swagger_ui_redirect` ist ein Hilfsmittel bei der Verwendung von OAuth2.
+
+ Wenn Sie Ihre API mit einem OAuth2-Anbieter integrieren, können Sie sich authentifizieren und mit den erworbenen Anmeldeinformationen zur API-Dokumentation zurĂŒckkehren. Und mit ihr interagieren, die echte OAuth2-Authentifizierung verwendend.
+
+ Swagger UI erledigt das hinter den Kulissen fĂŒr Sie, benötigt aber diesen âUmleitungsâ-Helfer.
+
+### Eine *Pfadoperation* erstellen, um statische Dateien zu testen
+
+Um nun testen zu können, ob alles funktioniert, erstellen Sie eine *Pfadoperation*:
+
+```Python hl_lines="39-41"
+{!../../../docs_src/custom_docs_ui/tutorial002.py!}
+```
+
+### BenutzeroberflÀche, mit statischen Dateien, testen
+
+Jetzt sollten Sie in der Lage sein, Ihr WLAN zu trennen, gehen Sie zu Ihrer Dokumentation unter <a href="http://127.0.0.1:8000/docs" class="external-link" target="_blank">http://127.0.0.1:8000/docs</a> und laden Sie die Seite neu.
+
+Und selbst ohne Internet könnten Sie die Dokumentation fĂŒr Ihre API sehen und damit interagieren.