เทมเพลตหน้าแลนดิ้ง

3 นาที

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

วิธีรับ Custom Code

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

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

เทมเพลต 1

เทมเพลต 2

วิธีใช้งาน

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

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

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

แท็บ Include Headers

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

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

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

แท็บ Custom CSS

คัดลอกเนื้อหาจากไฟล์ stlye.css

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

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

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

Custom JavaScript

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

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

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

Landing page HTML

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

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

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

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

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

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

ส่วน Hero

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

บล็อกเอกสาร

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

Have a question?

Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.