---
title: เทมเพลตหน้าแลนดิ้ง
slug: th/user-guides/6vlyFg5yRU1dZCrBjfMG5
description: เรียนรู้วิธีสร้างหน้าแลนดิ้งแบบมืออาชีพและมีแบรนด์สำหรับพอร์ทัลงานเอกสารของคุณด้วยเทมเพลตหน้าแลนดิ้งแบบไวท์เลเบลของ Archbee เอกสารนี้มีคำแนะนำแบบทีละขั้นตอนเกี่ยวกับการใช้โค้ดที่กำหนดเอง รวมถึงไฟล์ HTML, CSS และ JavaScript
createdAt: 2023-06-07T10:11:09.000Z
---

Archbee มีแม่แบบหน้าแลนดิ้งแบบไวท์เลเบลเพื่อให้คุณสามารถสร้างหน้าแลนดิ้งที่มีแบรนด์สำหรับพอร์ทัลเอกสารของคุณได้อย่างง่ายดาย

# วิธีรับ Custom Code

::::WorkflowBlock
:::WorkflowBlockItem
จากคลัง GIT ของเรา (เร็วๆ นี้)
:::

:::WorkflowBlockItem
คัดลอกโค้ดแบบกำหนดเองจากเอกสารของเราไปยัง Space Settings

[เทมเพลต 1](docId\:P9ZaJ0EWiS9IPsA_CdhTl)

[เทมเพลต 2](docId:3cmxC1Asg8PZACgZBAnHO)
:::
::::

# วิธีใช้งาน

ในการตั้งค่าหน้าแลนดิ้งแบบกำหนดเอง คุณต้องคัดลอกโค้ดของเราไปที่ Space Settings -> ส่วน Custom Code และ Landing Page

สำหรับแต่ละเทมเพลต คุณจะมี 3 ไฟล์: `index.html`, `script.js` และ `style.css`

คุณสามารถหาไฟล์ทั้ง 3 ได้ด้านล่างสำหรับแต่ละเทมเพลต:

- [เทมเพลต 1](docId\:P9ZaJ0EWiS9IPsA_CdhTl)
- [เทมเพลต 2](docId:3cmxC1Asg8PZACgZBAnHO)

::::WorkflowBlock
:::WorkflowBlockItem
## แท็บ Include Headers

คัดลอกส่วน `Include Headers` จากไฟล์ `index.html`

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PPZ9fNNaAwAtqJRocLOO4_screenshot-2023-06-07-at-135912.png)

วางลงในส่วน `Include Headers` ของ **Space Settings -> Custom Code**

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9wpy-5_oml6i5wV31KY5g_screenshot-2023-06-07-at-140440.png)

ตรวจสอบให้แน่ใจว่าโค้ดมีแท็ก `<head>` และกด `Save`
:::

:::WorkflowBlockItem
## แท็บ Custom CSS

คัดลอกเนื้อหาจากไฟล์ `stlye.css`&#x20;

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/k_yNxjgap0NaqWKYpUmpM_screenshot-2023-06-07-at-140754.png)

และเพิ่มลงในส่วน `Custom CSS` จาก Space Settings -> Custom Code โดยต้องแน่ใจว่าครอบด้วยแท็ก `<style></style>`&#x20;

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/aums9GUiCrJePpu6WSwXZ_screenshot-2023-06-07-at-142032.png)

โค้ดสไตล์เริ่มต้นด้วยตัวแปรต่าง ๆ ซึ่งสามารถใช้ปรับธีมของหน้าได้ง่าย

```css
:root {
  --accent-text: #2166ae;
  --secondary-text: #0a4563;
  --primary-text: #24292e;
  --background-color: #fff;
  --primary-link: #999;
  --accent-link: var(--accent-text);
  --header-title-color: #fff;
  --header-subtitle-color: #fff;
}
```
:::

:::WorkflowBlockItem
## Custom JavaScript

คัดลอกโค้ดจาก `script.js`

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Qil2KIP5JCUdEODOWrbz-_screenshot-2023-06-07-at-142616.png)

เพิ่มไปยังส่วน `Custom Javascript` จาก Space Settings -> Custom Code

ตรวจสอบให้แน่ใจว่าครอบด้วยแท็ก `<script></script>`&#x20;

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Hom4i2ZWF0LRp6Hm1a7jC_screenshot-2023-06-07-at-142916.png)
:::

:::WorkflowBlockItem
## Landing page HTML

คัดลอกโค้ด HTML จาก `index.html` โดยเริ่มจากคอมเมนต์ `<!-- START Landing page -- >`&#x20;

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/b7ahvKWfrOGCUrXoUxdc8_screenshot-2023-06-07-at-143259.png)

เลือกประเภทหน้าแลนดิ้ง `Custom HTML` แล้วเพิ่มโค้ด HTML ลงในคอนเทนเนอร์ที่ปรากฏด้านล่าง

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/tFoqTxNLlu5FkvbT0ZJjI_screenshot-2023-06-07-at-143638.png)
:::

:::WorkflowBlockItem
### วิธีปรับแต่งโค้ด

### โลโก้ + รูปภาพ

รูปภาพและโลโก้ทั้งหมดถูกกำหนดด้วยตัวแทนในรูปแบบ `<img src="https://placehold.co/..." ... />` ดังตัวอย่างด้านล่าง

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Gx4-31jpVXRmSAmGygqU7_screenshot-2023-06-07-at-182855.png)

### ลิงก์ Navbar

Navbar มีลิงก์หลายรายการที่ใช้สำหรับนำทางทั้งภายในและภายนอกเอกสาร ที่ท้ายรายการมีลิงก์ที่ถูกคอมเมนต์ไว้เพื่อให้เพิ่มลิงก์อื่นได้หากต้องการ

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/4YOxDQq-aZ7nm0pWkBFLb_image.png)

### ส่วน Hero

ประกอบด้วยภาพพื้นหลัง หัวข้อ และคำบรรยาย (สีสามารถเปลี่ยนได้ในส่วนสไตล์ที่ชื่อว่า [Styles](docId:0th417UTmu9dZ8dfkCI-4) )

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PyQLTE3oBRKqUAB35X6_v_image.png)

### บล็อกเอกสาร

รายการของบล็อกที่มีไอคอน ชื่อ คำอธิบาย และปุ่ม ซึ่งมักใช้ในการนำไปยังเอกสาร ตัวอย่างจะถูกคอมเมนต์ไว้ท้ายรายการ

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/p8s7b8wG7-NnClHGhgy_I_image.png)
:::
::::