共计 3008 个字符，预计需要花费 8 分钟才能阅读完成。
实战开发和上线一个极客范儿的浏览器主页，原来如此简略！
大家好我是鱼皮，前段时间上线了一个程序员必备的浏览器主页，失去了很多同学的好评。
地址：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 地址。
