本文首發於「效率工具指南」
文/彭宏豪，筆名/安哥拉
Hello 大家好，我是安哥。
之前寫過一篇使用 Notion 搭建個人網站的文章，介紹了 0 支出 Get 一個個人網站的方法，感興趣的朋友可以戳下方的鏈接：
《Notion免費搭建個人網站，使用Notion又多了一個理由》
但當時寫得比較匆忙，搭出來的個人網站存在一些小問題，後來也有一些網友看了我寫的文章，加了微信來詢問這些小問題該如何解決。
說實話，最開始看到一些網友提出的問題，我也不知道如何解決，有些只能瞎猜或者靠「試」，因爲搭建網站用到的代碼不是我寫的，而且我也不懂代碼，整個搭建過程也只是對其中的一些代碼進行修改，只見樹木，不見森林。
回到正題上來，今天的這篇文章，想寫一下用 Notion 搭建網站遇到的兩個小問題及我找到的解決方法，方法有用，但可能不是最優。
01. 更改網站圖標
搭建網站用到的代碼，是來自 GitHub 上的一位開發者 transitive-bullshit，用了他的代碼之後，我們創建出來的網站，使用的圖標依然還是原作者的，如下圖所示的瀏覽器標籤頁名稱所帶的圖標。
那如何將這個圖標更改爲我們自己喜歡的圖片呢？
要回到我們在 GitHub 上創建的倉庫「nextjs-notion-starter-kit」，進入存放網站圖標的文件夾 📁 public。
文件夾中存放的是網站圖標和相關的配置文件，下圖選中的圖像文件 png 和 ico，就是我們最終看到的網站圖標，這些圖像文件長得都一樣，區別在於圖標的尺寸。
最直接的更換網站圖標的方法，就是上傳相同尺寸、相同格式和相同文件名的圖片，替換掉現有的文件。
如果你覺得上傳 8 張圖片太麻煩，那麼可以先打開下面的 mainfest.json 文件，修改配置文件的內容，減少需要上傳的圖片。
點擊配置文件右上角的編輯按鈕，進入編輯模式，下方的 icons 中的內容，就是用來配置網站圖標的內容。你看到的內容應該和下圖的內容是不一致的，因爲我刪掉了部分配置信息，只留下了 3 張圖片，分別是 16x16、32x32、96x96 三種尺寸的 favicon 圖片。
這裏你可以根據自己的需要，刪除部分不必要的配置信息，減少所需要上傳的圖片數量。
編輯好配置文件後，滑動到頁面下方，點擊綠色的 **Commit changes **按鈕，確認（提交）剛作出的修改。
回到 public 文件夾，根據前面對配置文件作出的修改，我們要先刪除文件夾中已有的 3 張圖片，再上傳我們自己喜歡的圖片，作爲網站的圖標。以其中一張圖片 favicon-16x16.png 爲例，進入圖片文件的詳情頁，點擊右側的垃圾桶圖標，就可以刪除這張圖片。
刪除圖片後，會回到 public 文件夾路徑下，點擊右上角的 Add file >> Upload files，從本地上傳圖片到 public 文件夾，此時上傳的圖片文件名應與前面刪除的文件一致，同爲 favicon-16x16.png。
前面演示了替換其中一個網站圖標的過程，剩下的兩個也是遵循類似的操作，這裏就不贅述了。
3 個網站圖標文件替換之後，在瀏覽器中打開 Notion 搭建的網站，就可以看到，標籤頁標題中的圖標（網站圖標）就變成了自己喜歡的圖片。
02. 更改 GitHub 圖標的鏈接
在搭建的網站右上角有一個 GitHub 圖標，這個圖標設置了超鏈接，點擊圖標，會跳轉到網站代碼原作者 transitive-bullshit 的 GitHub 倉庫。
那如果我們想把這個圖標的超鏈接更改爲自己的 GitHub 倉庫，應該怎麼操作呢？
同樣是回到網站的 GitHub 倉庫，打開文件夾 📁 components，找到名爲 GitHubShareButton.tsx 並打開。
進入文件詳情頁之後，點擊右上角的編輯按鈕，下方的 href 屬性的值，就是點擊 GitHub 圖標之後打開的網站，將這個網址更改爲自己的 GitHub 倉庫，這樣當你點擊網站右上角的 GitHub 圖標，就會跳轉到自己的 GitHub 倉庫。
寫在最後
對我這種不懂代碼的半吊子來說，在別人寫好的代碼的基礎上修改代碼，雖然可以比較快地搭建出網站，但由於自己並沒有深入理解網站的邏輯或者代碼背後的含義，導致後期在自定義網站信息，甚至是擴展網站的功能方面，總是顯得束手束腳，要花費比較多的心思或時間。
沒人和我一起來折騰，感覺遇到的很多問題都很難，不少難題還被我選擇性地拋棄在了原地，直到我下一次再遇見它。
以上就是本次想和你分享的內容。
看完文章如果覺得對你有幫助的話，別忘了點擊底部的「點贊/在看」鼓勵一下我，謝謝。
效率工具指南：分享推薦效率工具，好的產品值得被更多人知道。