全网热点 · 实时聚合 —— 一个纯静态、零后端、零构建的多平台热榜聚合页。
实时聚合 微博、知乎、百度、B 站、GitHub、Hacker News、Product Hunt 等 28 个平台的热榜，按「综合热搜 / 科技开发 / 海外视野 / 新闻资讯 / 影音娱乐」五大分类展示，默认每 5 分钟自动刷新。
项目由原生 HTML、CSS 和 JavaScript 编写，没有后端、数据库与构建步骤。数据在浏览器端直接读取第三方公开接口或公开页面，页面本身不保存榜单内容。
- 28 个榜单 · 5 大分类：覆盖综合、科技、海外、新闻、娱乐，支持页签一键筛选。
- 官方图标：本地存放各平台官方图标；图标缺失或加载失败时，自动回退为品牌色字符徽标。
- 实时滚动播报：顶部跑马灯汇聚各榜头条，悬停暂停。
- 自动与手动刷新：每 5 分钟自动刷新并显示倒计时，支持全局刷新和单榜刷新；切回标签页时若数据已过期会自动补刷。
- 全局搜索：跨全部榜单过滤标题关键词，显示命中总数，按 / 聚焦搜索框，搜索框聚焦时按 Esc 清空。
- 单卡展开：每张卡片默认展示 10 条，超出后可在卡片内单独展开或收起；搜索时会显示匹配条数，各卡片的展开状态互不影响。
- 深色 / 浅色主题：首次访问跟随系统偏好，可手动切换并记忆到
localStorage；内联脚本预渲染，避免刷新时闪烁。 - 免责声明弹窗：页脚「免责声明」按钮打开原生
<dialog>信息框，支持 Esc、点击遮罩、关闭按钮和「我知道了」关闭；打开时锁定页面滚动，关闭后焦点回到触发按钮。 - 响应式布局：960 / 860 / 560 三个断点，适配桌面、平板和手机，支持移动端安全区。
- 阅读细节：骨架屏、滚动浮现、加载失败重试、离线与恢复联网提示、回到顶部 / 底部悬浮按钮。
- 站点状态：页脚显示站点运行时长和本次页面加载耗时。
- 纯静态：原生 HTML / CSS / JavaScript，无框架、无构建步骤、无后端依赖。
hotboard/
├── index.html # 页面结构、主题预渲染脚本、免责声明弹窗
├── hot.css # 主题变量、布局、卡片、弹窗与响应式样式
├── hot.js # 数据抓取、渲染、搜索、刷新与页面交互
├── icons/ # 28 个平台的官方图标（PNG / SVG / JPG / ICO）
└── README.md # 项目说明
index.html通过相对路径引用hot.css、hot.js与icons/，部署时请保持目录结构不变。
| 分类 | 平台 |
|---|---|
| 综合热搜 | 微博热搜、知乎热榜、百度热点、头条热榜、微信热文、什么值得买、百度贴吧 |
| 科技开发 | GitHub 趋势、掘金、少数派、IT之家、36氪、CSDN、站酷 |
| 海外视野 | Product Hunt、App Store、Hacker News、dev.to |
| 新闻资讯 | 腾讯新闻·热问、新浪财经、第一财经、雪球 |
| 影音娱乐 | 哔哩哔哩、抖音热点、豆瓣电影、虎扑步行街、微信读书、懂球帝 |
| 来源 | 用途 | 说明 |
|---|---|---|
| Codelife 开放接口 | 主源 | 提供绝大多数境内榜单，含热度值，CORS 开放 |
| 豆瓣电影 | 豆瓣源 | 经 Redocly CORS 代理 读取豆瓣官方「新片榜」，失败时回退到官方「热门」JSON 接口 |
| HN Algolia API | 海外源 | Hacker News 首页榜单，热度取 points |
| dev.to API | 海外源 | dev.to 近 7 天热门文章，热度取 reactions |
| orz.ai DailyNews | 备源 | 部分榜单保留的降级接口，服务当前不可用 |
- 所有请求均由浏览器直接发起，项目不存储、不转发、不商用榜单内容。
- 豆瓣官方页面未开放 CORS，因此通过 Redocly 公共代理读取；豆瓣榜单展示评分，不展示热度值。
- Product Hunt、App Store、懂球帝等榜单不显示热度值。
- Codelife 请求失败时，配置了
orz字段的榜单会尝试 orz.ai 备源；两者均不可用时，卡片显示失败提示和「重新加载」按钮。 - 第三方接口与公共 CORS 代理可能限流、改版或短时不可用，属于外部依赖限制；重新加载通常可以恢复。
保持 index.html、hot.css、hot.js 和 icons/ 目录的相对位置，双击 index.html 即可预览。部分浏览器对本地文件发起的跨域请求限制较多，建议使用本地静态服务器。
# 在项目目录下执行任一命令
python -m http.server 8080
# 或
npx serve .浏览器访问 http://localhost:8080/。
GitHub Pages
- 将仓库推送到 GitHub。
- 进入仓库 Settings → Pages。
- Source 选择 Deploy from a branch，分支选择
main，目录选择/ (root)，保存。 - 部署完成后访问
https://<用户名>.github.io/<仓库名>/。
也可直接部署到 Vercel、Netlify、Cloudflare Pages 等静态托管平台，无需配置构建命令，发布目录为项目根目录。
主要配置集中在 hot.js 顶部。
编辑 SOURCES 数组添加或调整榜单：
{
id: 'weibo',
cat: 'hot',
name: '微博热搜',
char: '微',
color: '#e6162d',
sub: '随时随地发现新鲜事',
cid: 'KqndgxeLl9',
home: 'https://s.weibo.com/top/summary'
}| 字段 | 必填 | 说明 |
|---|---|---|
id |
是 | 唯一标识，同时对应 ICONS 中的图标键 |
cat |
是 | 所属分类 ID，需在 CATS 中定义 |
name |
是 | 榜单名称 |
char |
是 | 图标加载失败时显示的字符徽标 |
color |
是 | 品牌色，用于徽标与图标底色 |
sub |
是 | 卡片副标题 |
cid |
二选一 | Codelife 榜单 ID，走主源时填写 |
api |
二选一 | 自定义数据源标识，当前支持 hn、devto、douban |
orz |
否 | orz.ai 备源平台名，用于主源失败时降级 |
nohot |
否 | 为 true 时不展示热度值 |
home |
是 | 平台官方热榜地址，点击卡片标题时跳转 |
每个榜单需要提供 cid 或 api 之一。新增自定义数据源时，还需在 loadSource() 中补充对应分支。
将图标文件放入 icons/，并在 ICONS 映射中登记：
const ICONS = {
weibo: 'weibo.svg',
// ...
};图标加载失败时页面会自动切换到字符徽标，不影响榜单数据展示。
- 分类：在
CATS中追加{ id, name, en }，页签、分类标题和榜单数量会自动生成。 - 自动刷新间隔：修改
REFRESH_MS，默认5 * 60 * 1000（5 分钟）。 - 默认展示条数：修改
SHOW，默认10。 - 运行时长起始时间：修改
SITE_BIRTH，默认2026-07-20。 - 接口地址：
API_CODELIFE、API_ORZ、API_HN、API_DEVTO、API_DOUBAN等常量集中在hot.js顶部。
- 搜索：仅匹配已加载榜单的标题文本；搜索时卡片会过滤掉不匹配条目，无命中结果的卡片变暗。
- 搜索与折叠：折叠卡片在搜索状态下最多展示前 10 条命中，按钮显示「展开全部（匹配 N 条）」；展开后展示该卡片的全部命中。清除搜索后，各卡片恢复原有展开 / 收起状态。
- 展开：普通状态下按钮显示「展开全部（共 N 条）」，展开后变为「收起榜单」；卡片按自身内容高度排列，展开一张不会拉伸同排其它卡片。
- 刷新：顶部刷新按钮刷新全部榜单；每张卡片右上角按钮仅刷新当前榜单。
- 主题：右上角按钮切换深浅主题；首次访问根据系统偏好初始化。
- 免责声明：页脚按钮打开弹窗，支持 Esc、遮罩点击、右上角关闭按钮及「我知道了」四种关闭方式。
- 技术栈：HTML5 / CSS3 / JavaScript（ES2020+），无第三方运行时依赖。
- 数据请求：
fetch+AbortController超时控制；豆瓣页面通过DOMParser解析。 - 渲染：模板字符串构建卡片，所有远程文本经 HTML 转义后输出；骨架屏占位，
IntersectionObserver实现滚动浮现。 - 主题系统：CSS 自定义属性 +
data-theme，<head>内联脚本在样式加载前确定主题。 - 性能统计：Navigation Timing API 计算本次加载耗时；运行时长按
SITE_BIRTH实时计算。 - 可访问性：语义化标签、
aria-label/aria-live、键盘焦点样式，并在prefers-reduced-motion下关闭动效。 - 字体：ZCOOL QingKe HuangYou / Noto Sans SC / JetBrains Mono，经 fontsource + jsDelivr 加载；加载失败时回退系统字体。
浏览器兼容性：建议使用较新版本的 Chrome、Edge、Safari 或 Firefox。页面使用了 color-mix()、dvh、backdrop-filter、@starting-style 等现代 CSS 特性，旧版浏览器可能缺少部分视觉效果，但核心功能不受影响。
已知限制：
- 搜索为客户端过滤，只覆盖当前已加载的榜单标题。
- 榜单更新依赖第三方接口，无法保证实时性或长期可用性。
- 豆瓣数据依赖公共 CORS 代理，代理不可用时豆瓣卡片会显示加载失败。
- 站点运行时长基于固定起始时间计算，不代表服务器监控数据。
页面底部点击「免责声明」可查看完整说明。本项目为非商业性的个人学习与技术交流项目。榜单数据来自各平台公开接口或公开页面，仅作实时聚合与展示，不设榜单数据库，也不将原始内容用于商业用途。
榜单排序、热度值及内容均由来源平台提供，可能因接口调整、网络波动或平台自身原因出现延迟、缺漏或错误，请以各平台官方发布为准。本站不对数据的完整性、准确性和及时性作出保证，榜单内容也不代表本站观点。
页面中出现的平台名称、商标、标识及相关内容的版权均归各自权利人所有，本站与各平台无隶属或合作关系。如果权利人认为本站展示方式侵犯其合法权益，请通过项目仓库 Issue 联系维护者，核实后将及时删除相关内容或停止展示。
在法律允许的范围内，本站不对因使用或依赖本页面信息而产生的任何直接或间接损失承担责任。页面中的外部链接指向第三方网站，其内容、服务与安全性由该网站负责。
本项目基于 MIT License 开源。
今日热榜 · 本页面由 AI 辅助生成