Files
server/templates/front/details/news.html
T

62 lines
2.9 KiB
HTML

{% extends 'base.html' %}
{% block title %}{{ article.section.title }} - 长白山消防救援支队{% endblock %}
{% block content %}
<div class="container mt-4">
<!-- 1. 面包屑导航 -->
<nav aria-label="breadcrumb" style="margin-left: -10px;">
<ol class="breadcrumb" style="background-color: transparent !important; padding-bottom: 0;">
<li class="breadcrumb-item"><a href="/">网站首页</a></li>
<!-- 动态显示所属板块 -->
<li class="breadcrumb-item"><a href="{% url "front:news_main" %}">{{ article.section.parent.title }}</a>
</li>
<li class="breadcrumb-item"><a
href="{% url "front:news_list" article.section.code %}">{{ article.section.title }}</a></li>
<li class="breadcrumb-item active" aria-current="page">文章详情</li>
</ol>
</nav>
<!-- 2. 文章主体内容 -->
<div class="row justify-content-center mt-4">
<div class="col-lg-10">
<!-- 文章头部信息 -->
<div class="text-center mb-5">
<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><i class="bi bi-eye"></i> 阅读数:{{ article.views|default:0 }}</span>
</div>
</div>
<!-- 封面图 (如果有) -->
{% 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;">
</div>
{% endif %}
<!-- 正文内容 -->
<div class="article-content mb-5" style="line-height: 1.8; font-size: 1.1rem; color: #333;">
{{ article.content|safe }}
</div>
<!-- 4. 底部操作栏 -->
<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>
<a href="/" class="btn btn-primary btn px-3">
<i class="bi bi-house-door-fill"></i> 返回首页
</a>
</div>
</div>
</div>
</div>
{% endblock %}