---
title: Benutzerdefinierte Landingpage
slug: docs/de/benutzerdefinierte-landingpage
description: Erfahren Sie, wie Sie eine personalisierte HTML-Landingpage für Ihren Space auf der Dokumentationsseite erstellen. Dieses umfassende Dokument bietet Schritt-für-Schritt-Anleitungen zum Aufrufen der Space-Einstellungen, zum Auswählen des Reiters „Landingpa
createdAt: 2021-04-30T17:47:36.000Z
---

Sie können eine **benutzerdefinierte HTML**-Seite einrichten, die anstelle des ersten Dokuments geladen wird – dies ist die Standardoption, wenn die Docs-Seite geladen wird.

**Um die Option für die Landing Page zu ändern, folgen Sie den nächsten Schritten:**

::::WorkflowBlock
:::WorkflowBlockItem
Klicken Sie auf den **Raum**, zu dem Sie eine benutzerdefinierte HTML-Landing-Page hinzufügen möchten
:::

:::WorkflowBlockItem
Wählen Sie die Registerkarte **Darstellung** 
:::

:::WorkflowBlockItem
Scrollen Sie nach unten zu **Landingpage**
:::

:::WorkflowBlockItem
Wählen Sie **Benutzerdefiniertes HTML**
:::

:::WorkflowBlockItem
**Fügen Sie** Ihren **HTML-Code **im Feld **Landingpage-HTML**ein und klicken Sie auf **Speichern**. 
Beachten Sie, dass dies Ihre `index.html`-Datei ist.
:::
::::

Das benutzerdefinierte HTML unterstützt [Handlebars](https://handlebarsjs.com/) und [Tailwind](https://tailwindcss.com/). Sie können einige Variablen in der HTML-Vorlage interpolieren.

Hier ist das Objekt, das wir an die Vorlage übergeben; Sie können jede dieser Variablen rendern:

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

Dies ist ein Beispiel-HTML zum Rendern benutzerdefinierter HTML auf der Landing Page:

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

Für eine solche Struktur und ein hochgeladenes Logo:

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

Mit dem obigen Code sollten Sie etwas wie dies sehen:

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

## Benutzerdefinierte Funktionen zur Aktivierung der Suche

Auf einer benutzerdefinierten Landing Page können Sie ein eigenes Suchfeld erstellen, benötigen aber auch eine Möglichkeit, das Suchmodal anzuzeigen — dafür haben wir gesorgt.

Im `` `window` ``-Objekt des Browsers gibt es 2 Methoden, die Sie aufrufen können, um das Suchmodal zu steuern.

```javascript
// shows the search modal
window.showSearch()
// hides the search modal
window.hideSearch()
```

Diese Funktionen stehen auch für die Verwendung in Ihren benutzerdefinierten Skripten zur Verfügung.