Landingpage‑Vorlagen
Archbee stellt White-Label-Landing-Page-Vorlagen bereit, damit Sie ganz einfach eine gebrandete Landing Page für Ihr Dokumentationsportal erstellen können
So erhalten Sie den Custom Code
So verwenden Sie es
Um Ihre benutzerdefinierte Landing Page einzurichten, müssen Sie unseren Custom Code in die Bereiche Space Einstellungen -> Custom Code und Landing Page kopieren.
Für jede Vorlage haben Sie 3 Dateien: index.html, script.js und style.css
Die 3 Dateien finden Sie unten für jede Vorlage:
Include Headers Tab
Kopieren Sie den Abschnitt Header einbeziehen aus der index.html
Fügen Sie ihn in den Abschnitt Header einbeziehen in den Space Einstellungen -> Benutzerdefinierter Code ein.
Stellen Sie sicher, dass er die <head>-Tags enthält, und drücken Sie Speichern.
Custom CSS Tab
Kopieren Sie den Inhalt der Datei style.css.
Und fügen Sie ihn in den Abschnitt Benutzerdefinierte CSS unter Space Settings -> Custom Code ein. Stellen Sie sicher, dass er in <style></style>-Tags eingeschlossen ist.
Der Style-Code beginnt mit einigen Variablendeklarationen, die verwendet werden können, um das Theme der Seite einfach zu ändern:
:root {
--accent-text: #2166ae;
--secondary-text: #0a4563;
--primary-text: #24292e;
--background-color: #fff;
--primary-link: #999;
--accent-link: var(--accent-text);
--header-title-color: #fff;
--header-subtitle-color: #fff;
}Custom JavaScript
Kopieren Sie den Code aus script.js
Fügen Sie ihn in den Abschnitt Benutzerdefiniertes Javascript unter Space Settings -> Custom Code ein.
Stellen Sie sicher, dass er in <script></script>-Tags eingeschlossen ist.
Landing Page HTML
Kopieren Sie den HTML-Code aus der index.html beginnend beim Kommentar <!-- START Landing page -- >.
Wählen Sie den Landing-Page-Typ Benutzerdefiniertes HTML und fügen Sie dann den HTML-Code in den darunter erscheinenden Container ein.
Wie Sie den Code anpassen
Logo + Bilder
Alle Bilder und Logos sind mit Platzhaltern im folgenden Format definiert: <img src="https://placehold.co/..." ... /> wie unten dargestellt:
Navbar-Links
Die Navbar enthält einige Links, die verwendet werden können, um innerhalb oder außerhalb der Dokumentation zu navigieren. Am Ende der Liste befindet sich außerdem ein auskommentierter Link, der verwendet werden kann, um bei Bedarf weitere Links hinzuzufügen.
Hero-Bereich
Enthält ein Hintergrundbild sowie einen Titel und Untertitel (deren Farben können im Style-Stile-Abschnitt geändert werden)
Dokumentblöcke
Eine Liste von Blöcken mit einem Symbol, einem Titel, einer Beschreibung und einer Schaltfläche, die in der Regel zur Navigation in Ihrer Dokumentation verwendet werden. Am Ende der Liste ist ein Beispiel auskommentiert.
