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