Mukautettu laskeutumissivu

4 min

Voit määrittää mukautetun HTML-sivun latautumaan ensimmäisen dokumentin sijaan – tämä on oletusvaihtoehto, kun dokumentaatiosivusto latautuu.

Muuta aloitussivun asetusta seuraavasti:

Napsauta Avaruus-aluetta, johon haluat lisätä mukautetun HTML-aloitussivun

Etsi Asetukset-hammasrataskuvake ( ⚙️ ) ja napsauta sitä

Siirry Tila-asetukset-ikkunassa Aloitussivu-välilehdelle

Valitse Mukautettu HTML

Lisää HTML-koodisi kenttään Laskeutumissivun HTML ja paina Tallenna. Muista, että tämä on index.html-tiedostosi.

Mukautettu HTML

Custom HTML tukee Handlebars- ja Tailwind-kirjastoja. Voit interpoloida joitakin muuttujia HTML-mallipohjaan.

Tässä on objekti, jonka välitämme mallipohjaan; voit renderöidä mitä tahansa näistä muuttujista:

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
}

Tässä on HTML-esimerkki mukautetun HTML:n renderöimiseksi aloitussivulla:

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

Tällaisella rakenteella ja ladatulla logolla:

Sinun pitäisi nähdä jotakin tällaista yllä olevan koodin kanssa:

Mukautetut funktiot haun aktivoimiseen

Mukautetulla aloitussivulla voit rakentaa oman hakusyötteesi, mutta tarvitset myös tavan näyttää hakumodaali — me hoidamme sen.

Selaimen `window`-objektissa on 2 metodia, joita voit kutsua hallitaksesi hakumodaalia.

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

Nämä funktiot ovat myös käytettävissä mukautetuissa skripteissänne.

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.