下一個 Gatsby 項目中的 SVG

如果您希望在下一個使用 Gatsby 的 Web 項目中使用可縮放矢量圖形(SVG)，那麼您走運了！ 在本文中，我們將介紹如何在您的 Gatsby 項目中使用 SVG 文件，無論您是將它們用於插圖還是圖標。 我們還將介紹如何優化您的 SVG 以提高性能。 到本文結束時，您應該很好地了解如何在 Gatsby 中使用 SVG 以及如何為您的項目優化它們。

如何將圖片導入了不起的蓋茨比？

要將圖片導入Great Gatsby ，您需要先打開 Great Gatsby 文件。 打開文件後，轉到“插入”選項卡，然後單擊“圖片”。 從那裡，您將能夠選擇要插入的圖片。

除了新功能、更簡單的 API 和更好的性能之外，Gatsby 圖像插件還改進了性能。 它旨在與 Gatsby 的原生圖像處理功能無縫運行。 優化 JPEG 和 PNG 壓縮以生成多個縮略圖圖像。 此代碼針對具有固定寬度/高度的圖像和拉伸容器整個寬度的圖像進行了優化。 gatsby-image 支持兩種類型的響應式圖像。 要充分利用第一個場景的屏幕分辨率，您應該調整圖像的大小。 名為 fixed 的圖像的子對象可用於查詢 Gatsby 中的第一種類型。

與第二種類型類似，您將對名為 fluid 的子對象執行類似的查詢。 如果容器是流體類型，則容器中的圖像會被拉伸以匹配其寬度和高度，從而避免圖像與視口不匹配的邊緣情況。 當使用藝術指導來實現視覺效果時，多個圖像會在不同的斷點處顯示。 為此，瀏覽器使用 >picture> 標籤，以確保它們只下載特定斷點所需的圖像。

將圖像導入 Gatsby 站點的最佳方式

將圖像添加到 Gatsby 站點的最常見方法之一是將文件直接導入模板、頁面或組件，或者從靜態文件夾導入文件。 默認路徑是將文件直接導入到 Gatsby 模板、頁面或組件中。 導入資產是一種簡單有效的方式，也是我們用的最多的。 在某些情況下，靜態文件夾可能是更方便的選擇。 Gatsby-image 是一個專門用於處理 GraphQL 查詢的 React 組件。 Gatsby 允許您使用本機圖像處理功能和高級圖像加載技術輕鬆且完全優化網站的圖像加載。 如果您需要快速輕鬆地將圖像導入 Gatsby 站點，這是最快和最簡單的方法。

Gatsby 中的插件是什麼？

簡而言之，插件是擴展 Gatsby 功能的代碼片段。 它們可以幫助您做一些事情，例如添加對不同數據源的支持、優化您的站點以提高性能，甚至添加分析等功能。

Gatsby 靜態站點生成器是一個基於 React 的網站創建平台。 插件允許創建標準安裝中不可用的自定義功能。 在本教程中，我們將學習如何創建可在任何 Gatsby 站點上使用的插件。 為了使 Gatsby 工作，我們必須首先安裝 axios，它允許我們在網站上發表評論。 定義一個新的節點類型 CommentServer 也很關鍵，它用於擴展 Node.js。 之後，我們可以使用 axios 從評論數據庫中提取評論，並將它們作為 CommentServer 存儲在數據訪問層中。 為了獲取新節點，我們必須在 gatsby-node.js 中實現 sourceNodes API。

最後，我們必須使用一個名為 createResolvers 的 API 來將評論解析為帖子。 評論將保存在頁面 slug 的相應 JSON 文件中。 通過 HTTP 按需請求評論數據允許在無需使用任何查詢的情況下返回 GraphQL 評論。 評論 API 文件 gatsbybrowser.js 必須用於在瀏覽器中顯示評論。 當一個頁面剛剛被瀏覽過時，是執行文件獲取和組件插入的最佳時機。 我們的目標是通過定義 HTML 元素創建函數、選擇其類名並添加內容來創建 HTML 元素。 然後我們必須將公共目錄中的評論渲染到一個元素中。

我們將定義一個幫助器，它通過使用頁面的路徑名作為參考來返回頁面的評論。 我們將使用 createEl 幫助程序通過添加註釋來完成此操作。 querySelector API 用於從頁面生成表單。 如果用戶決定提交評論表單，我們會分析 onSubmit 事件以獲取有關他們何時可能這樣做的線索。 我們可以使用反饋來確定他們創建的評論是否有錯誤或是否成功提交。 本教程將引導您完成創建Gatsby 插件的步驟，以允許在我們的網站上發表評論。 您可以使用 gatsby-comment-server- 插件在您的博客中顯示您的評論。 因為我們的內容是靜態的，所以我們必須重啟服務器才能列出新的評論。

什麼是 Gatsby 插件？

夏普圖像處理庫提供了豐富的圖像處理功能。 其他Gatsby 插件通常以低級助手模式使用此插件。 儘管在某些情況下執行非常專業的圖像處理時它可能很有用，但您不應該直接使用它。

Gatsby-plugin-react-svg 不工作

我不確定問題出在哪裡，但 gatsby-plugin-react-svg 對我不起作用。 我嘗試按照插件的 GitHub 頁面上的說明進行操作，但無濟於事。 有沒有其他人有這個問題？

蓋茨比插件圖像

Gatsby 插件圖像是一個非常流行且有用的插件，可以幫助您優化圖像以獲得更好的性能。 它可以幫助您自動調整大小、裁剪和壓縮圖像。

Gatsby Image 插件處理了以各種格式和大小生成圖像的最困難的方面。 圖像分為兩種類型：靜態和動態。 在使用組件時使用靜態圖像將始終產生相同的圖像。 構建完成後，將下載任何遠程圖像並調整其大小。 借助 Gatsby Image，您可以使用 GraphQL 和 GatsbyImage 組件加載和顯示圖像。 componentStaticImage / 包含您必須配置的靜態圖像配置元素。 它還允許您更改用於延遲加載的佔位符類型，以及站點的大小和佈局。

使用 props 傳遞靜態圖片，首先要經過一些技術步驟。 必須使用 gatsbyImageData 解析器配置圖像。 除了大小和佈局選項之外，您還可以更改用於延遲加載的佔位符類型以及其他設置。 還提供高級圖像處理，以及可供您使用的圖像處理。 Gatsby 圖像插件參考指南解釋了所有配置選項。