---
title: Page d'atterrissage personnalisée
slug: docs/fr/page-datterrissage-personnalisee
description: Découvrez comment créer une page d’atterrissage HTML personnalisée pour votre espace sur le site de documentation grâce à ce document complet. Trouvez des instructions étape par étape pour accéder aux paramètres de l’espace, sélectionner l’onglet Page d’a
createdAt: 2021-04-30T17:47:36.000Z
---

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 :**

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

:::WorkflowBlockItem
Sélectionnez l’onglet **Apparence** 
:::

:::WorkflowBlockItem
Faites défiler jusqu’à **Page d'atterrissage**
:::

:::WorkflowBlockItem
Sélectionnez **HTML personnalisé**
:::

:::WorkflowBlockItem
**Ajoutez** votre **code HTML **dans le champ **Page d'atterrissage HTML**et cliquez sur **Enregistrer**. 
Gardez à l’esprit qu’il s’agit de votre fichier `index.html`.
:::
::::

Le Custom HTML prend en charge [Handlebars](https://handlebarsjs.com/) et [Tailwind](https://tailwindcss.com/). 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 :

:::CodeblockTabs
First level variables

```typescript
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

```typescript
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 :

```html
<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é :

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/t4kCqi3UsLbZxU18egfrW_lp-hierarchy-light.png)

Vous devriez voir quelque chose comme ceci avec le code ci-dessus :

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/GPQzw-88S7MWUsXcYTXvg_screen-shot-2022-09-02-at-131325.png)

## 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.

```javascript
// 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.