我使用 Gatsby 創建了一個網站，並想要更改網站圖示（favicon）。 我迅速查找了如何更改它，過程非常簡單。 預設的網站圖示是 static/favicon.ico 這張圖片。只需更改該圖片，然後你的網站圖示就會更新。 如果你使用 gatsby-plugin-sharp 插件，預設的網站圖示則是 src/images/gatsby-icon.png。 你不必使用相同的路徑或相同的格式 - 圖片也可以是 SVG 格式的。例如，你可以打開 gatsby-config.js 文件，並將 plugins.gatsby-plugin-sharp.options.icon 屬性從 src/images/gatsby-icon.png 更改為你想要的圖片路徑。 例如，我將我的新網站圖示放在 src/images/logo-small.svg，並將配置屬性更改為指向該圖示。 接著運行 gatsby develop，你會立即看到 Gatsby 更新了所有不同尺寸的網站圖示：
Gatsby是一個使用React構建應用程序和網站的平台。 它是一個允許你使用一系列技術和實踐來構建的工具，這些技術和實踐被統稱為JAMstack。 Gatsby是當前前端開發領域中最火熱的工具之一。為什麼呢？我認為有以下幾個原因： “JAMstack"方法用於構建Web應用程序和網站的大幅增長 行業中對於"Progressive Web Apps”（漸進式Web應用程序）技術的快速采用，這也是Gatsby的關鍵功能之一 它是使用React和GraphQL構建的，這兩個技術非常流行和備受追捧 它功能強大 它的速度很快 文檔很好 網絡效應（有人使用它，創建站點，製作教程，更多人了解它，形成一種循環） 一切都是JavaScript（不需要學習新的模板語言） 它隱藏了複雜性，但允許我們逐步定制每一步 以上都是很好的優點，Gatsby絕對值得一試。 它是如何工作的？ 使用Gatsby，您可以使用React組件來構建應用程序。 您通常會使用Markdown編寫在站點中呈現的內容，但您也可以使用任何類型的數據源，例如無頭CMS或像Contentful這樣的Web服務。 Gatsby會構建站點，並將其編譯為靜態HTML，可以部署在任何Web服務器上，例如Netlify、AWS S3、GitHub Pages、常規託管提供商、PAAS等。您只需要找一個可以提供普通HTTP頁面和內容給客戶端的地方。 我在上面的列表中提到了漸進式Web應用程序。Gatsby會自動將您的站點生成為PWA，並使用服務工作器加快頁面加載和資源緩存。 您可以通過插件來增加Gatsby的功能。 安裝 您可以在終端中運行以下命令安裝Gatsby： npm install -g gatsby-cli 這將安裝gatsby命令行工具。 （當有新版本時，可以使用相同的命令進行更新） 您可以運行以下命令創建一個新的"Hello World"站點： gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world 此命令將在mysite文件夾中創建一個全新的Gatsby站點，使用位於https://github.com/gatsbyjs/gatsby-starter-hello-world的starter。 Starter是您可以基於的示例站點。另一個常見的starter是default，可在https://github.com/gatsbyjs/gatsby-starter-default上找到。 您可以在這裡找到所有可用的starter的列表 運行Gatsby站點 在終端完成安裝starter之後，可以運行以下命令來運行網站： cd mysite gatsby develop 這將在本地主機的8000端口上啟動一個新的Web服務器並提供網站。 以下是我們的Hello World starter的運作示例： 檢查站點 如果用您喜歡的代碼編輯器（我使用VS Code）打開您創建的站點，您會發現有3個文件夾： .cache：一個包含Gatsby內部代碼的隱藏文件夾，您在現在不需要更改其中的任何內容 public：在構建站點後包含生成網站的靜態文件 src：包含React組件的文件夾，這裡只有index組件 static：將包含靜態資源，例如CSS和圖片 現在，對默認頁面進行簡單的更改非常容易，只需打開src/pages/index.js文件，將“Hello World！”更改為其他內容，然後保存。網頁應立即熱重載該組件（這意味著網頁實際上不會刷新，但內容會更改 - 這是由底層技術支持的一個技巧）。 要添加第二個頁面，只需在此文件夾中創建另一個.js文件，與index.js具有相同的內容（調整内容）並保存。 例如，我創建了一個名為second.js的文件，具有以下內容： import React from 'react' export default () => <div>Second page!...
Next.js或Gatsby？為什麼要選擇它們而不是create-react-app？而你又應該選擇哪一個呢？ create-react-app無法輕鬆地幫助您生成伺服器端渲染的應用程式。它所提供的一切（包括SEO、速度等等），只能由像Next.js和Gatsby這樣的工具提供。 Next.js比Gatsby更適合的時機是什麼？ 它們都可以幫助實現伺服器端渲染，但方式不同。 使用Gatsby的結果是一個靜態網站生成器，沒有伺服器。您可以構建網站，然後將構建過程的結果靜態地部署在Netlify或其他靜態主機網站上。 Next.js提供了一個後端，可以根據請求生成伺服器端渲染的響應，讓您可以創建動態網站，這意味著您將在可以執行Node.js的平台上部署它。 Next.js也可以生成靜態網站，但我不認為這是它的主要用例。 如果我的目標是構建一個靜態網站，我可能很難選擇，也許Gatsby擁有更好的插件生態系統，包括許多特定於博客的插件。 Gatsby還高度依賴於GraphQL，您可能會根據自己的觀點和需求喜歡或不喜歡這一點。
在現代 JavaScript 網頁開發工作流中，通常會使用 npm 套件來安裝 JavaScript。然而，有時我們需要包含一個外部的 JavaScript 檔案，而現代的工具可能會讓這件事變得有些困難。 特別是在我的網站中需要包含來自 Wistia 的視頻時，經過快速查看後，一切看起來比我想像的要複雜得多。Wistia 給了我這個 HTML 片段來嵌入視頻： <script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia\_responsive\_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia\_responsive\_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia\_embed wistia\_async\_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia\_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div> 在一個「正常」的 HTML 網站中，比如我通常使用 Hugo 構建的網站，這是非常簡單的。我只需要將這段程式碼添加到我的頁面中即可。 但是在一個 Gatsby 頁面中，這是一個 React 組件，該怎麼做呢？ 我查看了一些插件，但沒有一個真正符合我的需求。解決方案可能有些「hacky」，但效果非常好，而且我仍然覺得對發生的事情有掌控權。 我將 HTML 片段轉換成了 JSX，並正確地轉換了所有的 HTML 屬性：class -> className，aria-hidden -> ariaHidden，以及樣式 - 可以使用像 htmltojsx 這樣的工具來快速轉換。 然後，我將這段程式碼添加到 gatsby-browser.js 檔案中，在頁面加載時加入我需要的腳本： const addScript = url => { const script = document....
我在建立 Gatsby 網站時遇到了一個奇怪的錯誤：無法找到模組 gatsby-cli/lib/reporter。 我使用 Gatsby 建立了一個網站，然後執行 gatsby develop 來啟動本地伺服器。 但是，一個奇怪的錯誤出現了，使我的終端顯示紅色的內容： 在 GitHub 和 StackOverflow 上進行了一些搜索（發現了很多遇到相同問題的人！）並解決了這個錯誤。 首先，我刪除了 node_modules： rm -rf node_modules 然後，我使用 yarn 替代了 npm install： yarn 這樣重新安裝了所有的套件。 最後，我執行了 gatsby develop，結果正常運行。 不確定問題的原因是什麼，但我嘗試過再次運行 npm install 而不是 yarn，但並沒有成功。
如何在深色或亮色模式下顯示不同的網頁圖示 我在 Mac 上設置了自動切換深色和亮色模式的功能。 當我開始建立一個新的網站時，有一段時間我意識到我把一個白色圖片設置為網頁圖示，而在亮色模式下它幾乎是看不見的！ 所以我開始探索在深色模式中添加一個網頁圖示以及在亮色模式中添加不同的圖示的可能方法。 結果發現（目前）無法對 PNG/JPG 位圖圖片進行這樣的操作，但我們可以使用 SVG 向量圖像的技巧來實現。 我們可以在 SVG 圖像中嵌入 CSS。 如果圖像足夠簡單以至於我們可以識別一個顏色並在深色模式下更改它，那麼我們可以為這 2 種模式設置不同的顏色。 這是我用作網頁圖示的 SVG 代碼： <svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg" > <style> path { fill: #ccc; } @media (prefers-color-scheme: dark) { path { fill: #fff; } } </style> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22....