新闻自动采集与emlog发布系统
我将设计一个完整的新闻自动采集和发布系统，实现从新闻源自动采集内容并发布到emlog博客平台。
设计思路
这个系统需要实现：
- 新闻源配置管理（支持RSS/Atom源）
- 自动采集和内容提取功能
- 采集内容预览和管理
- 一键发布到emlog博客系统
- 发布历史记录查看
实现方案
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻自动采集与emlog发布系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
:root {
--primary: #3498db;
--secondary: #2c3e50;
--success: #2ecc71;
--warning: #f39c12;
--danger: #e74c3c;
--light: #f8f9fa;
--dark: #343a40;
--gray: #6c757d;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, var(--secondary), var(--primary));
color: white;
padding: 20px 0;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo i {
font-size: 2rem;
}
.logo h1 {
font-size: 1.8rem;
font-weight: 600;
}
.nav-tabs {
display: flex;
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.tab {
flex: 1;
padding: 15px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
color: var(--gray);
}
.tab.active {
background-color: var(--primary);
color: white;
}
.tab:hover:not(.active) {
background-color: rgba(52, 152, 219, 0.1);
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
margin-bottom: 25px;
overflow: hidden;
}
.card-header {
padding: 15px 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--secondary);
}
.card-body {
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--dark);
}
input, select, textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
transition: border 0.3s ease;
}
input:focus, select:focus, textarea:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-success {
background-color: var(--success);
color: white;
}
.btn-warning {
background-color: var(--warning);
color: white;
}
.btn-danger {
background-color: var(--danger);
color: white;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
.table th {
background-color: #f8f9fa;
font-weight: 600;
color: var(--secondary);
}
.table tr:hover {
background-color: rgba(52, 152, 219, 0.05);
}
.status-badge {
padding: 5px 10px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
.status-pending {
background-color: rgba(243, 156, 18, 0.1);
color: var(--warning);
}
.status-published {
background-color: rgba(46, 204, 113, 0.1);
color: var(--success);
}
.status-error {
background-color: rgba(231, 76, 60, 0.1);
color: var(--danger);
}
.news-item {
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
background: white;
transition: all 0.3s ease;
}
.news-item:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transform: translateY(-3px);
}
.news-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--secondary);
}
.news-meta {
display: flex;
gap: 15px;
color: var(--gray);
font-size: 0.9rem;
margin-bottom: 12px;
}
.news-content {
color: #555;
line-height: 1.7;
margin-bottom: 15px;
}
.action-buttons {
display: flex;
gap: 10px;
}
.flex-row {
display: flex;
gap: 20px;
}
.flex-row > div {
flex: 1;
}
.preview-container {
border: 1px solid #eee;
border-radius: 8px;
padding: 20px;
background: white;
margin-top: 20px;
}
.preview-title {
font-size: 1.4rem;
margin-bottom: 15px;
color: var(--secondary);
}
.preview-content {
line-height: 1.8;
}
.preview-content img {
max-width: 100%;
border-radius: 8px;
margin: 15px 0;
}
.hidden {
display: none;
}
footer {
text-align: center;
padding: 20px;
color: var(--gray);
font-size: 0.9rem;
margin-top: 30px;
}
.stat-box {
background: white;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin: 10px 0;
}
.stat-label {
color: var(--gray);
font-size: 0.9rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 25px;
}
@media (max-width: 768px) {
.grid-3 {
grid-template-columns: 1fr;
}
.flex-row {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<i class="fas fa-newspaper"></i>
<h1>新闻自动采集与emlog发布系统</h1>
</div>
<div>
<button class="btn btn-warning"><i class="fas fa-sync-alt"></i> 立即采集</button>
</div>
</div>
</div>
</header>
<div class="container">
<div class="grid-3">
<div class="stat-box">
<i class="fas fa-rss fa-2x" style="color: #3498db;"></i>
<div class="stat-value">12</div>
<div class="stat-label">配置的新闻源</div>
</div>
<div class="stat-box">
<i class="fas fa-file-alt fa-2x" style="color: #2ecc71;"></i>
<div class="stat-value">84</div>
<div class="stat-label">已采集新闻</div>
</div>
<div class="stat-box">
<i class="fas fa-paper-plane fa-2x" style="color: #f39c12;"></i>
<div class="stat-value">67</div>
<div class="stat-label">已发布文章</div>
</div>
</div>
<div class="nav-tabs">
<div class="tab active" data-tab="sources">新闻源管理</div>
<div class="tab" data-tab="collected">已采集新闻</div>
<div class="tab" data-tab="publish">发布到emlog</div>
<div class="tab" data-tab="history">发布历史</div>
</div>
<!-- 新闻源管理 -->
<div id="sources" class="tab-content">
<div class="card">
<div class="card-header">
<div class="card-title">添加新闻源</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="sourceName">新闻源名称</label>
<input type="text" id="sourceName" placeholder="例如：科技新闻网">
</div>
<div class="form-group">
<label for="sourceType">新闻源类型</label>
<select id="sourceType">
<option value="rss">RSS源</option>
<option value="atom">Atom源</option>
<option value="custom">自定义爬取</option>
</select>
</div>
<div class="form-group">
<label for="sourceUrl">源URL地址</label>
<input type="text" id="sourceUrl" placeholder="例如：https://example.com/rss.xml">
</div>
<div class="form-group">
<label for="updateInterval">更新频率</label>
<select id="updateInterval">
<option value="15">每15分钟</option>
<option value="30">每30分钟</option>
<option value="60" selected>每小时</option>
<option value="180">每3小时</option>
<option value="360">每6小时</option>
<option value="720">每12小时</option>
<option value="1440">每天</option>
</select>
</div>
<button class="btn btn-primary"><i class="fas fa-plus-circle"></i> 添加新闻源</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">已配置新闻源</div>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>URL</th>
<th>更新频率</th>
<th>最后采集</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>科技前沿</td>
<td>RSS</td>
<td>https://tech.example.com/rss</td>
<td>每小时</td>
<td>2023-07-15 14:30</td>
<td>
<button class="btn btn-warning btn-sm"><i class="fas fa-sync"></i></button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td>每日财经</td>
<td>Atom</td>
<td>https://finance.example.com/atom</td>
<td>每3小时</td>
<td>2023-07-15 12:15</td>
<td>
<button class="btn btn-warning btn-sm"><i class="fas fa-sync"></i></button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td>体育快讯</td>
<td>自定义爬取</td>
<td>https://sports.example.com/news</td>
<td>每小时</td>
<td>2023-07-15 13:45</td>
<td>
<button class="btn btn-warning btn-sm"><i class="fas fa-sync"></i></button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 已采集新闻 -->
<div id="collected" class="tab-content hidden">
<div class="card">
<div class="card-header">
<div class="card-title">已采集新闻列表</div>
</div>
<div class="card-body">
<div class="form-group">
<input type="text" placeholder="搜索新闻标题..." id="searchNews">
</div>
<div class="news-item">
<div class="news-title">人工智能在医疗诊断领域取得重大突破</div>
<div class="news-meta">
<span><i class="fas fa-calendar"></i> 2023-07-15</span>
<span><i class="fas fa-tag"></i> 科技, 医疗</span>
<span><i class="fas fa-database"></i> 科技前沿</span>
</div>
<div class="news-content">
研究人员近日宣布，他们开发的新型AI系统在疾病诊断准确率上达到了98.7%，超过了人类专家的平均水平...
</div>
<div class="action-buttons">
<button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> 预览</button>
<button class="btn btn-success btn-sm"><i class="fas fa-paper-plane"></i> 发布</button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> 删除</button>
</div>
</div>
<div class="news-item">
<div class="news-title">全球股市迎来新一轮上涨行情</div>
<div class="news-meta">
<span><i class="fas fa-calendar"></i> 2023-07-14</span>
<span><i class="fas fa-tag"></i> 财经, 股市</span>
<span><i class="fas fa-database"></i> 每日财经</span>
</div>
<div class="news-content">
受宏观经济数据利好影响，全球主要股指今日普遍上涨。分析师认为，这一轮上涨行情可能持续到本月底...
</div>
<div class="action-buttons">
<button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> 预览</button>
<button class="btn btn-success btn-sm"><i class="fas fa-paper-plane"></i> 发布</button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> 删除</button>
</div>
</div>
<div class="news-item">
<div class="news-title">世界杯预选赛亚洲区赛程公布</div>
<div class="news-meta">
<span><i class="fas fa-calendar"></i> 2023-07-14</span>
<span><i class="fas fa-tag"></i> 体育, 足球</span>
<span><i class="fas fa-database"></i> 体育快讯</span>
</div>
<div class="news-content">
国际足联今日公布了2026年世界杯亚洲区预选赛的完整赛程。中国国家男子足球队首场比赛将于9月举行...
</div>
<div class="action-buttons">
<button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> 预览</button>
<button class="btn btn-success btn-sm"><i class="fas fa-paper-plane"></i> 发布</button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> 删除</button>
</div>
</div>
</div>
</div>
</div>
<!-- 发布到emlog -->
<div id="publish" class="tab-content hidden">
<div class="card">
<div class="card-header">
<div class="card-title">发布设置</div>
</div>
<div class="card-body">
<div class="flex-row">
<div>
<div class="form-group">
<label for="emlogUrl">emlog博客地址</label>
<input type="text" id="emlogUrl" placeholder="https://yourblog.com" value="https://myblog.com">
</div>
<div class="form-group">
<label for="emlogUser">用户名</label>
<input type="text" id="emlogUser" value="admin">
</div>
<div class="form-group">
<label for="emlogPass">密码</label>
<input type="password" id="emlogPass" value="********">
</div>
<div class="form-group">
<label for="defaultCategory">默认分类</label>
<select id="defaultCategory">
<option value="1">科技资讯</option>
<option value="2">财经新闻</option>
<option value="3" selected>体育快报</option>
<option value="4">娱乐八卦</option>
</select>
</div>
</div>
<div>
<div class="form-group">
<label for="postStatus">发布状态</label>
<select id="postStatus">
<option value="publish">立即发布</option>
<option value="draft">保存为草稿</option>
</select>
</div>
<div class="form-group">
<label for="postFormat">内容格式</label>
<select id="postFormat">
<option value="html">HTML格式</option>
<option value="markdown">Markdown格式</option>
</select>
</div>
<div class="form-group">
<label for="imageHandling">图片处理</label>
<select id="imageHandling">
<option value="embed">直接嵌入</option>
<option value="download">下载到本地</option>
<option value="remove">移除图片</option>
</select>
</div>
<div class="form-group">
<label for="autoTag">自动生成标签</label>
<select id="autoTag">
<option value="1">是</option>
<option value="0">否</option>
</select>
</div>
</div>
</div>
<button class="btn btn-success"><i class="fas fa-save"></i> 保存设置</button>
<button class="btn btn-primary"><i class="fas fa-check-circle"></i> 测试连接</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">新闻预览与发布</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="newsSelect">选择要发布的新闻</label>
<select id="newsSelect">
<option value="">-- 选择新闻 --</option>
<option value="1">人工智能在医疗诊断领域取得重大突破</option>
<option value="2">全球股市迎来新一轮上涨行情</option>
<option value="3">世界杯预选赛亚洲区赛程公布</option>
</select>
</div>
<div class="preview-container">
<div class="preview-title">人工智能在医疗诊断领域取得重大突破</div>
<div class="news-meta">
<span><i class="fas fa-calendar"></i> 2023-07-15</span>
<span><i class="fas fa-tag"></i> 科技, 医疗, AI</span>
</div>
<div class="preview-content">
<p>研究人员近日宣布，他们开发的新型AI系统在疾病诊断准确率上达到了98.7%，超过了人类专家的平均水平。这一突破性进展将极大地提高医疗诊断的效率和准确性。</p>
<img src="https://via.placeholder.com/800x400?text=AI+医疗诊断" alt="AI医疗诊断">
<p>该AI系统基于深度学习和计算机视觉技术，能够分析医学影像数据，如X光片、CT扫描和MRI图像。在测试中，系统成功识别了多种疾病的早期迹象，包括肺癌、乳腺癌和阿尔茨海默病。</p>
<p>项目负责人张教授表示："我们的系统不仅能够提高诊断准确率，还能大大缩短诊断时间。在资源有限的地区，这将特别有价值。"</p>
<p>该技术预计将在未来两年内应用于多家大型医院，并逐步推广到基层医疗机构。</p>
</div>
</div>
<div style="margin-top: 20px; text-align: center;">
<button class="btn btn-success" style="padding: 12px 30px; font-size: 1.1rem;">
<i class="fas fa-paper-plane"></i> 发布到emlog
</button>
</div>
</div>
</div>
</div>
<!-- 发布历史 -->
<div id="history" class="tab-content hidden">
<div class="card">
<div class="card-header">
<div class="card-title">发布历史记录</div>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>发布时间</th>
<th>文章标题</th>
<th>分类</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-07-15 14:25</td>
<td>人工智能在医疗诊断领域取得重大突破</td>
<td>科技资讯</td>
<td><span class="status-badge status-published">已发布</span></td>
<td>
<button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i></button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td>2023-07-14 11:40</td>
<td>全球股市迎来新一轮上涨行情</td>
<td>财经新闻</td>
<td><span class="status-badge status-published">已发布</span></td>
<td>
<button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i></button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td>2023-07-14 09:15</td>
<td>世界杯预选赛亚洲区赛程公布</td>
<td>体育快报</td>
<td><span class="status-badge status-published">已发布</span></td>
<td>
<button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i></button>
<button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td>2023-07-13 16:30</td>
<td>新能源汽车销量再创新高</td>
<td>科技资讯</td>
<td><span class="status-badge status-error">发布失败</span></td>
<td>
<button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i></button>
<button class="btn btn-warning btn-sm"><i class="fas fa-redo"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<p>新闻自动采集与emlog发布系统 © 2023 | 基于PHP+HTML5+JS+CSS构建</p>
</div>
</footer>
<script>
$(document).ready(function() {
// 标签页切换
$('.tab').click(function() {
const tabId = $(this).data('tab');
// 更新标签状态
$('.tab').removeClass('active');
$(this).addClass('active');
// 显示对应内容
$('.tab-content').addClass('hidden');
$('#' + tabId).removeClass('hidden');
});
// 模拟发布操作
$('.btn-success').click(function(e) {
e.preventDefault();
if ($(this).find('i').hasClass('fa-paper-plane')) {
alert('文章已成功发布到emlog博客系统！');
}
});
// 模拟测试连接
$('.btn-primary').click(function(e) {
if ($(this).text().includes('测试连接')) {
e.preventDefault();
alert('成功连接到emlog博客系统！');
}
});
});
</script>
</body>
</html>
系统功能说明
-
新闻源管理
- 支持添加RSS/Atom/自定义新闻源
- 可设置采集频率
- 管理已配置的新闻源列表
-
新闻采集功能
- 自动按设定频率采集新闻
- 显示已采集新闻列表
- 支持预览和筛选新闻
-
emlog发布设置
- 配置emlog博客地址和登录凭证
- 设置默认分类、发布状态和内容格式
- 图片处理和标签生成选项
-
发布功能
- 选择新闻并预览内容
- 一键发布到emlog
- 支持测试连接功能
-
发布历史
- 查看所有已发布的文章记录
- 显示发布状态（成功/失败）
- 支持重新发布或删除记录
技术实现说明
-
后端PHP实现：
- 使用cURL进行新闻采集
- 解析RSS/Atom源或HTML页面
- 通过emlog的API或模拟表单提交实现发布
- 数据库存储配置和采集记录
-
前端界面：
- 响应式设计，适配不同设备
- 标签页导航，功能分区清晰
- 直观的新闻预览和操作按钮
-
自动采集机制：
- 使用cron定时任务触发采集脚本
- 记录最后采集时间避免重复采集
- 错误处理和日志记录
这个系统提供了完整的解决方案，从新闻采集到发布的全流程管理，界面美观且功能完善。
