> **创作时间**：2026年2月  
> **技术栈**：OpenClaw + DailyHotApi + ElaAdmin（openclaw选的），我的技术栈：一张嘴

 **注意：本项目已经开源，skill的地址：https://github.com/one-box-u/openclaw-daily-hot-news， 
 
 欢迎各位PULL本地做二次开发。

## 🌟 开局：一个编程小白的逆袭

说实话，在接触 OpenClaw 之前，我完全编程小白。服务器？Linux？听过没见过。

但接触了openclaw后，我慢慢开始发现了这个工具的神奇之处，

我突发奇想：能不能做一个聚合全国热榜的工具？微博、知乎、B站、抖音...如果能在一个页面看到所有平台的热门内容，那该多方便！


**结果**：我用 OpenClaw + 自然语言，从零开始，搭建了一个包含 54 个信息源的每日热榜系统（每小时自动获取热榜，也可以手动获取）。

PS：手工简陋版，本人不会编程，克服一下~~~

整个过程，我只做了一件事：**告诉 OpenClaw 我要什么**。


![屏幕截图 2026-02-08 225615.png](https://developer.qcloudimg.com/http-save/yehe-12016504/855c73713bc98995b4cbfeac715ddfb6.png) 



## 📚 项目渊源：站在巨人的肩膀上

### 我们的技术基础

这个项目并非从零开始，而是站在了两个优秀的开源项目肩膀上：

| 项目 | 来源 | 用途 |
|------|------|------|
| **DailyHotApi** | GitHub: imsyy/DailyHotApi | 后端 API 服务，提供 54 个热榜数据源 |
| **ElaAdmin** | GitHub: puikinsh/ElaAdmin | 前端 UI 模板，Bootstrap 5 风格 |

### 源项目的闪光点

**DailyHotApi 的优点**：
- ✅ 54 个平台支持，覆盖面极广
- ✅ Docker 容器化部署，方便快捷
- ✅ 数据实时抓取，保持更新
- ✅ API 接口设计规范，易于调用

**ElaAdmin 的优点**：
- ✅ 纯静态 HTML，无需复杂的 npm 构建
- ✅ Bootstrap 5 框架，响应式设计
- ✅ 界面美观大方，暗色主题护眼
- ✅ 开源免费，MIT 许可证

---

## 🔧 我们的改动：让开源项目更贴合 OpenClaw

### 1. 精简部署方式

源项目的部署方式有多种，我选择了一个占用内存最小的，加上废物利用家里的r2s。

**最终方案**：
```bash
# 1. 直接运行 Node.js 服务
cd DailyHotApi
npm install
pm2 start

# 2. Nginx 静态服务
apt-get install nginx
cp -r dist/* /var/www/elaadmin/
```

**效果**：内存占用从 Docker 的 500MB+ 降到 <100MB！

### 2. 自然语言驱动 OpenClaw

这是最让我惊喜的部分。我虽然不懂代码怎么写，但，我只需要告诉 OpenClaw 我要什么：

**我的原话**：
> "帮我开发一个每日热榜的 Web UI 界面，要深色主题，左边是分类导航，右边是热榜卡片。数据从家里面的r2s 读取，之前在上面部署了每日热榜的api的那个"

**OpenClaw 的响应**：
1. 自动下载 ElaAdmin 模板
2. 创建深色主题 CSS
3. 编写响应式 HTML 页面
4. 实现 JavaScript 交互逻辑
5. 配置 Nginx 反向代理

整个过程，我只动嘴，因为除了动嘴，我也不会其他的了。。。。。。。

### 3. 二次开发功能增强

| 功能 | 源项目 | 我们的改动 |
|------|--------|-----------|
| **主题** | 亮色主题 | 深色主题 (#1e1e2e) |
| **分类** | 无分类 | 7 大分类：视频、社交、新闻、科技、游戏、阅读、工具 |
| **数据源** | 54 个全开 | 支持按需启用/禁用 |
| **部署** | Docker | 纯静态 + Node.js 直连 |
| **访问** | 单机 | R2S → 腾讯云 SSH 隧道映射 |


---

## 🏗️ 技术路线图：我是怎么做的

### 第一阶段：后端 API 部署（R2S）

**目标**：在 R2S 上运行 DailyHotApi 服务

**技术选型**：
- **运行环境**：Node.js 22.x（直接运行，不走 Docker）
- **进程管理**：PM2（开机自启，内存占用低）
- **数据存储**：JSON 文件（轻量，无需数据库）

**部署命令**：
```bash
# 1. 安装 Node.js
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
apt-get install -y nodejs

# 2. 克隆并安装
git clone https://github.com/imsyy/DailyHotApi.git
cd DailyHotApi
npm install

# 3. 配置 PM2
pm2 ecosystem.config.js
pm2 startup
pm2 save

# 4. 验证服务
curl http://localhost:6688/bilibili
```

**资源占用**：
| 指标 | 数值 |
|------|------|
| 内存 | ~50MB |
| CPU | <1% |
| 磁盘 | ~200MB |

### 第二阶段：前端 UI 部署（R2S）

**目标**：做一个Web 界面来展示热榜，但是openclaw告诉我，r2s，内存本来就小，剩余的空间不够多，于是我就选择了最便宜的，最节约内存的。

**技术选型**：
- **UI 框架**：Bootstrap 5（CDN 引入，无需构建）
- **模板**：ElaAdmin（纯静态 HTML）
- **样式**：自定义 CSS（深色主题）

**文件结构**：
```
/var/www/elaadmin/
├── index.html          # 主页面 (4KB)
├── assets/
│   ├── css/
│   │   └── theme.css  # 深色主题 (4KB)
│   └── js/
│       └── hot-app.js # 交互逻辑 (6KB)
└── data/              # 数据目录（软链接）
```

**核心代码片段**：
```html

<div class="d-flex vh-100">
  <nav class="sidebar" style="width: 260px;">
    
    <ul class="nav flex-column" id="category-nav">
      <li><a href="#" data-category="video">📺 视频/直播</a></li>
      <li><a href="#" data-category="social">💬 社交媒体</a></li>
      
    </ul>
  </nav>
  <main class="flex-grow-1 overflow-auto">
    <div id="hot-grid" class="hot-grid"></div>
  </main>
</div>
```

**Nginx 配置**：
```nginx
server {
    listen 8888;
    root /var/www/elaadmin;
    index index.html;

    location /data/ {
        alias /var/www/elaadmin/data/;
        autoindex on;
    }
}
```

### 第三阶段：公网访问映射（腾讯云 + R2S）

**目标**：让我~能访问 R2S 上的服务

**架构图**：
```
用户 ──▶ 腾讯云:80 ──▶ SSH隧道 ──▶ R2S:8888
          │              │
     ✅ HTTP服务        🔒 仅本地
     ✅ 公网开放         ❌ 不对公网
```

**为什么这样设计？**

| 服务器 | 方案 | 原因 |
|--------|------|------|
| **腾讯云** | 80 端口 HTTP | 带宽大，固定 IP，稳定 |
| **R2S** | 8888 端口 Nginx | 内存小，不暴露公网 |

**SSH 隧道配置**：
```bash
# 腾讯云上执行
ssh -f -N -p 60022 \
    -L 0.0.0.0:18888:localhost:8888 \
    root@127.0.0.1

# 开机自启
cat > /etc/systemd/system/hot-tunnel.service
systemctl enable hot-tunnel
```

**Nginx 反向代理**：
```nginx
server {
    listen 80;
    server_name _;

    location / {
        proxy_pass http://127.0.0.1:18888;
        proxy_set_header Host $host;
        
        # 安全头
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-Content-Type-Options "nosniff" always;
    }
}
```

---

## 🎨 UI 二次开发指南

### 1. 如何用自然语言描述需求

**错误示范**：
> "帮我做个好看的页面"

**正确示范**：
> "创建一个深色主题的页面，左侧是分类导航栏，右侧是卡片网格。
> 每个卡片显示平台名称、刷新按钮和热榜列表。"
> 其他的我都交给openclaw，然后慢慢和他沟通，

**OpenClaw 能理解的要素**：
| 要素 | 示例 |
|------|------|
| 颜色 | `#1e1e2e`, `#e0e0e0` |
| 尺寸 | `260px`, `32px` |
| 布局 | `flex`, `grid`, `sidebar` |
| 组件 | `card`, `nav`, `button` |
| 交互 | `onclick`, `fetch`, `async` |

### 2. 模板选择建议

**不推荐**：
- ❌ Vuestic Admin（500-800MB，内存爆炸）
- ❌ Element Plus Admin（npm 构建太复杂）

**推荐**：
- ✅ ElaAdmin（<100MB，纯静态）
- ✅ Adminator（轻量级）
- ✅ Bootstrap 官方示例

### 3. 常见修改点

**修改颜色**：
```css
:root {
    --bg-primary: #1e1e2e;
    --bg-card: #2d2d3d;
    --accent: #3b82f6;
    --text-primary: #e0e0e0;
}
```

**修改分类**：
```javascript
const categories = {
  video: {
    name: '视频/直播',
    icon: '📺',
    platforms: ['bilibili', 'douyin', 'kuaishou', 'acfun']
  },
  // 添加更多分类...
}
```

**修改布局**：
```css
.hot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}
```

---

## 🔐 安全管理：我是怎么做的

### 安全架构设计（其实都是openclaw给的方案，我只提出了我自己的要求）

**多层防护**：
1. **R2S 层**：8888 端口不对公网开放
2. **SSH 隧道**：只做端口转发，不执行命令
3. **腾讯云层**：80 端口只提供静态页面
4. **Nginx 层**：配置安全响应头

**验证测试**：
```bash
# 测试：公网无法直接访问 R2S:8888
$ curl http://公网IP:8888
# 返回：curl: (7) Failed to connect

# 测试：公网可以访问腾讯云:80
$ curl http://公网IP
# 返回：HTML 页面
```

### 风险与对策

| 风险 | 可能性 | 对策 |
|------|--------|------|
| DDoS 攻击 | 中 | Nginx 限流 |
| SSH 暴力破解 | 中 | 密钥登录 + 非默认端口 |
| 数据泄露 | 低 | 网络隔离 |
| 端口扫描 | 高 | 最小端口开放 |

---

## 📱 使用指南

### 网页端

**访问地址就不开放了，毕竟ui端不好看**

**网页端优点**：
- ✅ 深色主题护眼
- ✅ 响应式布局，手机也能用
- ✅ 7 大分类，54 个平台
- ✅ 实时数据，自动更新

### OpenClaw 端

**查询热榜**：
> "帮我查一下今天微博的热榜"

**定时推送**：
> "每天早上9点推送今天的知乎热榜到飞书"

**修改配置**：
> "把B站的热榜显示数量从10条改到20条"

---

## 📦 源项目与 Skill 地址

| 项目 | 地址 |
|------|------|
| **DailyHotApi（后端 API）** | https://github.com/imsyy/DailyHotApi |
| **ElaAdmin（前端模板）** | https://github.com/puikinsh/ElaAdmin |
| **每日热榜 Skill（我开发的更适合openclaw的skill）** | https://github.com/one-box-u/openclaw-daily-hot-news |

---

## 💡 我的一些想法

### 1. 开源项目选择要贴合实际

不是所有开源方案都适合你的环境。

Docker 很好，但 R2S 跑不动，我就选择了更轻量的直接运行方案，

如果你pull我的项目，也可以使用部署在腾讯云上，直接给你的openclaw说就行。

### 2. 自然语言真的很强大

OpenClaw 的自然语言驱动让我这个"编程小白"也能做项目。

我不需要懂任何代码，但是，我需要清楚逻辑+说人话。（底层逻辑比会代码更强！）

### 3. 分阶段执行不慌乱

整个项目我分成了三个阶段：（分阶段执行，不然可能会造成大语言模型直接卡死）
1. **后端部署**（30 分钟）
2. **前端开发**（15 分钟）
3. **公网映射**（10 分钟）

如果模型卡死，直接说继续就行。。。。。

每个阶段目标明确，不容易出错。

### 4. 安全要从设计开始

从一开始就没打算让 R2S 的 8888 端口暴露公网，而是通过 SSH 隧道做反向代理
。这种"最小权限"的设计，让系统更安全。



**感谢阅读！希望我的经验对你有帮助。**

**有问题？来找 OpenClaw 聊聊！**

创作时间：2026年2月   技术栈：OpenClaw + DailyHotApi + ElaAdmin（openclaw选的），我的技术栈：一张嘴

玩转 OpenClaw：指尖秒看全国新闻，54个信息源一键聚合

一张嘴，开发一个skill，看全国54个新闻热榜。

前端

开发工具

新闻资讯

开源项目OpenClaw-Daily-Hot-News聚合54个平台热榜数据，采用OpenClaw+DailyHotApi+ElaAdmin技术栈，支持深色主题、分类导航和实时更新。项目已开源，适合二次开发，提供轻量级部署方案，内存占用低于100MB。通过自然语言驱动开发，无需编程基础即可搭建个性化热榜系统。

响应式设计

数据存储

数据泄露

DDoS攻击

服务器

数据库

容器

Linux

JSON

4核4G3M云服务器 新用户低至38元/年！

2026新春采购季

tencentdb-catalog

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

玩转 OpenClaw：指尖秒看全国新闻，54个信息源一键聚合-腾讯云开发者社区-腾讯云

玩转 OpenClaw：指尖秒看全国新闻，54个信息源一键聚合

玩转 OpenClaw：指尖秒看全国新闻，54个信息源一键聚合

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐