---
title: 定制登录页
slug: docs/cn/p39RLvZql7aGFvYYKN1Dc
description: 了解如何在文档网站上为您的 Space 创建个性化的 HTML 登录页。本文档提供了完整的步骤说明，包括进入 Space 设置、选择“登录页”标签页以及选择“定制 HTML”选项。继续探索 co
createdAt: 2021-04-30T17:47:36.000Z
---

您可以设置一个**定制 HTML** 页面来替代默认加载的第一个文档——这是文档站点加载时的默认选项。

**要更改登录页选项，请按照以下步骤操作：**

::::WorkflowBlock
:::WorkflowBlockItem
点击您想要添加 custom HTML 登录页的**空间**
:::

:::WorkflowBlockItem
选择**外观** 选项卡
:::

:::WorkflowBlockItem
向下滚动到**着陆页**
:::

:::WorkflowBlockItem
选择**定制 HTML**
:::

:::WorkflowBlockItem
**添加**您的**HTML 代码 **到**Landing page HTML** 字段并点击**保存**。
请记住，这将作为您的`index.html` 文件。
:::
::::

Custom HTML 支持[Handlebars](https://handlebarsjs.com/) 和 [Tailwind](https://tailwindcss.com/)。您可以在 HTML 模板中插入一些变量。

以下是我们传递给模板的对象；您可以渲染这些变量：

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

以下是一个示例 HTML，用于在登录页渲染自定义 HTML：

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

对于如下结构以及上传的 logo：

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

使用上述代码，您应当看到类似以下内容：

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

## 用于激活搜索的自定义函数

在自定义登录页中，您可以构建自己的搜索输入框，但您也需要一种方法来显示搜索弹窗——我们已经为您准备好了。

在浏览器的`` `window` `` 对象上，您可以调用 2 个方法来控制搜索弹窗。

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

这些函数也可用于您的自定义脚本中。