Página de destino personalizada
Puedes configurar una página HTML personalizada para cargar en lugar del primer documento, que es la opción predeterminada cuando se carga el sitio de documentos.
Para cambiar la opción de página de inicio, sigue los siguientes pasos:
Haz clic en el Espacio al que deseas agregar una página de inicio HTML personalizada
Busca el icono de Configuración ( ⚙️ ) y haz clic en él
En la ventana de Configuración del Espacio ve a la pestaña Página de Inicio
Selecciona HTML Personalizado
Agrega tu código HTML en el campo HTML de la página de inicio y haz clic en Guardar. Ten en cuenta que este es tu archivo index.html.
El HTML Personalizado es compatible con Handlebars y Tailwind. Puedes interpolar algunas variables en la plantilla HTML.
Aquí está el objeto que pasamos a la plantilla; puedes renderizar 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ías ver algo como esto, con el código anterior:
Funciones personalizadas para activar la búsqueda
En una página de inicio personalizada puedes crear tu propio campo de búsqueda, pero también necesitarás una forma de mostrar el modal de búsqueda — nosotros te cubrimos.
En el `window` del navegador hay 2 métodos que puedes 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 tus scripts personalizados.