1.自己制作瀏覽器主頁

實戰(zhàn)開發(fā)和上線一個極客范兒的瀏覽器主頁，原來如此簡單！大家好我是魚皮，前段時間上線了一個程序員必備的瀏覽器主頁，得到了很多同學(xué)的好評編程導(dǎo)航 - 程序員必備主頁?home.code-nav.cn/

2.瀏覽器主頁制作

其實項目本身不需要復(fù)雜的技術(shù)，相反，僅需要一點點前端基礎(chǔ)就可以完成下面給大家分享項目的完整制作過程和實現(xiàn)原理，最后教大家 一鍵上線自己的速迅項目，快來動手 DIY 你的瀏覽器主頁吧！準(zhǔn)備工作1. 需求分析在開發(fā)一個項目之前，要明確自己的目標(biāo)。

3.瀏覽器怎么制作屬于自己的網(wǎng)站

我要做的很簡單，就是一個精簡的瀏覽器主頁雖然火狐、Chrome 的默認(rèn)標(biāo)簽頁和一些插件主頁也都不錯，但是多少都有一些限制，比如不支持切換壁紙、無法自定義快捷鏈接等之前我是 KIM 主頁的鐵桿粉絲，但整個主頁上的默認(rèn)鏈接我?guī)缀醵加貌坏健?/p>

4.做自己的瀏覽器

作為一名創(chuàng)作者，我更希望自己的主頁是各種創(chuàng)作平臺，比如 CSDN、?？?、GitHub 等雖然可以登錄 KIM 主頁來修改快捷鏈接，但有什么能比自己定制一個主頁更靈活呢？況且本身并不需要很大的工作量那么要給主頁添加哪速迅些功能呢？首先最重要的肯定是

5.如何自己做瀏覽器

搜索、然后是快捷鏈接，其他的功能都是錦上添花2. 產(chǎn)品設(shè)計確認(rèn)目標(biāo)和需求之后，要設(shè)計主頁的頁面布局，由于我是一名審美和設(shè)計能力低下的程序員，自己做的頁面一直被說丑，因此我的整個設(shè)計參考了 KIM 主頁，非常喜愛和佩服 KIM 主頁的設(shè)計。

6.如何做瀏覽器

其實自己做項目、或者在企業(yè)中做項目，也是一樣的道理，先參考現(xiàn)有的項目和資源，學(xué)習(xí)他們優(yōu)秀的地方，以此為基礎(chǔ)進行改進3. 技術(shù)選型在確認(rèn)好需求和產(chǎn)品設(shè)計后，我們需要根據(jù)項目應(yīng)有的功能和界面設(shè)計稿來進行技術(shù)選型，即選擇使用哪種編程語言、框架、腳手架、甚至精確到類庫。

7.瀏覽器怎么做自媒體

好的技術(shù)選型能速迅夠極大地提升開發(fā)效率比如要做一個瀏覽器主頁，本身是一個很小的前端項目，因此不需要重型（文件較大）的框架，可以直接選擇原生的 HTML + CSS + JavaScript 三件套，搭配 jQuery 庫節(jié)省代碼量。

8.怎么做瀏覽器小編

也可以選擇主流的前端框架，比如輕量的 Vue、React，搭配一個好看優(yōu)雅的組件庫，從而可以靈活地實現(xiàn)頁面交互、省去自己開發(fā)組件的麻煩此處我選擇主流前端框架 React，因為最近一直在用比較熟練，搭配 React Static 靜態(tài)站點開發(fā)框架。

9.怎么做一個自己的瀏覽器

組件庫上，我選擇了螞蟻金服的 Ant Design，比較流行，而且組件支持多端自適應(yīng)，能夠讓主速迅頁在移動端下也能得到不錯的瀏覽效果，提供的導(dǎo)航菜單、抽屜、按鈕等組件也能夠滿足我的要求

10.怎么自己制作瀏覽器主頁

除了開發(fā)技術(shù)外，還要明確自己的項目采用何種方式部署上線由于網(wǎng)站幾乎沒有動態(tài)加載的數(shù)據(jù)，可以選用一些靜態(tài)網(wǎng)站托管服務(wù)，后面會講4. 搭建 Demo確認(rèn)好使用的技術(shù)后，需要先在本地成功運行一個最簡單的 Demo 項目，可以試著添加一個按鈕組件，看看組件庫是否引入成功。

然后執(zhí)行一次打包構(gòu)建，確認(rèn)環(huán)境和依賴沒有任何問題，再進行開發(fā)

萬事就緒，投入開發(fā)！開發(fā)實現(xiàn)此處不可能把所有源代碼都粘貼到文章中，也沒有意義，只會講解開發(fā)瀏覽器主頁的一些關(guān)鍵實現(xiàn)思路1. 基礎(chǔ)界面開發(fā)任何前端項目，都要先開發(fā)一速迅個基礎(chǔ)界面，從整體到局部，將頁面由上至下進行結(jié)構(gòu)拆解。

除了按鈕組使用固定定位放在右下角外，其他的框框從上至下排列，再加上一些間距即可。2. 萬能搜索萬能搜索即用戶僅進行一次輸入，可以從多個不同的搜索引擎獲取信息。

實現(xiàn)原理非常簡單，使用 HTML 的 標(biāo)簽，直接將整個百度或其他搜索引擎嵌入到頁面中，通過定義 current 變量來決定當(dāng)前使用哪個搜索引擎、通過 searchText 變量來確定搜索內(nèi)容，然后拼接

的地址即可，示例代碼如下：{ current === "baidu" && } { current === "bing" 速迅&& }

3. 壁紙切換完成搜索功能后，我試著美化整個主頁，首先是實現(xiàn)切換壁紙功能。針對不同類型的壁紙選擇不同的實現(xiàn)方式。靜態(tài)壁紙靜態(tài)壁紙即一張圖片，直接使用 標(biāo)簽，設(shè)置絕對定位和全屏顯示即可。

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

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

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

實現(xiàn)原理依然很簡單，使用了免費的搏天 A速迅PI 隨機壁紙接口，完全不用自己爬取圖片再去做隨機！

為了解決瀏覽器跨域的限制，還使用了 JsonBird 免費的請求代理，直接將請求隨機圖片的地址作為參數(shù)拼接在 JsonBird 地址后就行了！代碼如下：await axios.get(`https://bird.ioliu.cn/v1/?url=${cover.api}`)

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

這里我定義了兩個 CSS 文件，分別作為白底和透明主題的樣式，切換為透明主題時，只需給最外層的 HTML 標(biāo)簽增加一個類名即可，代碼如下：/* 白底 CSS 文件 */ 速迅 .search-wrapper { background: white; /* 白色背景 */ } /* 透明模式 CSS 文件 */ .ghost .search-wrapper { background: transparent; /* 透明背景 */ }

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

當(dāng)然，多主題有很多種實現(xiàn)方式和插件，這并不是最優(yōu)雅的，但比較簡單易懂部署上線項目做完后，使用框架自帶的命令將所有文件構(gòu)建成一個目錄包可以直接雙擊 index.html 文件，或使用 se速迅rve 在本地運行網(wǎng)頁，瀏覽效果。

如果想要發(fā)布網(wǎng)站，供其他人輸入網(wǎng)址在線訪問，也是非常簡單的可以使用 Vercel 工具，用一行命令發(fā)布而如果想要讓網(wǎng)站獲得更快的訪問速度， 更推薦的方式是使用騰訊云靜態(tài)網(wǎng)站托管（或者云托管）服務(wù)，依然是一行命令，甚至是點擊 “一鍵部署按鈕”，就可以將網(wǎng)站上線啦！。

提供免費空間，完全足夠?qū)W習(xí)和小項目使用！

最后整個編程主頁就是這樣，以后會支持更多的主題、更多的搜索引擎，同時繼續(xù)改進頁面和交互效果，給大家一個接近完美的主頁使用體驗所有的代碼均已開源，已獲得近 200 個 star，登上今日 GitHub 趨勢榜！。

最后，我參與了騰訊云開發(fā)競賽，希望大家可以幫魚皮投投速迅票 ??倒數(shù)第六個『 編程主頁 』作者魚皮歡迎大家試著將我開源的編程主頁 一鍵部署，也能幫我增加比賽分?jǐn)?shù)，地址如下：