Benutzerdefinierte Landingpage

4 min

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:

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

Wählen Sie die Registerkarte Darstellung

Scrollen Sie nach unten zu Landingpage

Wählen Sie Benutzerdefiniertes HTML

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

Das benutzerdefinierte HTML unterstützt Handlebars und Tailwind. 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:

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:

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

Mit dem obigen Code sollten Sie etwas wie dies sehen:

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.

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

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.