หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

ทำเทมเพลต Gatsby ให้สมบูรณ์!

เริ่มต้นโครงการของคุณด้วยเทมเพลตนี้ ตัวเรียกใช้งานนี้มาพร้อมกับไฟล์ Gatsby และการตั้งค่าที่สำคัญที่สุดที่คุณอาจต้องใช้เพื่อเริ่มต้นและใช้งานด้วยความเร็วสูงสุดด้วยตัวสร้างแอปที่รวดเร็วปานสายฟ้าสำหรับ React

เริ่มต้นอย่างรวดเร็ว

  1. สร้างเว็บไซต์แกสบี้

    ใช้ Gatsby CLI เพื่อสร้างไซต์ใหม่ โดยระบุ เทมเพลต นี้ 

     # Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-template

  2. เริ่มพัฒนา.

    นำทางไปยังไดเร็กทอรีของไซต์ใหม่ของคุณและเปิดใช้งาน 

     cd my-project/
gatsby develop

  3. เปิดโค้ดและเริ่มแก้ไข!

    ขณะนี้เว็บไซต์ของคุณทำงานที่ http://localhost:8000 !

    หมายเหตุ: คุณจะเห็นลิงก์ที่สอง: http://localhost:8000/___graphql นี่เป็นเครื่องมือที่คุณสามารถใช้เพื่อทดลองค้นหาข้อมูลของคุณได้ เรียนรู้เพิ่มเติมเกี่ยวกับวิธีใช้เครื่องมือนี้ใน [บทแนะนำ Gatsby](https://www.gatsbyjs.org/tutorial/part-five/#introizing-graphiql)

    เปิดไดเร็กทอรี my-project ในโปรแกรมแก้ไขโค้ดที่คุณเลือกและแก้ไข src/pages/index.js บันทึกการเปลี่ยนแปลงของคุณ แล้วเบราว์เซอร์จะอัปเดตแบบเรียลไทม์!

กปภ

Progressive Web App เป็นคำที่ใช้แสดงถึงวิธีการพัฒนาซอฟต์แวร์ใหม่ ไม่เหมือนกับแอปทั่วไป Progressive Web App ถือเป็นวิวัฒนาการแบบลูกผสมระหว่างหน้าเว็บปกติและแอปบนอุปกรณ์เคลื่อนที่

รายการเว็บแอป (ส่วนหนึ่งของข้อกำหนด PWA) ขับเคลื่อนโดย ปลั๊กอินรายการ อนุญาตให้ผู้ใช้เพิ่มเว็บไซต์ของคุณไปที่หน้าจอหลักบนเบราว์เซอร์มือถือส่วนใหญ่ - ดูที่นี่ รายการแสดงการกำหนดค่าและไอคอนสำหรับโทรศัพท์

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

  • การสร้างไอคอนอัตโนมัติ - สร้างขนาดไอคอนหลายขนาดจากแหล่งเดียว
  • การสนับสนุน Favicon
  • รองรับไอคอนรุ่นเก่า (iOS) 1
  • การบล็อกแคช
  • ตำแหน่ง - จัดเตรียมรายการเฉพาะสำหรับตำแหน่งตามเส้นทาง (ตัวอย่าง Gatsby)

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

ปลั๊กอินที่ใช้งาน:

จะค้นหาปลั๊กอินเหล่านี้ได้ที่ไหน? คลิกที่นี่และค้นหา

  • react-helmet : React Helmet เป็นส่วนประกอบที่ช่วยให้คุณควบคุมส่วนหัวของเอกสารโดยใช้ส่วนประกอบ React
  • แผนผังเว็บไซต์ : สร้างแผนผังเว็บไซต์อัตโนมัติเมื่อสร้าง
  • Transformer-remark : มีหน้าที่รับผิดชอบในการแปลงโพสต์บล็อกที่เขียนด้วย Markdown เป็น HTML;
  • manifest : สร้างรายการที่ไม่ยุ่งยาก
  • ฟีด : สร้างฟีด RSS สำหรับเว็บไซต์ของคุณ
  • nprogress : แถบความคืบหน้าที่ด้านบนของหน้า สไตล์ YouTube;
  • google-analytics : รองรับการวิเคราะห์บนเว็บไซต์ของคุณ
  • styled-components : CSS IN JS styling model;
  • ผู้สร้างเพจ : สร้างเพจโดยอัตโนมัติจากส่วนประกอบ React ในไดเร็กทอรีที่ระบุ
  • source-filesystem : เซิร์ฟเวอร์เพื่อรับข้อมูลเข้าสู่แอปพลิเคชัน Gatsby จากระบบไฟล์ในเครื่อง
  • ออฟไลน์ : รองรับเว็บไซต์ให้ทำงานแบบออฟไลน์

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

ดูไฟล์และไดเร็กทอรีระดับบนสุดอย่างรวดเร็วที่คุณจะเห็นในเทมเพลต Gatsby นี้ 

 .
├── node_modules
├── config/
│ 	└── MetaData.js
├── src/
│ 	├── assets/
│ 	│ 	└── images/
│ 	│ 		└── logo.png
│ 	├── components/
│ 	├── Pages/
|	│ 	└── index.js
│ 	├── posts/
|	│ 	└── 2020-04-08--nosso-primeiro-post/
|	│ 		└── index.md
│ 	├── styles/
│ 	|	├── themes/
│ 	|	└── GlobalStyles.js
│ 	├── templates/
│ 	|	├── post.js
│ 	|	└── tag.js
│ 	└── html.js
├── static/
│ 	├── favicon.ico
│ 	└── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
ไฟล์/โฟลเดอร์ คำอธิบาย
/node_modules ไดเร็กทอรีนี้มีโมดูลโค้ดทั้งหมดที่โปรเจ็กต์ของคุณต้องพึ่งพา (แพ็กเกจ npm) ที่ได้รับการติดตั้งโดยอัตโนมัติ
/src ไดเรกทอรีนี้จะมีโค้ดทั้งหมดที่เกี่ยวข้องกับสิ่งที่คุณจะเห็นในส่วนหน้าของเว็บไซต์ของคุณ (สิ่งที่คุณเห็นในเบราว์เซอร์) เช่น ส่วนหัวของเว็บไซต์หรือเทมเพลตหน้า src เป็นแบบแผนสำหรับ "ซอร์สโค้ด"
.gitignore ไฟล์นี้จะบอกคอมไพล์ว่าไฟล์ใดที่ไม่ควรติดตาม/ไม่รักษาประวัติเวอร์ชัน
.prettierrc นี่เป็นไฟล์กำหนดค่าสำหรับ Prettier Prettier เป็นเครื่องมือที่ช่วยให้การจัดรูปแบบโค้ดของคุณสอดคล้องกัน
* gatsby-browser.js ในไฟล์นี้ Gatsby คาดว่าจะพบการใช้งาน API ของเบราว์เซอร์ Gatsby (หากมี) ซึ่งช่วยให้ปรับแต่ง/ขยายการตั้งค่าเริ่มต้นของ Gatsby ที่ส่งผลต่อเบราว์เซอร์ได้
gatsby-config.js นี่คือไฟล์การกำหนดค่าหลักสำหรับเว็บไซต์ Gatsby นี่คือที่ที่คุณสามารถระบุข้อมูลเกี่ยวกับไซต์ของคุณ (ข้อมูลเมตา) เช่น ชื่อไซต์และคำอธิบายของคุณ ปลั๊กอิน Gatsby ใดที่คุณต้องการรวมไว้ เป็นต้น (ตรวจสอบเอกสารการกำหนดค่าเพื่อดูรายละเอียดเพิ่มเติม)
gatsby-node.js ไฟล์นี้เป็นที่ที่ Gatsby คาดว่าจะพบการใช้งาน Gatsby Node API (หากมี) ซึ่งช่วยให้ปรับแต่ง/ขยายการตั้งค่าเริ่มต้นของ Gatsby ที่ส่งผลต่อกระบวนการสร้างไซต์บางส่วนได้
gatsby-ssr.js ในไฟล์นี้ Gatsby คาดว่าจะพบการใช้งาน API การเรนเดอร์เซิร์ฟเวอร์ Gatsby (ถ้ามี) ซึ่งช่วยให้ปรับแต่งการตั้งค่าเริ่มต้นของ Gatsby ที่ส่งผลต่อการเรนเดอร์ฝั่งเซิร์ฟเวอร์ได้
ใบอนุญาต Gatsby ได้รับอนุญาตภายใต้ใบอนุญาต MIT
แพคเกจ lock.json (ดู package.json ด้านล่างก่อน) นี่คือไฟล์ที่สร้างขึ้นโดยอัตโนมัติตามเวอร์ชันที่แน่นอนของการพึ่งพา npm ที่ติดตั้งสำหรับโปรเจ็กต์ของคุณ (คุณไม่ต้องเปลี่ยนไฟล์นี้โดยตรง)
แพ็คเกจ.json ไฟล์ Manifest สำหรับโปรเจ็กต์ Node.js ซึ่งรวมถึงสิ่งต่างๆ เช่น ข้อมูลเมตา (ชื่อโปรเจ็กต์ ผู้เขียน ฯลฯ) รายการนี้คือวิธีที่ npm รู้ว่าควรติดตั้งแพ็คเกจใดสำหรับโปรเจ็กต์ของคุณ
README.md ไฟล์ข้อความที่มีข้อมูลอ้างอิงที่เป็นประโยชน์เกี่ยวกับโครงการของคุณ
-

- การเรียนรู้แกสบี้

กำลังมองหาคำแนะนำเพิ่มเติมอยู่ใช่ไหม? เอกสาร Gatsby ฉบับสมบูรณ์อยู่ที่ [บนเว็บไซต์] (https://www.gatsbyjs.org/) ต่อไปนี้คือจุดเริ่มต้น:

  • สำหรับนักพัฒนาส่วนใหญ่ ฉันขอแนะนำให้เริ่มต้นด้วย [บทช่วยสอนเชิงลึกสำหรับการสร้างเว็บไซต์ด้วย Gatsby] (https://www.gatsbyjs.org/tutorial/) เริ่มต้นด้วยการตั้งสมมติฐานเกี่ยวกับระดับความสามารถของคุณเป็นศูนย์และผ่านทุกขั้นตอนของกระบวนการ

  • หากต้องการเจาะลึกตัวอย่างโค้ดโดยตรง โปรดไปที่ [เอกสารประกอบ] (https://www.gatsbyjs.org/docs/) โดยเฉพาะอย่างยิ่ง โปรดดู ส่วนคำแนะนำ การอ้างอิง API และบท ช่วยสอนขั้นสูง ในแถบด้านข้าง

- ปรับใช้

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