หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

การแสดงตัวอย่างหน้า

เครื่องมือเริ่มต้นหน้า Landing Page ของ Gatsby

เครื่องมือเริ่มต้นหน้า Landing Page ที่เรียบง่าย น้อยที่สุด และใช้งานง่าย โดยไม่ต้องยุ่งยากอะไรมากมาย คุณจะต้องถอดออกในภายหลัง สร้างแลนดิ้งเพจที่สวยงามและรวดเร็วเป็นพิเศษจากเทมเพลตเปล่าที่มีหน้าเดียวที่ดูดีอยู่แล้ว

ข้อกำหนดเบื้องต้น

หากคุณยังไม่ได้ติดตั้ง Gatsby CLI ให้ดำเนินการก่อน 

npm install --global gatsby-cli

Gatsby CLI ใช้ Node และ npm ซึ่งคุณจะต้องติดตั้งด้วย ข้อมูลเพิ่มเติมสามารถพบได้ที่ GatsbyJS.org

เริ่มต้นใช้งาน

ติดตั้งสตาร์ทเตอร์โดยใช้คำสั่งใหม่ Gatsby 

gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git

นำทางไปยังไดเร็กทอรีโครงการและเปิดไซต์ 

 cd landing-page && gatsby develop

ไซต์จะเปิดขึ้นในเบราว์เซอร์เริ่มต้นของคุณที่ http://localhost:8000

แก้ไขโค้ดใน /src บันทึกการเปลี่ยนแปลงของคุณ จากนั้นการเปลี่ยนแปลงจะโหลดซ้ำทันทีในเบราว์เซอร์

- อะไรอยู่ข้างใน?

เครื่องมือเริ่มต้นหน้า Landing Page ขั้นต่ำมาพร้อมกับปลั๊กอินบางตัวที่ติดตั้งไว้แล้ว แต่จุดสนใจหลักคือการคงความเรียบง่ายและดูสะอาดตา สิ่งเหล่านี้รวมอยู่ตามค่าเริ่มต้น:

  • - รูปภาพ Gatsby: ภาพที่เพิ่มในโฟลเดอร์ src/images จะได้รับการปรับให้เหมาะสมโดยอัตโนมัติโดยปลั๊กอิน gatsby-image และสามารถดึงเข้าไปในส่วนประกอบต่างๆ ได้ด้วยการโหลดแบบ Lazy Loading และเอฟเฟกต์เบลอ
  • การวิเคราะห์: เพิ่มรหัสติดตาม Google Analytics ของคุณลงใน gatsby-config.js เพื่อเริ่มติดตามผู้เยี่ยมชมไซต์โดยอัตโนมัติ
  • - แผนผังไซต์: หน้าใหม่ใด ๆ ที่เพิ่มลงในไซต์จะถูกประกอบเข้าด้วยกันโดยอัตโนมัติเป็นแผนผังไซต์ผ่าน gatsby-plugin-sitemap
  • - ธีมสี: ไฟล์ src/styles/constants.js มีชุดสีและสไตล์เริ่มต้นที่นำไปใช้แบบอินไลน์กับส่วนประกอบบนไซต์ที่สามารถแทนที่ด้วยสไตล์ของคุณเองได้

- การทดลอง

หากคุณต้องการลองเล่นกับซอร์สโค้ดในสนามเด็กเล่นออนไลน์ คุณสามารถเปิด repo ใน Codesandox ด้วยปุ่มนี้

- ปรับใช้

หากคุณต้องการดูไซต์ออนไลน์อย่างรวดเร็ว คุณสามารถปรับใช้สำเนาของไซต์กับ Netlify ด้วยปุ่มนี้

หากต้องการสร้างโครงสร้างไซต์ที่ปรับให้เหมาะสมให้รันคำสั่งนี้ 

gatsby build

โฟลเดอร์ /public จะถูกประกอบขึ้นซึ่งสามารถนำไปใช้กับบริการต่างๆ เช่น Netlify, Surge, GitHub Pages, AWS S3, โฮสติ้ง Firebase หรือเซิร์ฟเวอร์ไฟล์ของคุณเอง

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด