我发布了一个免费无广告的导航网页
地址 -> 永久地址
dh.1023.blog
前几天我发现很多导航网站要不就是被各种垃圾信息流覆盖，要不就是本身属于盈利网站，要做各种网站内容的区分，用户的自由调配其实很低，而且还随时可能导致被植入各种病毒的可能，导致其实很多时候体验起来并不是很好。
于是我开发一个永久免费无广告的导航页面，
每天打开浏览器，映入眼帘的不是满屏的广告推荐，就是单调乏味的默认空白页。作为一名开发者/极客，我一直想拥有一个完全属于自己、既好看又实用的浏览器起始页（Dashboard）。
最近，我利用业余时间，使用纯原生 HTML/CSS/JS 开发了一款“个人全能仪表盘”。它不仅采用了流行的毛玻璃拟态风格（Glassmorphism），还接入了多个免费实用的 API，让你在一个页面就能掌控天气、热点新闻，甚至顺手背几个单词。
今天把源码和实现思路分享给大家，拿走即用！
✨ 核心功能亮点
先看效果图（建议直接在线体验）：
- 🎨 沉浸式 UI 与随机壁纸
毛玻璃风格：页面组件采用半透明磨砂质感，配合深色遮罩，无论背景图多花哨，文字依然清晰可见。
一键换肤：右下角设有悬浮按钮，点击即可随机切换高清壁纸（调用第三方壁纸 API）。
智能记忆：系统会自动将你喜欢的壁纸缓存在本地，刷新页面或下次打开浏览器，依然是你上次选中的那张图。 - 🔥 全网热榜聚合
摸鱼神器：集成了 B站、知乎、微博、抖音、36氪、IT之家 等多个主流平台的热榜接口。
实时更新：不用打开各个 APP，在一个页面就能快速浏览全网正在发生的大事。
视觉分层：前三名采用金、银、铜色高亮显示，热度一目了然。 - ☁️ 自动定位与实时天气
无感定位：通过 IP 自动识别你的地理位置（精确到城市）。
精准天气：根据经纬度实时拉取 Open-Meteo 的气象数据，显示当前温度和天气状况，无需繁琐配置。 - 📚 英语查词助手
学习不间断：在右侧集成了英语单词查询功能。
详情展示：支持英/美双语发音（点击喇叭播放）、词性、常用短语以及双语例句展示。
响应式设计：手机端也能完美适配。 - 🚀 自定义快捷导航
本地存储：支持添加常用的网站链接，数据存储在浏览器的 localStorage 中，不会上传服务器，隐私绝对安全。
自动图标：输入网址后，会自动抓取目标网站的 Favicon 图标，省去了找图的麻烦。
🛠️ 技术实现与 API 说明
这个项目没有使用 Vue 或 React 等重型框架，而是回归本真，使用了原生的 Web 技术，这样打开速度极快，且没有任何部署门槛。
核心技术栈
HTML5 / CSS3 (Flexbox + Grid 布局)
JavaScript (ES6+) (Fetch API, Async/Await)
用到的免费 API（致谢）
为了实现功能，我调用了以下优秀的免费接口：
IP 定位：uapis.cn
天气数据：Open-Meteo
全网热榜：pearktrue.cn
英语词典：v2.xxapi.cn
随机壁纸：v2.xxapi.cn
图标抓取：Google Favicon Service
1 条评论
太好了，太好了