---
title: Página de destino personalizada
slug: docs/es/pagina-de-destino-personalizada
description: Aprende cómo crear una página de destino HTML personalizada para tu Space en el sitio de documentación utilizando este completo documento. Encuentra instrucciones paso a paso para acceder a las Configuraciones del Space, seleccionar la pestaña Página de d
docTags: 
createdAt: 2021-04-30T17:47:36.000Z
---

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

::::WorkflowBlock
:::WorkflowBlockItem
Haga clic en el **Espacio** al que desea agregar una página de inicio HTML personalizada
:::

:::WorkflowBlockItem
Seleccione la pestaña **Apariencia** 
:::

:::WorkflowBlockItem
Desplácese hacia abajo hasta **Página de destino**
:::

:::WorkflowBlockItem
Seleccione **HTML personalizado**
:::

:::WorkflowBlockItem
**Agregue** su **código HTML **en el campo **Página de destino HTML**y presione **Guardar**. 
Tenga en cuenta que este es su archivo `index.html`.
:::
::::

El HTML personalizado es compatible con [Handlebars](https://handlebarsjs.com/) y [Tailwind](https://tailwindcss.com/). Puede interpolar algunas variables en la plantilla HTML.

Este es el objeto que pasamos a la plantilla; puede representar cualquiera de estas variables:

:::CodeblockTabs
First level variables

```typescript
export interface PublicDocSpaceResponse {
  id: string
  name: string
  icon: string
  publicLogoURL: string
  darkPublicLogoURL: string
  publicTheme: 'light' | 'dark' | 'auto'
  contentLayout: 'one-column' | 'two-column'
  isIndexable: boolean
  template: 'booklet' | 'stripe' | 'widget'
  faviconURL: string
  landingPageHeaderText: string
  landingPageSubheaderText: string
  landingTemplate?: string
  footerTemplate?: string
  headerIncludes?: string
  jwtRedirectURL?: string
  hostingTitle: string
  showReadTime: boolean
  showLastUpdate: boolean
  showContributors: boolean
  showDocFeedback: boolean
  logoRedirectURL: string
  hostingColor: string
  darkHostingColor: string
  hostname: string
  hostnamePath: string
  proxyDomain: string
  isArchbeeBrandVisible: boolean
  i18nLanguage: string
  isAuthenticated: boolean
  showPdfBookLink: boolean
  pdfBookLink?: string
  createdAt: string
  spaceLinks: PublicSpaceLink[]
  externalLinks: PublicExternalLink[]
  versionLinks: PublicVersionLink[]
  publicDocsTree: PublicDocTreeResponse[]
}
```

Prop Interfaces

```typescript
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:

```html
<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:

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/t4kCqi3UsLbZxU18egfrW_lp-hierarchy-light.png)

Debería ver algo como esto, con el código anterior:

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/GPQzw-88S7MWUsXcYTXvg_screen-shot-2022-09-02-at-131325.png)

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

```javascript
// 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.