Page d’accueil personnalisée
Vous pouvez configurer une page HTML personnalisé à charger à la place du premier document — qui est l’option par défaut lorsque le site de documentation se charge.
Pour modifier l’option de page d’accueil, suivez les étapes suivantes :
Cliquez sur l’Espace auquel vous souhaitez ajouter une page d’accueil custom HTML
Recherchez l’icône d’Paramètres ( ⚙️ ) et cliquez dessus
Dans la fenêtre Paramètres de l’espace, accédez à l’onglet Page d’accueil.
Sélectionnez HTML personnalisé
Ajoutez votre code HTML dans le champ Page de destination HTMLet cliquez sur Enregistrer. Gardez en tête qu’il s’agit de votre fichier index.html.
Le Custom HTML prend en charge Handlebars et Tailwind. Vous pouvez interpoler certaines variables dans le modèle HTML.
Voici l’objet que nous transmettons au modèle; vous pouvez afficher n’importe laquelle de ces variables :
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
}Voici un exemple de code html pour afficher du custom html dans la page d’accueil :
<div class="flex flex-col justify-center items-center p-20">
<div class="flex">
<div class="font-semibold">publicLogoURL:</div>
<img class="w-100" src="{{publicLogoURL}}" />
</div>
<div class="w-1/3">
<h1 class="font-bold text-2xl">Props example</h1>
<div class="flex">
<div class="font-semibold">Id:</div>
<div>{{ id }}</div>
</div>
<div class="flex">
<div class="font-semibold">Name:</div>
<div>{{ name }}</div>
</div>
<div class="flex">
<div class="font-semibold">Icon:</div>
<div>{{{ renderIcon icon }}}</div>
</div>
<div class="py-3">
<p>Public Docs Tree:</p>
<ol>
{{#each publicDocsTree}}
<li class="text-green-500">
<a href="{{urlKey}}">
<span class="font-semibold ">Name:</span>
<span class="pl-3">{{name}}</span>
</a>
{{#if children}}
<ul class="pl-4">
{{#each children}}
<li class="text-gray-500">
<a href="{{urlKey}}">
<span class="font-semibold ">Name:</span>
<span class="pl-3">{{name}}</span>
</a>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ol>
</div>
</div>
</div>Pour une structure comme celle-ci et un logo téléversé :
Vous devriez voir quelque chose comme ceci, avec le code ci-dessus :
Fonctions personnalisées pour activer la recherche
Sur une page d’accueil personnalisée, vous pouvez créer votre propre champ de recherche, mais vous aurez aussi besoin d’un moyen d’afficher le module de recherche — nous avons ce qu’il vous faut.
Dans l’objet `window` du navigateur, il existe 2 méthodes que vous pouvez appeler pour contrôler le module 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.