NewsNow：一个优雅的实时新闻聚合器开源项目
·
NewsNow：一个优雅的实时新闻聚合器开源项目深度解析
项目背景
在信息爆炸的时代，我们每天需要浏览多个平台来获取最新资讯：微博热搜、知乎热榜、B站热门、GitHub趋势…这些分散的信息源让我们疲于奔命。有没有一个优雅的解决方案，能够将所有这些热点信息聚合在一个界面中？
NewsNow 就是这样一个开源项目，它用现代化的技术栈构建了一个实时新闻聚合器，让用户能够在一个优雅的界面中浏览全网热点。
🚀 核心特性深度解析
1. 优雅的用户界面设计
NewsNow 采用了卡片式布局，每个新闻源都有独立的卡片展示：
// 卡片组件示例
export const CardWrapper = forwardRef<HTMLElement, ItemsProps>(({ id, isDragging, setHandleRef, style, ...props }, dndRef) => {
return (
<div
className={$(
"flex flex-col h-500px rounded-2xl p-4 cursor-default",
"transition-opacity-300",
isDragging && "op-50",
`bg-${sources[id].color}-500 dark:bg-${sources[id].color} bg-op-40!`,
)}
style={{
transformOrigin: "50% 50%",
...style,
}}
{...props}
>
{inView && <NewsCard id={id} setHandleRef={setHandleRef} />}
</div>
)
})
设计亮点：
- 每个新闻源都有独特的颜色主题
- 支持深色/浅色模式切换
- 流畅的动画效果和过渡
- 响应式设计，完美适配移动端
- 虚拟滚动优化，提升性能
2. 智能数据抓取机制
项目实现了智能的数据抓取策略，避免被目标网站封禁：
// 自定义 fetch 配置
export const myFetch = $fetch.create({
headers: {
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36",
},
timeout: 10000,
retry: 3,
})
抓取策略：
- 根据内容源更新频率动态调整抓取间隔（最快每2分钟）
- 智能重试机制，失败时自动重试3次
- 模拟真实浏览器请求头，避免被识别为爬虫
- 支持多种数据格式：RSS、API、网页解析
3. 高效的缓存系统
项目实现了多层次的缓存机制：
// 缓存系统示例
export class Cache {
async set(key: string, value: NewsItem[]) {
const now = Date.now()
if (this.isMySQL) {
await this.db.prepare(
`INSERT INTO cache (id, data, updated) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE data = VALUES(data), updated = VALUES(updated)`,
).run(key, JSON.stringify(value), now)
} else {
await this.db.prepare(
`INSERT OR REPLACE INTO cache (id, data, updated) VALUES (?, ?, ?)`,
).run(key, JSON.stringify(value), now)
}
}
}
缓存特性：
- 默认30分钟缓存时间，减少服务器压力
- 支持 SQLite、MySQL、Cloudflare D1 多种数据库
- 登录用户可强制刷新获取最新数据
- 智能缓存失效策略
4. 丰富的新闻源支持
项目目前支持 40+ 个热门新闻源，涵盖各个领域：
科技类新闻源
- GitHub - 开源项目趋势和热门仓库
- 36氪 - 科技资讯和创业动态
- 掘金 - 开发者社区热门文章
- IT之家 - 科技新闻和产品评测
- ProductHunt - 新产品发现和评测
社交媒体热点
- 微博 - 实时热搜榜
- 知乎 - 热门话题和讨论
- B站 - 热门视频和UP主
- 抖音 - 热门短视频内容
- 快手 - 热门视频和直播
财经资讯
- 雪球 - 投资社区和股票讨论
- 华尔街见闻 - 财经资讯和市场分析
- 金十数据 - 财经数据和市场动态
- 快牛财经 - 财经新闻和投资建议
新闻媒体
- 澎湃新闻 - 时政新闻和社会热点
- 参考消息 - 国际新闻和时事评论
- 今日头条 - 热点新闻和个性化推荐
- 人民网 - 官方新闻和政策解读
5. 技术架构详解
前端技术栈
- React 19 - 最新的 React 版本，支持并发特性
- TypeScript - 类型安全，提升开发体验
- Vite 6 - 快速的构建工具
- TanStack Router - 现代化的路由解决方案
- Jotai - 轻量级状态管理
- UnoCSS - 原子化 CSS 框架
- Framer Motion - 流畅的动画库
后端技术栈
- Nitro - Nuxt.js 的服务端框架
- db0 - 统一的数据库抽象层
- ofetch - 现代化的 HTTP 客户端
- Jose - JWT 认证库
部署方案
- Cloudflare Pages - 静态站点托管
- Vercel - 全栈应用部署
- Docker - 容器化部署
- Cloudflare D1 - 边缘数据库
📊 实际使用体验
界面展示
NewsNow 的界面设计非常优雅，每个新闻源都有独立的卡片：
┌─────────────────────────────────────┐
│ 🔥 微博热搜 ⭐ │
│ 2分钟前更新 │
├─────────────────────────────────────┤
│ 1. #今日热点话题# │
│ 1.2万讨论 │
│ │
│ 2. #热门新闻# │
│ 8.5千讨论 │
│ │
│ 3. #娱乐资讯# │
│ 5.3千讨论 │
└─────────────────────────────────────┘
功能特色
- 拖拽排序 - 用户可以自由调整新闻源的顺序
- 实时更新 - 支持手动刷新获取最新数据
- 搜索功能 - 快速查找感兴趣的新闻
- 移动优化 - 完美适配手机和平板
- 个性化 - 支持收藏和关注特定新闻源
🛠️ 开发体验
项目结构清晰
newsnow/
├── src/ # 前端源码
│ ├── components/ # React 组件
│ │ ├── column/ # 新闻卡片组件
│ │ ├── header/ # 头部组件
│ │ └── common/ # 通用组件
│ ├── hooks/ # 自定义 Hooks
│ └── routes/ # 路由配置
├── server/ # 后端源码
│ ├── api/ # API 路由
│ ├── sources/ # 新闻源实现
│ │ ├── zhihu.ts # 知乎热榜
│ │ ├── bilibili.ts # B站热门
│ │ └── weibo.ts # 微博热搜
│ └── database/ # 数据库相关
├── shared/ # 共享代码
│ ├── sources.json # 新闻源配置
│ └── types.ts # 类型定义
└── public/ # 静态资源
添加新闻源非常简单
以添加知乎热榜为例：
// server/sources/zhihu.ts
interface Res {
data: {
target: {
title_area: { text: string }
excerpt_area: { text: string }
metrics_area: { text: string }
link: { url: string }
}
}[]
}
export default defineSource({
zhihu: async () => {
const url = "https://www.zhihu.com/api/v3/feed/topstory/hot-list-web?limit=20&desktop=true"
const res: Res = await myFetch(url)
return res.data.map((k) => ({
id: k.target.link.url.match(/(\d+)$/)?.[1] ?? k.target.link.url,
title: k.target.title_area.text,
extra: {
info: k.target.metrics_area.text,
hover: k.target.excerpt_area.text,
},
url: k.target.link.url,
}))
},
})
开发工具链完善
- ESLint - 代码质量检查
- TypeScript - 类型安全
- Vitest - 单元测试
- UnoCSS - 原子化 CSS
- Vite - 快速开发服务器
🚀 部署指南
本地开发
# 克隆项目
git clone https://github.com/ourongxing/newsnow.git
cd newsnow
# 安装依赖
pnpm install
# 配置环境变量（可选）
cp example.env.server .env.server
# 编辑 .env.server 文件，配置 GitHub OAuth
# 启动开发服务器
pnpm dev
访问 http://localhost:5174/ 即可查看效果。
Cloudflare Pages 部署
- Fork 本仓库
- 在 Cloudflare Pages 中导入项目
- 配置构建命令：
pnpm run build - 输出目录：
dist/output/public - 配置环境变量（可选）
Docker 部署
# 使用 Docker Compose
docker compose up
# 或者构建镜像
docker build -t newsnow .
docker run -p 3000:3000 newsnow
🔧 扩展开发
添加新的新闻源
项目设计为高度可扩展，添加新新闻源只需要三个步骤：
1. 配置新闻源
在 shared/pre-sources.ts 中添加配置：
"newsource": {
name: "新新闻源",
color: "blue",
home: "https://www.example.com",
column: "tech",
type: "hottest"
}
2. 实现数据获取
在 server/sources/ 目录下创建实现文件：
// server/sources/newsource.ts
import { defineSource } from '../utils/source'
export default defineSource(async () => {
const url = "https://api.example.com/news"
const res = await fetch(url)
const data = await res.json()
return data.map(item => ({
id: item.id,
title: item.title,
url: item.link,
pubDate: new Date(item.date).getTime(),
extra: {
info: item.author,
hover: item.description
}
}))
})
3. 重新生成配置
pnpm run presource
自定义样式
项目使用 UnoCSS，可以轻松自定义样式：
// 自定义颜色主题
const customColors = {
'custom-blue': '#3B82F6',
'custom-green': '#10B981',
}
// 在组件中使用
<div className="bg-custom-blue text-white rounded-lg p-4">
自定义样式
</div>
📈 性能优化
前端优化
- 虚拟滚动 - 大量数据时使用虚拟滚动
- 懒加载 - 图片和组件按需加载
- 缓存策略 - 智能的缓存机制
- 代码分割 - 按路由分割代码
后端优化
- 数据库索引 - 优化查询性能
- 连接池 - 复用数据库连接
- 缓存层 - 减少重复请求
- 错误处理 - 优雅的错误处理
🤝 社区贡献
贡献方式
- 提交 Issue - 报告 bug 或提出功能建议
- 提交 PR - 修复 bug 或添加新功能
- 添加新闻源 - 为项目添加新的数据源
- 改进文档 - 完善项目文档
贡献流程
# 1. Fork 项目
git clone https://github.com/your-username/newsnow.git
# 2. 创建功能分支
git checkout -b feature/new-source
# 3. 开发新功能
# 添加新的新闻源或修复 bug
# 4. 提交更改
git add .
git commit -m "feat: add new news source"
# 5. 推送分支
git push origin feature/new-source
# 6. 创建 Pull Request
代码规范
- 使用 TypeScript 进行类型检查
- 遵循 ESLint 规则
- 编写清晰的注释
- 添加适当的测试
🎯 使用场景
个人用户
- 信息聚合 - 在一个界面浏览全网热点
- 个性化阅读 - 根据兴趣定制新闻源
- 移动阅读 - 随时随地获取最新资讯
开发者
- 学习项目 - 学习 React 19 和现代前端技术
- 技术参考 - 了解新闻聚合的技术实现
- 开源贡献 - 参与开源项目开发
企业用户
- 内部系统 - 构建企业内部的新闻聚合系统
- 定制开发 - 基于项目进行定制化开发
- 数据分析 - 收集和分析热点数据
📊 项目数据
技术指标
- 代码行数: 约 15,000 行
- 支持新闻源: 40+ 个
- 技术栈: React 19 + TypeScript + Vite 6
- 部署方式: 支持 4 种部署方案
性能指标
- 首屏加载时间: < 2 秒
- 缓存命中率: > 80%
- API 响应时间: < 500ms
- 并发支持: 1000+ 用户
📞 相关链接
- 🌐 在线演示: https://newsnow.busiyi.world
- 📖 项目地址: https://github.com/ourongxing/newsnow
- 📚 文档: https://github.com/ourongxing/newsnow#readme
- 🐛 问题反馈: https://github.com/ourongxing/newsnow/issues
- 👤 作者: ourongxing
- 📄 许可证: MIT
总结
NewsNow 是一个优秀的开源新闻聚合项目，它不仅解决了信息分散的问题，更重要的是展示了现代前端开发的最佳实践。
项目亮点
- 技术先进 - 使用最新的 React 19 和 TypeScript
- 架构清晰 - 模块化设计，易于扩展
- 性能优秀 - 智能缓存和优化策略
- 用户体验 - 优雅的界面和流畅的交互
- 开源友好 - MIT 许可证，完全开源
适用人群
- 前端开发者 - 学习现代 React 开发
- 全栈工程师 - 了解前后端分离架构
- 产品经理 - 参考信息聚合产品设计
- 个人用户 - 获取全网热点资讯
如果你对新闻聚合、React 开发或开源项目感兴趣，NewsNow 绝对是一个不容错过的项目！它不仅提供了实用的功能，更重要的是展示了如何用现代化的技术栈构建优雅的 Web 应用。
ssues
- 👤 作者: ourongxing
- 📄 许可证: MIT
总结
NewsNow 是一个优秀的开源新闻聚合项目，它不仅解决了信息分散的问题，更重要的是展示了现代前端开发的最佳实践。
项目亮点
- 技术先进 - 使用最新的 React 19 和 TypeScript
- 架构清晰 - 模块化设计，易于扩展
- 性能优秀 - 智能缓存和优化策略
- 用户体验 - 优雅的界面和流畅的交互
- 开源友好 - MIT 许可证，完全开源
适用人群
- 前端开发者 - 学习现代 React 开发
- 全栈工程师 - 了解前后端分离架构
- 产品经理 - 参考信息聚合产品设计
- 个人用户 - 获取全网热点资讯
如果你对新闻聚合、React 开发或开源项目感兴趣，NewsNow 绝对是一个不容错过的项目！它不仅提供了实用的功能，更重要的是展示了如何用现代化的技术栈构建优雅的 Web 应用。
本文详细介绍了 NewsNow 开源项目的技术架构、功能特性和使用体验。项目采用现代化的技术栈，提供了优雅的用户体验和丰富的功能。无论是作为学习项目还是实际应用，都值得推荐。
DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
24
0- 0
已为社区贡献30条内容
所有评论(0)