update. 完成分类显示与详情页显示效果

This commit is contained in:
2026-04-01 18:54:42 +08:00
parent 777ca50328
commit 414dc0ee95
23 changed files with 359 additions and 707 deletions
+28 -25
View File
@@ -24,7 +24,8 @@
<h1 class="fw-bold mb-3">{{ article.title }}</h1>
<div class="text-muted small">
<span class="me-3"><i class="bi bi-clock"></i> {{ article.created_at|date:"Y-m-d H:i" }}</span>
<span class="me-3"><i class="bi bi-person"></i> {{ article.author.username|default:"管理员" }}</span>
<span class="me-3"><i
class="bi bi-person"></i> {{ article.author.username|default:"管理员" }}</span>
<span><i class="bi bi-eye"></i> 阅读数:{{ article.views|default:0 }}</span>
</div>
</div>
@@ -32,7 +33,8 @@
<!-- 封面图 (如果有) -->
{% if article.cover %}
<div class="mb-4 text-center">
<img src="{{ article.cover.url }}" alt="{{ article.title }}" class="img-fluid rounded shadow-sm" style="max-height: 400px; width: 100%; object-fit: cover;">
<img src="{{ article.cover.url }}" alt="{{ article.title }}" class="img-fluid rounded shadow-sm"
style="max-height: 400px; width: 100%; object-fit: cover;">
</div>
{% endif %}
@@ -40,32 +42,33 @@
<div class="article-content mb-5" style="line-height: 1.8; font-size: 1.1rem; color: #333;">
{{ article.content|safe }}
</div>
<!-- 3. 附件列表 (如果有附件) -->
{% if article.attachments_list %}
<div class="card bg-light mb-5">
<div class="card-header">
<i class="bi bi-paperclip"></i> 相关附件
</div>
<ul class="list-group list-group-flush">
{% for attachment in article.attachments_list %}
<li class="list-group-item bg-transparent">
<a href="{{ attachment.file.url }}" target="_blank" class="text-decoration-none">
<i class="bi bi-file-earmark-text"></i>
<!-- 截取文件名显示,防止太长 -->
{{ attachment.file.name|slice:"30:" }}
</a>
<span class="text-muted small float-end">
{% with attachments=article.attachments.all %}
<!-- 3. 附件列表 (如果有附件) -->
{% if attachments %}
<div class="card bg-light mb-5">
<div class="card-header">
<i class="bi bi-paperclip"></i> 相关附件
</div>
<ul class="list-group list-group-flush">
{% for attachment in attachments %}
<li class="list-group-item bg-transparent">
<a href="{{ attachment.file.url }}" target="_blank"
class="text-decoration-none">
<i class="bi bi-file-earmark-text"></i>
<!-- 截取文件名显示,防止太长 -->
{{ attachment.file.name|slice:"30:" }}
</a>
<span class="text-muted small float-end">
{{ attachment.uploaded_at|date:"Y-m-d" }}
</span>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
<!-- 4. 底部操作栏 -->
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center border-top pt-4 mt-5">
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center border-top pt-4 mt-5" style="gap: 30px;">
<a href="javascript:history.back()" class="btn btn-outline-secondary btn px-3">
<i class="bi bi-arrow-left"></i> 返回上一页
</a>