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 Dokumentationsseite geladen wird.

Befolgen Sie die nächsten Schritte, um die Option für die Landingpage zu ändern:

Klicken Sie auf den Weltraum, dem Sie eine benutzerdefinierte HTML-Landingpage hinzufügen möchten

Suchen Sie das Einstellungen-Zahnrad ( ⚙️ ) und klicken Sie darauf

Gehen Sie im Fenster Raumeinstellungen zur Registerkarte Landingpage

Wählen Sie Benutzerdefiniertes HTML

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

Benutzerdefiniertes HTML

Das Custom 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 von benutzerdefiniertem HTML auf der Landingpage:

<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 Struktur wie diese und ein hochgeladenes Logo:

Mit dem obigen Code sollten Sie etwas wie Folgendes sehen:

Benutzerdefinierte Funktionen zum Aktivieren der Suche

Auf einer benutzerdefinierten Landingpage können Sie Ihr eigenes Sucheingabefeld erstellen, aber Sie benötigen auch eine Möglichkeit, das Suchmodal anzuzeigen — dafür haben wir eine Lösung.

Auf dem `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 zur 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.