Modèles de pages d’atterrissage
Archbee fournit des modèles de Landing Page en marque blanche afin que vous puissiez facilement créer une page de destination personnalisée pour votre portail de documentation
Comment obtenir le Custom Code
Comment 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 depuis 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 entouré par des balises <style></style>.
Le code de style commence par quelques déclarations de variables, qui peuvent être utilisées pour changer 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 depuis script.js
Ajoutez-le à la section JavaScript personnalisé de Space Settings -> Custom Code
Assurez-vous qu’il est entouré par des balises <script></script>.
HTML de la page d’accueil
Copiez le code HTML depuis index.html en commençant à 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 pouvant être utilisés pour naviguer à l’intérieur ou à l’extérieur de la documentation. À la fin de la liste, il y a également un lien commenté qui peut être utilisé pour ajouter d’autres liens si nécessaire.
Section Hero
Contient une image d’arrière-plan, 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 votre documentation. Un exemple est commenté à la fin de la liste.
