iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

PWA, Severless, GraphQL實作系列 第 3

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

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

YouTube Video:
Yes

主目錄

  • .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使用。

同步發表於: NodeJust.com


上一篇
[影片]Gatsby.js 未來的網頁02:安裝Gatsby.js
下一篇
[影片]Gatsby.js 未來的網頁04:新增頁面
系列文
PWA, Severless, GraphQL實作10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言