整体效果
- 线上体验地址:jobleap4u.com

安装方法
- 打开命令行或终端,执行下面命令,将代码仓库克隆到本地:
bash
git clone --depth 1 https://github.com/XiaomingX/jobleap4u
- 进入项目文件夹:
bash
cd jobleap4u
- 启动开发服务器(需要提前安装 Vercel CLI 工具):
bash
vercel dev
- 启动成功后,打开浏览器访问:
text
http://localhost:3000
即可看到本地运行的AI导航站页面。
线上使用方法
- 如果想直接部署到线上环境,可以在Vercel网站登录后,选择"导入Git仓库",然后选择本项目的GitHub地址,Vercel会自动帮你完成部署。完成后就有线上访问地址。
拓展与更新
- 在index.html之中,你可以参考模版,更新自己的模块,譬如补充下面代码之中的url地址、logo图、简介
ini
<div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://dribbble.com/', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://dribbble.com/">
<div class="xe-comment-entry">
<a class="xe-user-img">
<img data-src="../assets/images/logos/dribbble.png" class="lozad img-circle" width="40">
</a>
<div class="xe-comment">
<a href="#" class="xe-user-name overflowClip_1">
<strong>Dribbble</strong>
</a>
<p class="overflowClip_2">全球UI设计师作品分享平台。</p>
</div>
</div>
</div>
- 其中logo图(img),如果不方便自己抠图并存储在本地,也可以使用API直接获取:
- 即一个例子为:
ini
<div class="col-sm-3">
<div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://www.pinterest.com/', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://www.pinterest.com/">
<div class="xe-comment-entry">
<a class="xe-user-img">
<img data-src="https://icon.jobleap4u.com/api/fav/?url=pinterest.com" class="lozad img-circle" width="40">
</a>
<span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
<div class="xe-comment">
<a href="#" class="xe-user-name overflowClip_1">
<strong>Pinterest</strong>
</a>
<p class="overflowClip_2">全球美图收藏采集站</p>
</div>
</div>
</div>
</div>