ESPACES HÉBERGÉS
Page d'atterrissage personnalisée
4 min
vous pouvez configurer une page html personnalisée à charger au lieu du premier document qui est l'option par défaut lorsque le site de documentation se charge pour changer l'option de page d'accueil, suivez les étapes suivantes cliquez sur l' espace où vous souhaitez ajouter une page d'accueil html personnalisée recherchez l' icône des paramètres ( ⚙️ ) et cliquez dessus dans la fenêtre des paramètres de l'espace , allez à l' onglet page d'accueil sélectionnez html personnalisé ajoutez votre code html dans le champ html de la page d'accueil et cliquez sur enregistrer gardez à l'esprit que ceci est votre index html fichier l'html personnalisé prend en charge https //handlebarsjs com/ et https //tailwindcss com/ vous pouvez interpoler certaines variables dans le modèle html voici l'objet que nous passons au modèle ; vous pouvez rendre n'importe laquelle de ces variables first level variables export interface publicdocspaceresponse { id string name string icon string publiclogourl string darkpubliclogourl string publictheme 'light' | 'dark' | 'auto' contentlayout 'one column' | 'two column' isindexable boolean template 'booklet' | 'stripe' | 'widget' faviconurl string landingpageheadertext string landingpagesubheadertext string landingtemplate? string footertemplate? string headerincludes? string jwtredirecturl? string hostingtitle string showreadtime boolean showlastupdate boolean showcontributors boolean showdocfeedback boolean logoredirecturl string hostingcolor string darkhostingcolor string hostname string hostnamepath string proxydomain string isarchbeebrandvisible boolean i18nlanguage string isauthenticated boolean showpdfbooklink boolean pdfbooklink? string createdat string spacelinks publicspacelink\[] externallinks publicexternallink\[] versionlinks publicversionlink\[] publicdocstree publicdoctreeresponse\[] } prop interfaces export interface publicdoctreeresponse { id string name string icon string urlkey string expanded? boolean iscategory? boolean categoryname? string islink? boolean linktitle? string linkhref? string linkopensinnewtab? boolean parentdocid? string rightdoc? publicdoctreeresponse leftdoc? publicdoctreeresponse children publicdoctreeresponse\[] } export type publicspacelink = { label string docspaceid string icon? string versionlinks? publicversionlink\[] hasversionswithoutlinks? boolean } export type publicversionlink = { label string docspaceid string forkedfrom string language string versionlinks? publicversionlink\[] } export type publicexternallink = { label string url string } ceci est un exemple de html pour rendre du html personnalisé sur la page d'accueil publiclogourl props example id {{ id }} name {{ name }} icon {{{ rendericon icon }}} public docs tree {{#each publicdocstree}} name {{name}} {{#if children}} {{#each children}} name {{name}} {{/each}} {{/if}} {{/each}} pour une structure comme celle ci et un logo téléchargé vous devriez voir quelque chose comme ça, avec le code ci dessus fonctions personnalisées pour activer la recherche sur une page d'atterrissage personnalisée, vous pouvez créer votre propre champ de recherche, mais vous aurez également besoin d'un moyen d'afficher la modal de recherche — nous avons ce qu'il vous faut sur l' `window` objet du navigateur, il y a 2 méthodes que vous pouvez appeler pour contrôler la modal de recherche // shows the search modal window\ showsearch() // hides the search modal window\ hidesearch() ces fonctions sont également disponibles pour une utilisation dans vos scripts personnalisés
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.