Landingpage-Vorlagen
Archbee stellt White-Label-Landing-Page-Templates bereit, damit Sie einfach eine gebrandete Landing Page für Ihr Dokumentationsportal erstellen können
So erhalten Sie den Custom Code
So verwenden Sie es
Um Ihre Custom Landing Page einzurichten, müssen Sie unseren Custom Code in die Bereiche Space Settings -> Custom Code und Landing Page kopieren.
Für jede Vorlage erhalten Sie 3 Dateien: index.html, script.js und style.css
Die 3 Dateien finden Sie unten für jede Vorlage:
Registerkarte „Include Headers“
Kopieren Sie den Abschnitt Header einfügen aus index.html
Fügen Sie ihn in den Abschnitt Header einfügen von Raumeinstellungen -> Benutzerdefinierter Code
Stellen Sie sicher, dass die <head>-Tags enthalten sind, und klicken Sie auf Speichern
Registerkarte „Custom CSS“
Kopieren Sie den Inhalt der Datei stlye.css
Und fügen Sie ihn zum Abschnitt Benutzerdefiniertes CSS aus Space Settings -> Custom Code hinzu. Stellen Sie sicher, dass sie in <style></style>-Tags eingeschlossen sind.
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 zum Abschnitt Benutzerdefiniertes JavaScript aus Space Settings -> Custom Code hinzu
Stellen Sie sicher, dass sie in <script></script>-Tags eingeschlossen sind.
Landingpage-HTML
Kopieren Sie den HTML-Code aus index.html beginnend ab dem Kommentar <!-- START Landingpage -- >.
Wählen Sie den Landingpage-Typ Benutzerdefiniertes HTML aus und fügen Sie dann den HTML-Code in den darunter angezeigten Container ein.
So passen Sie den Code an
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 gibt es außerdem einen auskommentierten 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 im Abschnitt Stile geändert werden können)
Dokumentblöcke
Eine Liste von Blöcken mit einem Symbol, einem Titel, einer Beschreibung und einer Schaltfläche, die generell verwendet werden, um zu Ihrer Dokumentation zu navigieren. Ein Beispiel ist am Ende der Liste auskommentiert.
