本文首發(fā)于「效率工具指南」
文/彭宏豪，筆名/安哥拉
Hello 大家好退子，我是安哥岖妄。
之前寫過一篇使用 Notion 搭建個人網(wǎng)站的文章，介紹了 0 支出 Get 一個個人網(wǎng)站的方法寂祥，感興趣的朋友可以戳下方的鏈接：
《Notion免費(fèi)搭建個人網(wǎng)站荐虐，使用Notion又多了一個理由》
但當(dāng)時(shí)寫得比較匆忙，搭出來的個人網(wǎng)站存在一些小問題丸凭，后來也有一些網(wǎng)友看了我寫的文章福扬，加了微信來詢問這些小問題該如何解決。
說實(shí)話惜犀，最開始看到一些網(wǎng)友提出的問題铛碑，我也不知道如何解決，有些只能瞎猜或者靠「試」虽界，因?yàn)榇罱ňW(wǎng)站用到的代碼不是我寫的汽烦，而且我也不懂代碼，整個搭建過程也只是對其中的一些代碼進(jìn)行修改莉御，只見樹木撇吞，不見森林俗冻。
回到正題上來，今天的這篇文章牍颈，想寫一下用 Notion 搭建網(wǎng)站遇到的兩個小問題及我找到的解決方法迄薄，方法有用，但可能不是最優(yōu)煮岁。
01. 更改網(wǎng)站圖標(biāo)
搭建網(wǎng)站用到的代碼讥蔽，是來自 GitHub 上的一位開發(fā)者 transitive-bullshit，用了他的代碼之后画机，我們創(chuàng)建出來的網(wǎng)站冶伞，使用的圖標(biāo)依然還是原作者的，如下圖所示的瀏覽器標(biāo)簽頁名稱所帶的圖標(biāo)色罚。
那如何將這個圖標(biāo)更改為我們自己喜歡的圖片呢碰缔？
要回到我們在 GitHub 上創(chuàng)建的倉庫「nextjs-notion-starter-kit」，進(jìn)入存放網(wǎng)站圖標(biāo)的文件夾 ?? public戳护。
文件夾中存放的是網(wǎng)站圖標(biāo)和相關(guān)的配置文件金抡，下圖選中的圖像文件 png 和 ico，就是我們最終看到的網(wǎng)站圖標(biāo)腌且，這些圖像文件長得都一樣梗肝，區(qū)別在于圖標(biāo)的尺寸。
最直接的更換網(wǎng)站圖標(biāo)的方法铺董，就是上傳相同尺寸巫击、相同格式和相同文件名的圖片，替換掉現(xiàn)有的文件精续。
如果你覺得上傳 8 張圖片太麻煩坝锰，那么可以先打開下面的 mainfest.json 文件，修改配置文件的內(nèi)容重付，減少需要上傳的圖片顷级。
點(diǎn)擊配置文件右上角的編輯按鈕，進(jìn)入編輯模式确垫，下方的 icons 中的內(nèi)容弓颈，就是用來配置網(wǎng)站圖標(biāo)的內(nèi)容。你看到的內(nèi)容應(yīng)該和下圖的內(nèi)容是不一致的删掀，因?yàn)槲?strong>刪掉了部分配置信息翔冀，只留下了 3 張圖片，分別是 16x16披泪、32x32纤子、96x96 三種尺寸的 favicon 圖片。
這里你可以根據(jù)自己的需要，刪除部分不必要的配置信息控硼，減少所需要上傳的圖片數(shù)量跌捆。
編輯好配置文件后，滑動到頁面下方象颖，點(diǎn)擊綠色的 **Commit changes **按鈕，確認(rèn)（提交）剛作出的修改姆钉。
回到 public 文件夾说订，根據(jù)前面對配置文件作出的修改，我們要先刪除文件夾中已有的 3 張圖片潮瓶，再上傳我們自己喜歡的圖片陶冷，作為網(wǎng)站的圖標(biāo)。以其中一張圖片 favicon-16x16.png 為例毯辅，進(jìn)入圖片文件的詳情頁埂伦，點(diǎn)擊右側(cè)的垃圾桶圖標(biāo)，就可以刪除這張圖片思恐。
刪除圖片后沾谜，會回到 public 文件夾路徑下，點(diǎn)擊右上角的 Add file >> Upload files胀莹，從本地上傳圖片到 public 文件夾基跑，此時(shí)上傳的圖片文件名應(yīng)與前面刪除的文件一致，同為 favicon-16x16.png描焰。
前面演示了替換其中一個網(wǎng)站圖標(biāo)的過程媳否，剩下的兩個也是遵循類似的操作，這里就不贅述了荆秦。
3 個網(wǎng)站圖標(biāo)文件替換之后篱竭，在瀏覽器中打開 Notion 搭建的網(wǎng)站，就可以看到步绸，標(biāo)簽頁標(biāo)題中的圖標(biāo)（網(wǎng)站圖標(biāo)）就變成了自己喜歡的圖片掺逼。
02. 更改 GitHub 圖標(biāo)的鏈接
在搭建的網(wǎng)站右上角有一個 GitHub 圖標(biāo)，這個圖標(biāo)設(shè)置了超鏈接靡努，點(diǎn)擊圖標(biāo)坪圾，會跳轉(zhuǎn)到網(wǎng)站代碼原作者 transitive-bullshit 的 GitHub 倉庫。
那如果我們想把這個圖標(biāo)的超鏈接更改為自己的 GitHub 倉庫惑朦，應(yīng)該怎么操作呢兽泄？
同樣是回到網(wǎng)站的 GitHub 倉庫，打開文件夾 ?? components漾月，找到名為 GitHubShareButton.tsx 并打開病梢。
進(jìn)入文件詳情頁之后，點(diǎn)擊右上角的編輯按鈕，下方的 href 屬性的值蜓陌，就是點(diǎn)擊 GitHub 圖標(biāo)之后打開的網(wǎng)站觅彰，將這個網(wǎng)址更改為自己的 GitHub 倉庫，這樣當(dāng)你點(diǎn)擊網(wǎng)站右上角的 GitHub 圖標(biāo)钮热，就會跳轉(zhuǎn)到自己的 GitHub 倉庫填抬。
寫在最后
對我這種不懂代碼的半吊子來說，在別人寫好的代碼的基礎(chǔ)上修改代碼隧期，雖然可以比較快地搭建出網(wǎng)站飒责，但由于自己并沒有深入理解網(wǎng)站的邏輯或者代碼背后的含義，導(dǎo)致后期在自定義網(wǎng)站信息仆潮，甚至是擴(kuò)展網(wǎng)站的功能方面宏蛉，總是顯得束手束腳，要花費(fèi)比較多的心思或時(shí)間性置。
沒人和我一起來折騰拾并，感覺遇到的很多問題都很難，不少難題還被我選擇性地拋棄在了原地鹏浅，直到我下一次再遇見它嗅义。
以上就是本次想和你分享的內(nèi)容。
看完文章如果覺得對你有幫助的話篡石，別忘了點(diǎn)擊底部的「點(diǎn)贊/在看」鼓勵一下我芥喇，謝謝。
效率工具指南：分享推薦效率工具凰萨，好的產(chǎn)品值得被更多人知道继控。
