wechat-article-reader
# 微信公众号文章阅读器
## 概述
微信公众号使用懒加载机制，图片真实URL存储在 `data-src` 属性中。本skill提供完整的文章阅读流程：提取全文 + 内容图片 + 结合分析。
## 工作流程
### 1. 打开文章
```bash
agent-browser open "<文章URL>"
```
### 2. 滚动加载所有内容
微信文章使用懒加载，需要滚动到底部触发所有图片加载：
```bash
# 多次滚动确保加载完成
for i in {1..8}; do
agent-browser scroll down 800
sleep 1
done
```
### 3. 提取文章内容
```javascript
// 提取标题、作者、正文
const title = document.querySelector('#activity-name')?.innerText || '未找到标题';
const author = document.querySelector('#js_name')?.innerText || '';
const content = document.querySelector('#js_content')?.innerText || '';
```
执行方式：
```bash
agent-browser eval "<上述JS代码>"
```
### 4. 提取图片URL
微信图片存储在 `data-src` 属性，不在 `src`：
```javascript
// 提取所有懒加载图片的真实URL
const imgs = document.querySelectorAll('img');
const urls = [];
imgs.forEach((img) => {
const dataSrc = img.getAttribute('data-src');
if (dataSrc && dataSrc.startsWith('http')) {
urls.push(dataSrc.split('#')[0]); // 去掉hash
}
});
urls.join('\n');
```
### 5. 过滤内容图片
**内容图片特征：**
- 尺寸较大（width > 200 或 height > 200）
- 来自 `mmbiz.qpic.cn` 域名
- 格式为 png/jpg/gif/webp
**装饰图片特征（排除）：**
- 尺寸小（分隔线、图标）
- 文件大小 < 5KB
- 来自特定装饰图路径
### 6. 下载内容图片
```bash
# 创建目录
mkdir -p <输出目录>
# 下载图片
curl -o "img-01.png" "<图片URL>"
```
### 7. 结合阅读
1. 读取正文内容
2. 逐一查看内容图片
3. 将图片与对应段落关联
4. 输出完整分析报告
## 快速脚本
使用 `scripts/read_article.sh` 一键执行：
```bash
./scripts/read_article.sh "<文章URL>" <输出目录>
```
输出：
- `article.json` - 标题、作者、正文
- `images/` - 内容图片目录
- `summary.md` - 结合阅读摘要
## 图片过滤规则
| 类型 | 特征 | 处理 |
|------|------|------|
| 内容图片 | 尺寸 > 200px, 来自 mmbiz.qpic.cn | 下载并分析 |
| 装饰分隔 | 高度 < 50px 或 文件 < 2KB | 忽略 |
| 公众号图标 | 含 "yZPTcMGWibvsic9Obib" 等固定路径 | 忽略 |
| 表情包/贴纸 | 尺寸 < 100px | 忽略 |
## 输出格式
```markdown
## 文章标题
**作者：** XXX
### 正文 + 图片
> 段落内容...
配图：[图片描述]
> 继续段落...
### 图片汇总
| 图片 | 内容 | 关联段落 |
|------|------|----------|
| img-01.png | 游戏截图 | 第一节 |
| img-02.png | 数据图表 | 第三节 |
```
标签
skill
ai
