nanan/green_classroom
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change front_web_view

Browse Source
This commit is contained in:
yuangyaa
2025-10-28 10:39:08 +08:00
parent a36d730384
commit 90446cd330
8 changed files with 581 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

531
core/templates/core/article_list.html
View File

@@ -2,36 +2,62 @@
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<title>绿色课堂文章列表</title>
<title>{{ site_config.site_title }}</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0 auto;
padding: 20px;
background-color: #f0f8ff; /* 统一背景色调 */
margin: 0;
padding: 0;
background-color: #f0f8ff;
}
.container {
background: white;
padding: 30px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
border-radius: 8px; /* 添加圆角 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
border-radius: 8px;
max-width: 1400px;
margin: 0 auto;
}
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-top: 0;
.site-header {
{% if site_config.header_background_image %}
background-image: url('{{ site_config.header_background_image.url }}');
background-size: {{ site_config.header_background_size }};
background-position: {{ site_config.header_background_position }};
background-repeat: no-repeat;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
{% else %}
background: linear-gradient(135deg, {{ site_config.header_background_color }} 0%, #764ba2 100%);
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
{% endif %}
padding: 50px 30px;
margin-bottom: 30px;
border-radius: 10px;
text-align: center;
min-height: {{ site_config.header_height }}px;
display: flex;
align-items: center;
justify-content: center;
}
.site-title {
color: {% if site_config.header_background_image %}white{% else %}white{% endif %};
font-size: 2.5em;
font-weight: 700;
margin: 0;
text-shadow: {% if site_config.header_background_image %}2px 2px 4px rgba(0,0,0,0.5){% else %}2px 2px 4px rgba(0,0,0,0.3){% endif %};
}
.filters {
margin-bottom: 20px;
padding: 15px;
background-color: #e3f2fd; /* 统一滤镜背景色调 */
background-color: #e3f2fd;
border-radius: 5px;
}
@@ -39,7 +65,7 @@
display: inline-block;
padding: 5px 10px;
margin: 0 5px 5px 0;
background-color: #bbdefb; /* 统一链接背景色调 */
background-color: #bbdefb;
color: #0d47a1;
text-decoration: none;
border-radius: 3px;
@@ -57,7 +83,7 @@
li {
padding: 10px 0;
border-bottom: 1px solid #e0e0e0; /* 统一分隔线颜色 */
border-bottom: 1px solid #e0e0e0;
}
li:last-child {
@@ -65,17 +91,17 @@
}
a {
color: #1976d2; /* 统一链接颜色 */
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #0d47a1; /* 统一悬停颜色 */
color: #0d47a1;
text-decoration: underline;
}
.meta {
color: #78909c; /* 统一元数据颜色 */
color: #78909c;
font-size: 0.9em;
}
@@ -92,7 +118,7 @@
color: white;
text-decoration: none;
border-radius: 4px;
margin: 0 2px; /* 修改:调整页码间距 */
margin: 0 2px;
}
.pagination a:hover {
@@ -104,30 +130,27 @@
color: #7f8c8d;
}
/* 新增:当前页码样式 */
.pagination .current {
background-color: #2980b9;
cursor: default;
}
/* 新增:省略号样式 */
.pagination .ellipsis {
display: inline-block;
padding: 8px 4px;
color: #7f8c8d;
}
/* 新增:搜索框样式 */
.search-form {
margin-bottom: 20px;
padding: 15px;
background-color: #e3f2fd; /* 统一搜索框背景色调 */
background-color: #e3f2fd;
border-radius: 5px;
}
.search-form input[type="text"] {
padding: 8px 12px;
border: 1px solid #bbdefb; /* 统一边框颜色 */
border: 1px solid #bbdefb;
border-radius: 4px;
width: 300px;
margin-right: 10px;
@@ -148,12 +171,11 @@
}
.search-info {
color: #78909c; /* 统一搜索信息颜色 */
color: #78909c;
font-size: 0.9em;
margin-bottom: 10px;
}
/* 新增:左侧筛选栏样式 */
.content-wrapper {
display: flex;
gap: 20px;
@@ -161,7 +183,7 @@
.sidebar {
flex: 0 0 200px;
background-color: #e3f2fd; /* 统一边栏背景色调 */
background-color: #e3f2fd;
border-radius: 5px;
padding: 15px;
}
@@ -186,7 +208,7 @@
display: block;
padding: 8px 10px;
margin: 0 0 5px 0;
background-color: #bbdefb; /* 统一边栏链接背景色调 */
background-color: #bbdefb;
color: #0d47a1;
text-decoration: none;
border-radius: 3px;
@@ -197,18 +219,17 @@
color: white;
}
/* 新增:导出功能样式 */
.export-section {
margin-bottom: 20px;
padding: 15px;
background-color: #e8f5e9; /* 统一导出区域背景色调 */
background-color: #e8f5e9;
border-radius: 5px;
text-align: center;
}
.export-btn {
padding: 10px 20px;
background-color: #4caf50; /* 统一按钮背景色调 */
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
@@ -218,24 +239,313 @@
}
.export-btn:hover {
background-color: #388e3c; /* 统一按钮悬停色调 */
background-color: #388e3c;
}
.export-btn:disabled {
background-color: #9e9e9e; /* 统一禁用按钮色调 */
background-color: #9e9e9e;
cursor: not-allowed;
}
.article-checkbox {
margin-right: 10px;
}
.websites-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.website-card {
flex: 1 1 auto;
min-width: 120px;
padding: 10px;
background-color: #e3f2fd;
border-radius: 5px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.website-card:hover {
background-color: #bbdefb;
transform: translateY(-2px);
}
.website-card.active {
background-color: #3498db;
color: white;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 25px;
margin-top: 20px;
}
.article-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: all 0.3s ease;
background: white;
border: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
}
.article-card.no-image {
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
min-height: auto;
grid-row: span 1;
}
.article-card.no-image .article-content {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.article-card.no-image h3 {
margin-top: 0;
font-size: 1.3em;
line-height: 1.4;
flex: 1;
}
.article-card:not(.no-image) {
grid-row: span 2;
}
.article-card:not(.no-image) .article-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.article-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-color: #3498db;
}
.article-image-container {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.article-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.article-card:hover .article-image {
transform: scale(1.05);
}
.article-content {
padding: 20px;
position: relative;
}
.article-card h3 {
margin-top: 0;
margin-bottom: 12px;
color: #2c3e50;
font-size: 20px;
line-height: 1.4;
font-weight: 600;
min-height: 56px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card h3 a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.article-card h3 a:hover {
color: #3498db;
}
.article-meta {
font-size: 0.9em;
color: #78909c;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.article-source {
font-weight: 600;
color: #3498db;
background: #e3f2fd;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8em;
}
.article-date {
color: #95a5a6;
font-size: 0.85em;
}
.no-image-placeholder {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 16px;
position: relative;
}
.no-image-placeholder::before {
content: "📰";
font-size: 48px;
margin-bottom: 10px;
display: block;
}
.no-image-placeholder span {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
opacity: 0.9;
}
@media (max-width: 768px) {
.articles-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.article-image-container {
height: 220px;
}
.article-card h3 {
font-size: 18px;
min-height: 50px;
}
.article-content {
padding: 15px;
}
.content-wrapper {
flex-direction: column;
}
.sidebar {
flex: 1;
}
}
.article-summary {
color: #666;
font-size: 0.9em;
line-height: 1.5;
margin-top: 8px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.article-image {
background-color: #f8f9fa;
background-image: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
background-size: 200% 200%;
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% -200%;
}
100% {
background-position: 200% 200%;
}
}
.article-checkbox {
position: absolute;
top: 15px;
right: 15px;
width: 18px;
height: 18px;
accent-color: #3498db;
cursor: pointer;
}
.website-card {
position: relative;
overflow: hidden;
}
.website-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.website-card:hover::before {
left: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>绿色课堂文章列表</h1>
<div class="site-header">
{% if site_config.show_title %}
<h1 class="site-title">{{ site_config.site_title }}</h1>
{% endif %}
</div>
<!-- 新增:搜索表单 -->
<div class="search-form">
<form method="get">
<input type="text" name="q" placeholder="输入关键词搜索文章..." value="{{ search_query }}">
@@ -246,19 +556,21 @@
</form>
</div>
<div class="content-wrapper">
<!-- 左侧筛选栏 -->
<div class="sidebar">
<div class="filters">
<strong>按网站筛选：</strong>
<a href="{% url 'article_list' %}{% if search_query %}?q={{ search_query }}{% endif %}"
{% if not selected_website %}class="active" {% endif %}>全部</a>
{% for website in websites %}
<a href="?website={{ website.id }}{% if search_query %}&q={{ search_query }}{% endif %}"
{% if selected_website and selected_website.id == website.id %}class="active" {% endif %}>{{ website.name }}</a>
{% endfor %}
<div class="websites-container">
<div class="website-card {% if not selected_website %}active{% endif %}"
onclick="window.location='{% url 'article_list' %}{% if search_query %}?q={{ search_query }}{% endif %}'">
全部
</div>
{% for website in websites %}
<div class="website-card {% if selected_website and selected_website.id == website.id %}active{% endif %}"
onclick="window.location='?website={{ website.id }}{% if search_query %}&q={{ search_query }}{% endif %}'">
{{ website.name }}
</div>
<!-- 修改:按媒体类型筛选 -->
{% endfor %}
</div>
<div class="content-wrapper">
<div class="sidebar">
<div class="filters">
<strong>按媒体类型筛选：</strong>
<a href="?{% if selected_website %}website={{ selected_website.id }}&{% endif %}{% if search_query %}q={{ search_query }}&{% endif %}media_type=all"
@@ -272,9 +584,7 @@
</div>
</div>
<!-- 主内容区域 -->
<div class="main-content">
<!-- 新增:搜索结果信息 -->
{% if search_query %}
<div class="search-info">
搜索 "{{ search_query }}" 找到 {{ page_obj.paginator.count }} 篇文章
@@ -282,32 +592,52 @@
</div>
{% endif %}
<!-- 新增:导出功能 -->
<div class="export-section">
<button id="selectAllBtn" class="export-btn">全选</button>
<button id="deselectAllBtn" class="export-btn">取消全选</button>
<button id="exportJsonBtn" class="export-btn" disabled>导出为JSON</button>
<button id="exportCsvBtn" class="export-btn" disabled>导出为CSV</button>
<!-- 新增:导出为ZIP包按钮 -->
<button id="exportZipBtn" class="export-btn" disabled>导出为ZIP包</button>
<!-- 删除:按类型导出按钮 -->
<!-- <button id="exportTextOnlyBtn" class="export-btn">导出纯文本</button>
<button id="exportWithImagesBtn" class="export-btn">导出含图片</button>
<button id="exportWithVideosBtn" class="export-btn">导出含视频</button> -->
</div>
<ul>
<div class="articles-grid">
{% for article in page_obj %}
<li>
<input type="checkbox" class="article-checkbox" value="{{ article.id }}"
id="article_{{ article.id }}">
<a href="{% url 'article_detail' article.id %}">{{ article.title }}</a>
<div class="meta">({{ article.website.name }} - {{ article.created_at|date:"Y-m-d" }})</div>
</li>
{% empty %}
<li>暂无文章</li>
<div class="article-card {% if not article.media_files %}no-image{% endif %}">
{% if article.media_files %}
{% for media_file in article.media_files|slice:":1" %}
{% if media_file|slice:"-4:" == ".jpg" or media_file|slice:"-5:" == ".jpeg" or media_file|slice:"-4:" == ".png" or media_file|slice:"-4:" == ".gif" %}
<div class="article-image-container">
{% if media_file|slice:":4" == "http" %}
<img src="{{ media_file }}" alt="{{ article.title }}" class="article-image" onerror="this.parentElement.style.display='none';">
{% else %}
<img src="/media/{{ media_file }}" alt="{{ article.title }}" class="article-image" onerror="this.parentElement.style.display='none';">
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="article-content">
<input type="checkbox" class="article-checkbox" value="{{ article.id }}" id="article_{{ article.id }}">
<h3><a href="{% url 'article_detail' article.id %}">{{ article.title }}</a></h3>
{% if article.content %}
<div class="article-summary">
{{ article.content|striptags|truncatechars:120 }}
</div>
{% endif %}
<div class="article-meta">
<span class="article-source">{{ article.website.name }}</span>
<span class="article-date">{{ article.created_at|date:"Y-m-d" }}</span>
</div>
</div>
</div>
{% empty %}
<div class="article-card">
<div class="article-content">
<p>暂无文章</p>
</div>
</div>
{% endfor %}
</ul>
</div>
<div class="pagination">
{% if page_obj.has_previous %}
@@ -325,7 +655,6 @@
<span>第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页</span>
<!-- 修改:优化页码显示逻辑 -->
{% with page_obj.paginator as paginator %}
{% for num in paginator.page_range %}
{% if page_obj.number == num %}
@@ -369,33 +698,24 @@
</div>
<script>
// 导出功能相关JavaScript
const checkboxes = document.querySelectorAll('.article-checkbox');
const exportJsonBtn = document.getElementById('exportJsonBtn');
const exportCsvBtn = document.getElementById('exportCsvBtn');
const selectAllBtn = document.getElementById('selectAllBtn');
const deselectAllBtn = document.getElementById('deselectAllBtn');
// 新增:获取ZIP导出按钮元素
const exportZipBtn = document.getElementById('exportZipBtn');
// const exportTextOnlyBtn = document.getElementById('exportTextOnlyBtn');
// const exportWithImagesBtn = document.getElementById('exportWithImagesBtn');
// const exportWithVideosBtn = document.getElementById('exportWithVideosBtn');
// 更新导出按钮状态
function updateExportButtons() {
const selectedCount = document.querySelectorAll('.article-checkbox:checked').length;
exportJsonBtn.disabled = selectedCount === 0;
exportCsvBtn.disabled = selectedCount === 0;
exportZipBtn.disabled = selectedCount === 0; // 新增:更新ZIP导出按钮状态
exportZipBtn.disabled = selectedCount === 0;
}
// 为所有复选框添加事件监听器
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', updateExportButtons);
});
// 全选功能
selectAllBtn.addEventListener('click', () => {
checkboxes.forEach(checkbox => {
checkbox.checked = true;
@@ -403,7 +723,6 @@
updateExportButtons();
});
// 取消全选功能
deselectAllBtn.addEventListener('click', () => {
checkboxes.forEach(checkbox => {
checkbox.checked = false;
@@ -411,12 +730,10 @@
updateExportButtons();
});
// 导出为JSON功能
exportJsonBtn.addEventListener('click', () => {
const selectedArticles = Array.from(document.querySelectorAll('.article-checkbox:checked'))
.map(checkbox => checkbox.value);
// 发送POST请求导出文章
fetch('{% url "export_articles" %}', {
method: 'POST',
headers: {
@@ -449,12 +766,10 @@
});
});
// 导出为CSV功能
exportCsvBtn.addEventListener('click', () => {
const selectedArticles = Array.from(document.querySelectorAll('.article-checkbox:checked'))
.map(checkbox => checkbox.value);
// 发送POST请求导出文章
fetch('{% url "export_articles" %}', {
method: 'POST',
headers: {
@@ -487,12 +802,10 @@
});
});
// 新增:导出为ZIP包功能
exportZipBtn.addEventListener('click', () => {
const selectedArticles = Array.from(document.querySelectorAll('.article-checkbox:checked'))
.map(checkbox => checkbox.value);
// 发送POST请求导出文章为ZIP包
fetch('{% url "export_articles" %}', {
method: 'POST',
headers: {
@@ -501,7 +814,7 @@
},
body: JSON.stringify({
article_ids: selectedArticles,
format: 'zip' // 指定导出格式为ZIP
format: 'zip'
})
})
.then(response => {
@@ -525,55 +838,7 @@
});
});
// exportTextOnlyBtn.addEventListener('click', () => {
// exportByMediaType('text_only');
// });
// exportWithImagesBtn.addEventListener('click', () => {
// exportByMediaType('with_images');
// });
// exportWithVideosBtn.addEventListener('click', () => {
// exportByMediaType('with_videos');
// });
// function exportByMediaType(mediaType) {
// // 发送POST请求按类型导出文章
// fetch('{% url "export_articles_by_type" %}', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// 'X-CSRFToken': '{{ csrf_token }}'
// },
// body: JSON.stringify({
// media_type: mediaType,
// format: 'zip'
// })
// })
// .then(response => {
// if (response.ok) {
// return response.blob();
// }
// throw new Error('导出失败');
// })
// .then(blob => {
// const url = window.URL.createObjectURL(blob);
// const a = document.createElement('a');
// a.href = url;
// a.download = `articles_${mediaType}.zip`;
// document.body.appendChild(a);
// a.click();
// window.URL.revokeObjectURL(url);
// document.body.removeChild(a);
// })
// .catch(error => {
// alert('导出失败: ' + error);
// });
// }
// 初始化导出按钮状态
updateExportButtons();
</script>
</body>
</html>
</html>