在Next.js中添加自定义图标并使用React动态更新
目錄
- 簡介 🌟
- 自訂網站的應用程式專用圖示
- 使用 Next.js 動態更新網站圖示
- 使用 Next.js 建立新應用程式
- 生成自訂網站圖示
- 將自訂網站圖示新增至 Next.js
- 在全域範圍內新增自訂網站圖示
- 動態更新網站圖示
- 動態更新網站圖示的應用案例
- 總結
1. 簡介 🌟
嗨大家好，歡迎來到本教學影片，我是 Colby Feyhawk。今天我們將學習如何在 Next.js 中添加自訂網站圖示，並且還會學習如何在使用者互動或特定事件發生時動態更新它們。讓我們開始吧！
2. 自訂網站的應用程式專用圖示
在接下來的教學中，我們將使用 Next.js 來創建一個新的應用程式並將自訂網站圖示添加到該應用程式中。在我們深入研究之前，我們需要先了解一下什麼是網站圖示。
網站圖示是在瀏覽器或書籤中設置的小圖示，用於識別與該連結相關聯的網站。舉個例子，我們來看一下 spacejelly.dev 的快照，我在那裡做了一個小的自訂圖示，上面有宇宙水母 Cosmo 的眼睛。我們將學習如何在我們自己的網站中添加一個網站圖示，並使用 Next.js 來實現。現在，當然，我們要先確保您已經了解並熟悉 Next.js 這個強大的網頁框架。如果您想了解更多關於 Next.js 及其令人驚歎的功能的資訊，請務必查看我在播放清單中的其他影片。
3. 使用 Next.js 動態更新網站圖示
現在，讓我們開始從頭創建一個新的應用程式。首先，打開終端機並輸入 yarn create next app 命令，並給它一個名稱，例如 favicon-app。應用程式創建完成後，我們可以進入該目錄並運行 yarn dev 命令，以啟動我們的本地開發伺服器。現在，我們可以在 localhost:3000 上看到我們的新的 Next.js 應用程式。
接下來，我們將查看我們的應用程式並檢查是否已經有一個網站圖示。如果我們打開我們的代碼並查看 index.js，可以看到在頂部已經有一個 favicon.ico 文件，這是使用 Next.js 的 head 組件添加的。此外，在我們的 public 目錄中，還有一個名為 favicon.ico 的文件，它在瀏覽器中顯示的圖示與這裡看到的圖示相同。如果我們查看瀏覽器中的源代碼，我們甚至可以看到這個標籤直接添加到我們的網站中。不過，這是屬於 Cells 的標誌。我們希望在自己的網站上添加自訂的網站圖示。
4. 使用 Next.js 建立新應用程式
現在，我們先從頭開始創建一個新的應用程式。在終端機中，輸入以下指令：
yarn create next-app favicon-app
這將使用 Next.js 的模板創建一個新的應用程式。完成後，進入應用程式目錄：
cd favicon-app
然後，運行以下指令以開始開發伺服器：
yarn dev
現在，您可以在 http://localhost:3000 上看到新的 Next.js 應用程式。
5. 生成自訂網站圖示
接下來，我們將設置我們自己的網站圖示。我們將使用一個名為 realfavicongenerator.net 的網站來生成我們的圖示。這個網站將讓我們選擇圖片並輕鬆生成我們所需的所有網站圖示。
首先，我們需要選擇自己的圖片，然後將其上傳到該網站。在選擇圖片後，favicon-generator 將處理這個選擇，並顯示我們在瀏覽器中的預覽。同時，我們還可以使用其他自定義設置，例如使用通用圖片或自己已經創建的圖示等。當我們向下滾動時，我們可以看到這個圖示在 iPhone 上的預覽，以及我們在 Android Chrome 上的預覽。但是，最後，當我們滾動到頁面底部時，我們會看到我們最關心的東西，那就是要點擊 generate your favicons and HTML code。
當這個選項完成後，我們需要注意兩件事情。首先，我們需要點擊下載 favicons package，這是個 zip 文件，如果解壓縮它，就能看到我們剛剛生成的文件。在這些文件中，我們有各種尺寸的 favicons 和應用程式圖示。我們需要將它們移動到我們的應用程式中的 public 文件夾中。請確保替換 favicon.ico 檔案。
另外，我們需要複製並粘貼要添加到應用程式的代碼。簡單地複製整個代碼塊，然後返回到我們的應用程式代碼中，並將其粘貼到 head 組件中的 head 標記中。我們將替換掉原始的 favicon.ico 的設置，這是因為瀏覽器在找不到任何其他文件時會自動查找根目錄中的 favicon.ico 文件。
如果一切正確，我們會在瀏覽器中看到新的自訂網站圖示。現在，讓我們繼續添加這個圖示到全域範圍內。
6. 將自訂網站圖示新增至 Next.js
在 Next.js 中，我們可以在全域範圍內設置自訂網站圖示，這意味著無論用戶訪問我們應用程式的哪個頁面，都會顯示相同的網站圖示。
為了實現這一點，我們將使用一個名為 head 的 Next.js 組件。這個組件可以在我們的應用程式的任何地方使用，並且它允許我們獲取對 head 標籤的完全控制權，而不僅僅是在根組件中。這將允許我們在瀏覽器 tab 標籤中顯示我們的網站圖示。
首先，讓我們從頭開始，導入 head 組件。在文件的頂部，我們將添加以下代碼：
import Head from 'next/head';
接著，在 App 組件內部，我們將把 head 組件包裝在一個 Fragment 中，以便我們可以在組件內部有一個方便的容器。請將以下代碼添加到 App 組件中：
<Head>
<>
{/* 這裡是我們的網站圖示代碼 */}
</>
</Head>
最後，我們希望將這個新的 head 組件添加到我們的應用程式中。打開我們的 index.js 文件並複製整個 head 組件代碼。然後，將其粘貼到 App 組件的 Fragment 中。完成後，刪除原始的 head 組件代碼，因為我們不再需要它。
現在，如果我們返回我們的應用程式並刷新頁面，我們應該看到它已更新為我們的新自訂網站圖示。如果我們查看源代碼，可以看到剛剛我們添加的所有標籤。
7. 在全域範圍內新增自訂網站圖示
現在，我們已經在全域範圍內添加了自訂網站圖示，讓我們確保我們的每個頁面都使用了這個預設的圖示。這對於大多數情況來說是非常理想的，但如果我們想要為特定的頁面添加不同的圖示怎麼辦？
在 Next.js 中，我們可以輕鬆地實現這一點。只需創建一個新的圖示文件，並在特定的頁面上使用它即可。
首先，我們需要創建一個新的圖示文件，就像我們之前做的那樣。在這個例子中，我創建了另一個版本的 spacejelly.dev 圖示，只是在裡面添加了一把鎖。
現在，我們需要將這個圖示文件命名為與我們要在特定頁面上使用的圖示相同的名稱。然後，將其拖動到我們應用程式中的 public 文件夾中，並確定要替換原始的 favicon.ico 檔案。
完成這一步後，我們可以在我們的應用程式中創建一個新的頁面，例如 admin.js。將該文件複製到我們的 pages 文件夾中，並重命名它為 admin.js。然後，將 <title> 標籤中的文字更改為 Admin，這樣我們就知道我們正在訪問不同的頁面了。最後，將鏈結修改為指向我們的 admin 頁面。修改完成後，保存文件。
現在，如果我們返回我們的應用程式並刷新頁面，我們應該看到我們的圖示已經更新為我們在 admin.js 文件中指定的指定圖示。如果我們查看源代碼，我們可以看到它添加了這些原始的標籤，但也添加了我們在 admin.js 文件中指定的標籤。
回到主頁後，我們會發現圖示並未自動更新回原始的圖示。這是因為瀏覽器只會根據它看到的最後一個 favicon.ico 文件來渲染圖示，而不會回到以前的圖示。為了解決這個問題，我們需要返回我們的 index.js 文件，複製我們的代碼塊，並將它們添加回我們的 head 組件中，以便在每個頁面上都應用這些標籤。這將確保無論用戶首先訪問哪個頁面，都會看到正確的圖示。
8. 動態更新網站圖示
到目前為止，我們已經學會了如何使用靜態的自訂網站圖示，或者在特定頁面上使用自訂網站圖示。那麼，如果我們希望根據用戶互動或特定事件的發生來動態更新網站圖示呢？在 Next.js 中，我們可以輕鬆實現這一點，因為我們的圖示是使用 React 組件來管理的，所以它們可以像其他任何 React 組件一樣具有動態性。
讓我們來展示一下這是如何工作的。首先，我們需要在頂部導入 useState 組件：
import { useState } from 'react';
然後，在組件的頂部，創建一個新的狀態，並將其命名為 favicon，同時還需要一個相對應的 setFavicon 函數來更新它：
const [favicon, setFavicon] = useState('');
這將創建一個 favicon 狀態，初始值為空字符串。
接下來，我們需要創建一個處理點擊事件的函數，並將它綁定到我們的按鈕上。這個函數將在每次點擊按鈕時更新 favicon 狀態。在這個例子中，我們將創建一個模擬喜歡或收藏的按鈕，並將 favicon 狀態設置為 'favorite' 字符串。然後，使用 setTimeout 函數，我們將在三秒後將 favicon 狀態還原為空字符串，這樣我們的圖示就會恢復到默認值。
最後，我們將在這個函數的開頭添加 console.log 語句，以便我們可以測試它。將以下代碼添加到組件中：
const handleClick = () => {
setFavicon('favorite');
setTimeout(() => {
setFavicon('');
}, 3000);
console.log(favicon);
};
這將創建一個處理點擊事件的函數，正如前面提到的，每次單擊按鈕時它都會更新 favicon 狀態，並在三秒後還原為空字符串。同時，它還會在控制台上顯示 favicon 狀態的值。
現在，我們需要在應用程式中添加一個按鈕，並使其觸發我們剛剛創建的處理函數。簡單地複製以下代碼，以便更容易理解，然後將其粘貼到組件中：
<p>
<button onClick={handleClick} style={{ color: "white", backgroundColor: "blue", padding: "10px", borderRadius: "5px", cursor: "pointer" }}>
Smash That Like Button
</button>
</p>
現在，在我們的應用程式中，我們已經有了預設的網站圖示狀態，也就是空字符串。如果我們單擊「Smash That Like Button」按鈕，我們可以看到 favicon 狀態已更新為 'favorite'，同時在瀏覽器的圖示選項卡中，我們的圖示也已更新。如果我們等待三秒鍾，favicon 狀態將恢復為空字符串，並將圖示還原為默認值。
注意，因為我們的圖示是使用 React 組件管理的，所以我們可以根據需要進行任何動態更新。就像 Gmail 中未讀計數或其他任何指標的圖示一樣，這些指標可以幫助顯示對訪問者有用的數據。
9. 動態更新網站圖示的應用案例
所以，您喜歡用戶可以在您的網站上進行什麼動態更新？您有看到過一些在 Web 上進行動態更新圖示的很酷的案例嗎？在下面的評論中讓我知道吧！
如果您想學習更多有關如何在 Next.js 中實現更多令人驚嘆的功能的信息，請查看我的 Next.js 播放清單，其中包含許多教程和示例，幫助您學習如何使用 Next.js 构建強大的 Web 應用程式。如果您喜歡本教學影片，請點擊讚並訂閱以獲取未來的更新。
感謝觀看，下次再見！
10. 總結
在本教學中，我們學習了如何在 Next.js 中添加自訂網站圖示。我們首先瞭解了什麼是網站圖示，以及它們在瀏覽器中的作用。接著，我們使用 favicon.ico 文件和 head 組件添加了一個基本的圖示。然後，我們學習了如何在全域範圍內添加自訂的網站圖示，以及如何在特定的頁面上使用不同的圖示。最後，我們學習了如何使用 React 狀態並根據用戶互動動態更新網站圖示。
希望本教學對您有所幫助，如果您喜歡本教學，請務必給予讚和訂閱。謝謝觀看！
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
