Modèles de page d’atterrissage
Archbee fournit des modèles de Landing Page en marque blanche afin que vous puissiez facilement créer une page d’accueil personnalisée pour votre portail de documentation
Comment obtenir le Custom Code
Comment l’utiliser
Pour configurer votre Custom Landing Page, vous devez copier notre code personnalisé dans les sections Space Settings -> Custom Code et Landing Page.
Pour chaque Modèle, vous aurez 3 fichiers : index.html, script.js et style.css
Les 3 fichiers se trouvent ci-dessous pour chaque Modèle :
Onglet Include Headers
Copiez la section Inclure les en-têtes à partir de index.html
Collez-la dans la section Inclure les en-têtes de Paramètres de l’espace -> Code personnalisé
Assurez-vous qu’elle inclut les balises <head> et appuyez sur Enregistrer
Onglet Custom CSS
Copiez le contenu du fichier stlye.css
Et ajoutez-le à la section CSS personnalisé de Space Settings -> Custom Code. Assurez-vous qu’il est inclus dans les balises <style></style>.
Le code de style commence par quelques déclarations de variables, qui peuvent être utilisées pour modifier facilement le thème de la page :
: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
Copiez le code de script.js
Ajoutez-le à la section JavaScript personnalisé de Space Settings -> Custom Code
Assurez-vous qu’il est inclus dans les balises <script></script>.
HTML de la page d’accueil
Copiez le code HTML de index.html à partir du commentaire <!-- START Page d'accueil -- >.
Sélectionnez le type de page d’accueil HTML personnalisé puis ajoutez le code HTML dans le conteneur qui apparaît ci-dessous.
Comment personnaliser le code
Logo + images
Toutes les images et tous les logos sont définis avec des espaces réservés au format : <img src="https://placehold.co/..." ... /> comme illustré ci-dessous :
Liens de la barre de navigation
La barre de navigation contient quelques liens qui peuvent être utilisés pour naviguer à l’intérieur ou à l’extérieur de la documentation. À la fin de la liste, il y a aussi un lien commenté qui peut servir à ajouter d’autres liens au besoin.
Section Hero
Contient une image d’arrière-plan ainsi qu’un titre et un sous-titre (leurs couleurs peuvent être modifiées dans la section de style Styles ).
Blocs de documents
Une liste de blocs contenant une icône, un titre, une description et un bouton, généralement utilisée pour naviguer vers vos documents. Un exemple est commenté à la fin de la liste.
