奇思妙想，動手 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 地址。