Página de destino personalizada
Puede configurar una página de HTML personalizado para cargar en lugar del primer documento, que es la opción predeterminada cuando se carga el sitio de documentación.
Para cambiar la opción de página de inicio, siga los siguientes pasos:
Haga clic en el Espacio al que desea agregar una página de inicio HTML personalizada
Seleccione la pestaña Apariencia
Desplácese hacia abajo hasta Página de destino
Seleccione HTML personalizado
Agregue su código HTML en el campo Página de destino HTMLy presione Guardar. Tenga en cuenta que este es su archivo index.html.
El HTML personalizado es compatible con Handlebars y Tailwind. Puede interpolar algunas variables en la plantilla HTML.
Este es el objeto que pasamos a la plantilla; puede representar cualquiera de estas variables:
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
}Este es un ejemplo de HTML para renderizar HTML personalizado en la página de inicio:
<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>Para una estructura como esta y un logotipo cargado:
Debería ver algo como esto, con el código anterior:
Funciones personalizadas para activar la búsqueda
En una página de inicio personalizada puede crear su propia entrada de búsqueda, pero también necesitará una forma de mostrar el modal de búsqueda — lo tenemos cubierto.
En el objeto `window` del navegador hay 2 métodos que puede llamar para controlar el modal de búsqueda.
// shows the search modal
window.showSearch()
// hides the search modal
window.hideSearch()Estas funciones también están disponibles para su uso en scripts personalizados.