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

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

::::WorkflowBlock
:::WorkflowBlockItem
Cliquez sur l’**Espace** auquel vous souhaitez ajouter une page d’accueil custom HTML
:::

:::WorkflowBlockItem
Recherchez l’icône d’**Paramètres** ( ⚙️ ) et cliquez dessus
:::

:::WorkflowBlockItem
Dans la fenêtre **Paramètres de l’espace**, accédez à l’onglet **Page d’accueil**.
:::

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

:::WorkflowBlockItem
**Ajoutez** votre **code HTML **dans le champ **Page de destination HTML**et cliquez sur **Enregistrer**. 
Gardez en tête qu’il s’agit de votre fichier `index.html`.
:::
::::

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/B5CZvTt5IrgUSOw1Jut85_custom-html-lp-light.png "Custom 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 custom html 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 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.

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