---
title: Custom Landing Page
slug: th/user-guides/custom-landing-page
description: เรียนรู้วิธีสร้างหน้าแลนดิ้ง HTML แบบกำหนดเองสำหรับ Space ของคุณบนไซต์เอกสารด้วยเอกสารฉบับสมบูรณ์นี้ ค้นหาคำแนะนำแบบทีละขั้นตอนเพื่อเข้าถึงการตั้งค่า Space เลือกแท็บ Landing Page และเลือกตัวเลือก Custom HTML สำรวจ co
createdAt: 2021-04-30T17:47:36.000Z
---

คุณสามารถตั้งค่า **HTML แบบกำหนดเอง** เพื่อให้โหลดแทนเอกสารแรก ซึ่งเป็นตัวเลือกเริ่มต้นเมื่อไซต์เอกสารถูกโหลด

**ในการเปลี่ยนตัวเลือกหน้าแลนดิ้ง ให้ทำตามขั้นตอนต่อไปนี้:**

::::WorkflowBlock
:::WorkflowBlockItem
คลิกที่ **Space** ที่คุณต้องการเพิ่มหน้าแลนดิ้ง HTML แบบกำหนดเอง
:::

:::WorkflowBlockItem
มองหาไอคอนรูปเฟือง **Settings** ( ⚙️ ) แล้วคลิก
:::

:::WorkflowBlockItem
ในหน้าต่าง **Space Settings** ไปที่แท็บ **Landing Page**
:::

:::WorkflowBlockItem
เลือก **Custom HTML**
:::

:::WorkflowBlockItem
**เพิ่ม** โค้ด **HTML **ของคุณในช่อง **Landing page HTML **และกด **Save**. 
โปรดจำไว้ว่านี่คือไฟล์ `index.html` ของคุณ
:::
::::

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/B5CZvTt5IrgUSOw1Jut85_custom-html-lp-light.png "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>
```

สำหรับโครงสร้างแบบนี้และโลโก้ที่อัปโหลด:

![](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()
```

ฟังก์ชันเหล่านี้ยังสามารถใช้งานได้ในสคริปต์ที่คุณกำหนดเองด้วย