Gatsby.js 未來的網頁03:目錄結構

[影片]Gatsby.js 未來的網頁03:File Structure

我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。

Gatsby.js 未來的網頁03:File Structure

主目錄

  • .cache:存放cache,可無視。
  • node_modules:存放node的modules,可無視。
  • public:存放最終由gatsby build產生的靜態文件,可無視。
  • src:主要的程式都放在這裡面,最常接觸。
  • .gitignore:Git的ignore設定
  • .prettierrc:prettier的設定
  • gatasby-browser.js, gatsby.node.js, gatsby-ssr.js:Gatsby的各種專門設定,很少用到
  • gatsby.config:整個網站的基本設定,包括網站名稱和使用的插件。
  • package.json:NPM設定
  • package-lock.json, yarn.lock:NPM和yarn的鎖定文件,無視。

src目錄

這個目錄下的結構會因Starter而不同,你也可以自行設計。

  • components:網站的主要結構元件,如header或layout(網頁結構)
  • images:存放圖片
  • pages:不同頁面的內容,通常供components裡的layout.js使用。

本文參與iT邦幫忙鐵人賽簡體

No comment yet, add your voice below!


Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料