Page d'atterrissage personnalisée

4 min

Vous pouvez configurer une page HTML personnalisée à 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, veuillez suivre les étapes suivantes :

Cliquez sur l’Espace dans lequel vous souhaitez ajouter une page d’accueil HTML personnalisée

Sélectionnez l’onglet Apparence

Faites défiler jusqu’à Page d'atterrissage

Sélectionnez HTML personnalisé

Ajoutez votre code HTML dans le champ Page d'atterrissage HTMLet cliquez sur Enregistrer. Gardez à l’esprit 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 HTML personnalisé 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 également besoin d’un moyen d’afficher le modal 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 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.