Pasgemaakte landingsbladsy
U kan 'n pasgemaakte HTML-bladsy opstel om te laai in plaas van die eerste dokument — wat die verstekopsie is wanneer die dokumentasiewebwerf laai.
Volg die volgende stappe om die landing page-opsie te verander:
Klik op die Ruimte waarby u 'n pasgemaakte HTML landing page wil voeg
Soek die Instellings-rat ( ⚙️ ) en klik daarop
Gaan in die Ruimte-instellings-venster na die Landingsbladsy-oortjie
Kies Pasgemaakte HTML
Voeg by u HTML-kode in die Landing page HTML -veld en druk Stoor. Hou in gedagte dat dit u index.html-lêer is.
Die Custom HTML ondersteun Handlebars en Tailwind. U kan sommige veranderlikes in die HTML-sjabloon interpoleer.
Hier is die objek wat ons aan die sjabloon deurgee; u kan enige van hierdie veranderlikes weergee:
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
}Hier is 'n voorbeeld-html om pasgemaakte html in die landing page weer te gee:
<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>Vir 'n struktuur soos hierdie en 'n opgelaaide logo:
U behoort iets soos hierdie te sien, met die bogenoemde kode:
Pasgemaakte funksies om soektog te aktiveer
Op 'n pasgemaakte landing page kan u u eie soekinvoer bou, maar u sal ook 'n manier nodig hê om die soek-modal te wys — ons het dit vir u gedek.
Op die `window`-objek van die blaaier is daar 2 metodes wat u kan aanroep om die soek-modal te beheer.
// shows the search modal
window.showSearch()
// hides the search modal
window.hideSearch()Hierdie funksies is ook beskikbaar vir gebruik in u pasgemaakte scripts.