gatsby template

完整的蓋茲比模板！

使用此範本開始您的專案。該啟動器附帶了最基本的 Gatsby 文件和設置，您可能需要使用快速的 React 應用程式生成器來以最快的速度啟動和運行。

快速啟動

1. 創建一個蓋茲比網站。

   使用 Gatsby CLI 建立一個新站點，並指定此Template 。

    # 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/#introducing-graphiql) 中了解有關如何使用此工具的更多資訊。

   在您選擇的程式碼編輯器中開啟my-project目錄並編輯src/pages/index.js 。保存您的更改，瀏覽器將即時更新！

漸進式網頁應用

漸進式 Web 應用程式是一個術語，用於表示一種新的軟體開發方法。與傳統應用程式不同，漸進式 Web 應用程式可以被視為常規網頁和行動應用程式之間的混合演進。

由清單外掛程式支援的網路應用程式清單（PWA 規格的一部分）允許使用者將您的網站新增至大多數行動瀏覽器的主畫面 - 請參閱此處。此清單提供了電話的配置和圖示。

除了清單配置之外，該插件還提供了一些功能來讓您的生活更輕鬆，它們是：

• 自動圖示產生 - 從單一來源產生多種圖示尺寸
• 網站圖示支持
• 舊圖示支援 (iOS) 1
• 快取阻塞
• 位置 - 為基於路徑的位置提供獨特的清單（Gatsby 範例）

這些功能中的每一個都具有廣泛的可用配置，因此您始終處於控制之中。

實施的插件：

在哪裡可以搜尋這些插件？點擊這裡並蒐索

• react-helmet ：React Helmet 是一個允許你使用 React 元件控製文件頭的元件；
• sitemap ：在建置時自動產生網站地圖；
• Transformer-remark ：負責將用 Markdown 寫的部落格文章轉換為 HTML；
• 清單：建立一個無麻煩的清單；
• feed ：為您的網站建立 RSS 提要。
• nprogress ：頁面頂部的進度條，YouTube 風格；
• google-analytics ：支持您網站上的分析；
• styled-components ：CSS IN JS 樣式模型；
• page-creator ：自動從指定目錄下的 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

文件/資料夾	描述
/節點模組	該目錄包含您的專案所依賴的所有自動安裝的程式碼模組（npm 套件）。
/src	目錄將包含與您將在網站前端看到的內容（您在瀏覽器中看到的內容）相關的所有程式碼，例如網站標題或頁面範本。 src是「原始碼」的約定。
.gitignore	該文件告訴 git 不應追蹤/不維護版本歷史記錄的文件。
.prettierrc	這是 Prettier 的設定檔。 Prettier 是一個幫助保持程式碼格式一致的工具。
* gatsby-browser.js	Gatsby 希望在這個檔案中找到 Gatsby 瀏覽器 API 的任何使用（如果存在）。這允許自訂/擴充功能影響瀏覽器的預設 Gatsby 設定。
gatsby-config.js	這是 Gatsby 網站的主要設定檔。您可以在此處指定有關網站的資訊（元資料），例如網站標題和描述、您想要包含哪些 Gatsby 外掛程式等。 （請參閱配置文件以獲取更多詳細資訊）。
gatsby-node.js	Gatsby 希望在該檔案中找到 Gatsby Node API 的任何用法（如果存在）。這允許自訂/擴充影響網站建立過程部分的預設 Gatsby 設定。
gatsby-ssr.js	Gatsby 希望在這個檔案中找到 Gatsby 伺服器渲染 API 的任何使用（如果存在）。這允許自訂影響伺服器端渲染的預設 Gatsby 設定。
執照	Gatsby 根據 MIT 許可證獲得許可
包鎖.json	（首先請參閱下面的package.json ）。這是一個根據已為專案安裝的 npm 依賴項的確切版本自動產生的檔案。 （您不能直接變更此文件）。
包.json	Node.js 專案的清單文件，其中包含元資料（專案名稱、作者等）等內容。此清單是 npm 如何知道要為您的專案安裝哪些套件的方式。
自述文件.md	包含有關您的項目的有用參考資訊的文本文件。
****

？學習蓋茲比

尋找更多指導？完整的 Gatsby 文件位於 [網站上] (https://www.gatsbyjs.org/)。以下是一些可以開始的地方：

• 對於大多數開發人員，我建議從我們的 [使用 Gatsby 創建網站的深入教程] (https://www.gatsbyjs.org/tutorial/) 開始。它從對您的能力水平的零假設開始，並貫穿該過程的每一步。

• 若要直接深入了解程式碼範例，請造訪[文件] (https://www.gatsbyjs.org/docs/)。特別是，請參閱側邊欄中的指南、 API 參考和進階教學部分。

？部署