奇思妙想，動手 DIY 你的瀏覽器主頁

實戰開發和上線一個極客範兒的瀏覽器主頁，原來如此簡單！

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

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

其實項目本身不需要複雜的技術，相反，僅需要一點點前端基礎就可以完成。

下面給大家分享項目的完整製作過程和實現原理，最後教大家 一鍵上線自己的項目，快來動手 DIY 你的瀏覽器主頁吧！

準備工作

1. 需求分析

在開發一個項目之前，要明確自己的目標。

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

之前我是 KIM 主頁的鐵桿粉絲，但整個主頁上的默認鏈接我幾乎都用不到。作爲一名創作者，我更希望自己的主頁是各種創作平臺，比如 CSDN、牛客、GitHub 等。雖然可以登錄 KIM 主頁來修改快捷鏈接，但有什麼能比自己定製一個主頁更靈活呢？況且本身並不需要很大的工作量。

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

2. 產品設計

確認目標和需求之後，要設計主頁的頁面佈局，由於我是一名審美和設計能力低下的程序員，自己做的頁面一直被說醜，因此我的整個設計參考了 KIM 主頁，非常喜愛和佩服 KIM 主頁的設計。

其實自己做項目、或者在企業中做項目，也是一樣的道理，先參考現有的項目和資源，學習他們優秀的地方，以此爲基礎進行改進。

3. 技術選型

在確認好需求和產品設計後，我們需要根據項目應有的功能和界面設計稿來進行技術選型，即選擇使用哪種編程語言、框架、腳手架、甚至精確到類庫。好的技術選型能夠極大地提升開發效率。

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

此處我選擇主流前端框架 React，因爲最近一直在用比較熟練，搭配 React Static 靜態站點開發框架。組件庫上，我選擇了螞蟻金服的 Ant Design，比較流行，而且組件支持多端自適應，能夠讓主頁在移動端下也能得到不錯的瀏覽效果，提供的導航菜單、抽屜、按鈕等組件也能夠滿足我的要求。

除了開發技術外，還要明確自己的項目採用何種方式部署上線。由於網站幾乎沒有動態加載的數據，可以選用一些靜態網站託管服務，後面會講。

4. 搭建 Demo

確認好使用的技術後，需要先在本地成功運行一個最簡單的 Demo 項目，可以試着添加一個按鈕組件，看看組件庫是否引入成功。然後執行一次打包構建，確認環境和依賴沒有任何問題，再進行開發。

萬事就緒，投入開發！

開發實現

此處不可能把所有源代碼都粘貼到文章中，也沒有意義，只會講解開發瀏覽器主頁的一些關鍵實現思路。

1. 基礎界面

開發任何前端項目，都要先開發一個基礎界面，從整體到局部，將頁面由上至下進行結構拆解。

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

2. 萬能搜索

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

實現原理非常簡單，使用 HTML 的 <iframe> 標籤，直接將整個百度或其他搜索引擎嵌入到頁面中，通過定義 current 變量來決定當前使用哪個搜索引擎、通過 searchText 變量來確定搜索內容，然後拼接 <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. 壁紙切換

完成搜索功能後，我試着美化整個主頁，首先是實現切換壁紙功能。針對不同類型的壁紙選擇不同的實現方式。

靜態壁紙

靜態壁紙即一張圖片，直接使用 <img/> 標籤，設置絕對定位和全屏顯示即可。

動態壁紙

動態壁紙可不是指動態圖片（GIF 等），而是使用 HTML5 Canvas 畫布等技術實現的交互式網頁。每一個動態壁紙都是一個獨立小項目，包含 HTML、CSS、JS 等文件，可以直接在瀏覽器中運行。

直接採用 <iframe> 標籤引入這些動態壁紙頁面就行啦！

隨機壁紙

最後，爲了滿足大家的特殊需求，還做了隨機壁紙功能，有幾種分類，每點一下，就會隨機生成一個新壁紙！

實現原理依然很簡單，使用了免費的搏天 API 隨機壁紙接口，完全不用自己爬取圖片再去做隨機！

爲了解決瀏覽器跨域的限制，還使用了 JsonBird 免費的請求代理，直接將請求隨機圖片的地址作爲參數拼接在 JsonBird 地址後就行了！代碼如下：

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

4. 主題切換

最後，爲了讓大家更好地欣賞壁紙（好像跑題了），支持了白底和透明兩種主題，可以動態切換。

這裏我定義了兩個 CSS 文件，分別作爲白底和透明主題的樣式，切換爲透明主題時，只需給最外層的 HTML 標籤增加一個類名即可，代碼如下：

/* 白底 CSS 文件 */
.search-wrapper {
    background: white; /* 白色背景 */
}

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

最外層標籤，根據透明模式是否開啓來確定類名：

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

當然，多主題有很多種實現方式和插件，這並不是最優雅的，但比較簡單易懂。

部署上線

項目做完後，使用框架自帶的命令將所有文件構建成一個目錄包。可以直接雙擊 index.html 文件，或使用 serve 在本地運行網頁，瀏覽效果。

如果想要發佈網站，供其他人輸入網址在線訪問，也是非常簡單的。可以使用 Vercel 工具，用一行命令發佈。

而如果想要讓網站獲得更快的訪問速度， 更推薦的方式是使用騰訊雲靜態網站託管（或者雲託管）服務，依然是一行命令，甚至是點擊 “一鍵部署按鈕”，就可以將網站上線啦！提供免費空間，完全足夠學習和小項目使用！

最後

整個編程主頁就是這樣，以後會支持更多的主題、更多的搜索引擎，同時繼續改進頁面和交互效果，給大家一個接近完美的主頁使用體驗。

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

最後，我參與了騰訊雲開發競賽，希望大家可以幫魚皮投投票 ❤️

倒數第六個『 編程主頁 』作者魚皮

歡迎大家試着將我開源的編程主頁 一鍵部署，也能幫我增加比賽分數，GitHub 地址。