實(shí)戰(zhàn)開發(fā)和上線一個(gè)極客范兒的瀏覽器主頁，原來如此簡單！

大家好我是魚皮，前段時(shí)間上線了一個(gè)程序員必備的瀏覽器主頁，得到了很多同學(xué)的好評。

地址：https://home.code-nav.cn/

其實(shí)項(xiàng)目本身不需要復(fù)雜的技術(shù)，相反，僅需要一點(diǎn)點(diǎn)前端基礎(chǔ)就可以完成。

下面給大家分享項(xiàng)目的完整制作過程和實(shí)現(xiàn)原理，最后教大家 一鍵上線自己的項(xiàng)目，快來動(dòng)手 DIY 你的瀏覽器主頁吧！

準(zhǔn)備工作

1. 需求分析

在開發(fā)一個(gè)項(xiàng)目之前，要明確自己的目標(biāo)。

我要做的很簡單，就是一個(gè)精簡的瀏覽器主頁。雖然火狐、Chrome 的默認(rèn)標(biāo)簽頁和一些插件主頁也都不錯(cuò)，但是多少都有一些限制，比如不支持切換壁紙、無法自定義快捷鏈接等。

之前我是 KIM 主頁的鐵桿粉絲，但整個(gè)主頁上的默認(rèn)鏈接我?guī)缀醵加貌坏?。作為一名?chuàng)作者，我更希望自己的主頁是各種創(chuàng)作平臺，比如 CSDN、?？?、GitHub 等。雖然可以登錄 KIM 主頁來修改快捷鏈接，但有什么能比自己定制一個(gè)主頁更靈活呢？況且本身并不需要很大的工作量。

那么要給主頁添加哪些功能呢？首先最重要的肯定是 搜索、然后是快捷鏈接，其他的功能都是錦上添花。

2. 產(chǎn)品設(shè)計(jì)

確認(rèn)目標(biāo)和需求之后，要設(shè)計(jì)主頁的頁面布局，由于我是一名審美和設(shè)計(jì)能力低下的程序員，自己做的頁面一直被說丑，因此我的整個(gè)設(shè)計(jì)參考了 KIM 主頁，非常喜愛和佩服 KIM 主頁的設(shè)計(jì)。

其實(shí)自己做項(xiàng)目、或者在企業(yè)中做項(xiàng)目，也是一樣的道理，先參考現(xiàn)有的項(xiàng)目和資源，學(xué)習(xí)他們優(yōu)秀的地方，以此為基礎(chǔ)進(jìn)行改進(jìn)。

3. 技術(shù)選型

在確認(rèn)好需求和產(chǎn)品設(shè)計(jì)后，我們需要根據(jù)項(xiàng)目應(yīng)有的功能和界面設(shè)計(jì)稿來進(jìn)行技術(shù)選型，即選擇使用哪種編程語言、框架、腳手架、甚至精確到類庫。好的技術(shù)選型能夠極大地提升開發(fā)效率。

比如要做一個(gè)瀏覽器主頁，本身是一個(gè)很小的前端項(xiàng)目，因此不需要重型（文件較大）的框架，可以直接選擇原生的 HTML + CSS + JavaScript 三件套，搭配 jQuery 庫節(jié)省代碼量。也可以選擇主流的前端框架，比如輕量的 Vue、React，搭配一個(gè)好看優(yōu)雅的組件庫，從而可以靈活地實(shí)現(xiàn)頁面交互、省去自己開發(fā)組件的麻煩。

此處我選擇主流前端框架 React，因?yàn)樽罱恢痹谟帽容^熟練，搭配 React Static 靜態(tài)站點(diǎn)開發(fā)框架。組件庫上，我選擇了螞蟻金服的 Ant Design，比較流行，而且組件支持多端自適應(yīng)，能夠讓主頁在移動(dòng)端下也能得到不錯(cuò)的瀏覽效果，提供的導(dǎo)航菜單、抽屜、按鈕等組件也能夠滿足我的要求。

除了開發(fā)技術(shù)外，還要明確自己的項(xiàng)目采用何種方式部署上線。由于網(wǎng)站幾乎沒有動(dòng)態(tài)加載的數(shù)據(jù)，可以選用一些靜態(tài)網(wǎng)站托管服務(wù)，后面會(huì)講。

4. 搭建 Demo

確認(rèn)好使用的技術(shù)后，需要先在本地成功運(yùn)行一個(gè)最簡單的 Demo 項(xiàng)目，可以試著添加一個(gè)按鈕組件，看看組件庫是否引入成功。然后執(zhí)行一次打包構(gòu)建，確認(rèn)環(huán)境和依賴沒有任何問題，再進(jìn)行開發(fā)。

萬事就緒，投入開發(fā)！

開發(fā)實(shí)現(xiàn)

此處不可能把所有源代碼都粘貼到文章中，也沒有意義，只會(huì)講解開發(fā)瀏覽器主頁的一些關(guān)鍵實(shí)現(xiàn)思路。

1. 基礎(chǔ)界面

開發(fā)任何前端項(xiàng)目，都要先開發(fā)一個(gè)基礎(chǔ)界面，從整體到局部，將頁面由上至下進(jìn)行結(jié)構(gòu)拆解。

除了按鈕組使用固定定位放在右下角外，其他的框框從上至下排列，再加上一些間距即可。

2. 萬能搜索

萬能搜索即用戶僅進(jìn)行一次輸入，可以從多個(gè)不同的搜索引擎獲取信息。

實(shí)現(xiàn)原理非常簡單，使用 HTML 的 <iframe> 標(biāo)簽，直接將整個(gè)百度或其他搜索引擎嵌入到頁面中，通過定義 current 變量來決定當(dāng)前使用哪個(gè)搜索引擎、通過 searchText 變量來確定搜索內(nèi)容，然后拼接 <iframe> 的地址即可，示例代碼如下：

{
??current?===?"baidu"?&&
??<iframe?src={`https://www.baidu.com/s?wd=${searchText}`}
??????????style={{border:?'none',?height:?'100vh',?position:?'fixed',?zIndex:?1}}
????????/>
}
{
??current?===?"bing"?&&
??<iframe?src={`https://cn.bing.com/search?q=${searchText}`}
??????????style={{border:?'none',?height:?'100vh',?position:?'fixed',?zIndex:?1}}
????????/>
}


3. 壁紙切換

完成搜索功能后，我試著美化整個(gè)主頁，首先是實(shí)現(xiàn)切換壁紙功能。針對不同類型的壁紙選擇不同的實(shí)現(xiàn)方式。

靜態(tài)壁紙

靜態(tài)壁紙即一張圖片，直接使用 <img/> 標(biāo)簽，設(shè)置絕對定位和全屏顯示即可。

動(dòng)態(tài)壁紙

動(dòng)態(tài)壁紙可不是指動(dòng)態(tài)圖片（GIF 等），而是使用 HTML5 Canvas 畫布等技術(shù)實(shí)現(xiàn)的交互式網(wǎng)頁。每一個(gè)動(dòng)態(tài)壁紙都是一個(gè)獨(dú)立小項(xiàng)目，包含 HTML、CSS、JS 等文件，可以直接在瀏覽器中運(yùn)行。

直接采用 <iframe> 標(biāo)簽引入這些動(dòng)態(tài)壁紙頁面就行啦！

隨機(jī)壁紙

最后，為了滿足大家的特殊需求，還做了隨機(jī)壁紙功能，有幾種分類，每點(diǎn)一下，就會(huì)隨機(jī)生成一個(gè)新壁紙！

實(shí)現(xiàn)原理依然很簡單，使用了免費(fèi)的搏天 API 隨機(jī)壁紙接口，完全不用自己爬取圖片再去做隨機(jī)！

為了解決瀏覽器跨域的限制，還使用了 JsonBird 免費(fèi)的請求代理，直接將請求隨機(jī)圖片的地址作為參數(shù)拼接在 JsonBird 地址后就行了！代碼如下：

await?axios.get(`https://bird.ioliu.cn/v1/?url=${cover.api}`)


4. 主題切換

最后，為了讓大家更好地欣賞壁紙（好像跑題了），支持了白底和透明兩種主題，可以動(dòng)態(tài)切換。

這里我定義了兩個(gè) CSS 文件，分別作為白底和透明主題的樣式，切換為透明主題時(shí)，只需給最外層的 HTML 標(biāo)簽增加一個(gè)類名即可，代碼如下：

/*?白底?CSS?文件?*/
.search-wrapper?{
?background:?white;?/*?白色背景?*/
}
??
/*?透明模式?CSS?文件?*/
.ghost?.search-wrapper?{
??background:?transparent;?/*?透明背景?*/
}


最外層標(biāo)簽，根據(jù)透明模式是否開啟來確定類名：

<!--?如果透明模式開啟，則添加?ghost?類名?-->
<div?className={ghostClose???''?:?'?ghost'}>
</div>


當(dāng)然，多主題有很多種實(shí)現(xiàn)方式和插件，這并不是最優(yōu)雅的，但比較簡單易懂。

部署上線

項(xiàng)目做完后，使用框架自帶的命令將所有文件構(gòu)建成一個(gè)目錄包?？梢灾苯与p擊 index.html 文件，或使用 serve 在本地運(yùn)行網(wǎng)頁，瀏覽效果。

如果想要發(fā)布網(wǎng)站，供其他人輸入網(wǎng)址在線訪問，也是非常簡單的?？梢允褂?Vercel 工具，用一行命令發(fā)布。

而如果想要讓網(wǎng)站獲得更快的訪問速度， 更推薦的方式是使用騰訊云靜態(tài)網(wǎng)站托管（或者云托管）服務(wù)，依然是一行命令，甚至是點(diǎn)擊 “一鍵部署按鈕”，就可以將網(wǎng)站上線啦！提供免費(fèi)空間，完全足夠?qū)W習(xí)和小項(xiàng)目使用！

最后

整個(gè)編程主頁就是這樣，以后會(huì)支持更多的主題、更多的搜索引擎，同時(shí)繼續(xù)改進(jìn)頁面和交互效果，給大家一個(gè)接近完美的主頁使用體驗(yàn)。

所有的代碼均已開源，已獲得近 200 個(gè) star，登上今日 GitHub 趨勢榜！

最后，我參與了騰訊云開發(fā)競賽，希望大家可以幫魚皮投投票 ??

倒數(shù)第六個(gè)『 編程主頁 』作者魚皮

歡迎大家試著將我開源的編程主頁 一鍵部署，也能幫我增加比賽分?jǐn)?shù)，GitHub 地址。