Flask模板继承

优点

• 代码重用：避免重复的HTML结构
• 一致性：保持网站外观统一
• 易于维护：修改一处，全局生效
• 模块化：分离结构和内容
• 灵活性：可覆盖或扩展特定部分

{% extends "base.html" %}

{# 覆盖标题块 #}
{% block title %}欢迎来到我的网站 - 首页{% endblock %}

{# 添加额外的CSS #}
{% block styles %}
<style>
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 100px 0;
        border-radius: 10px;
        margin-bottom: 40px;
    }

    .feature-card {
        transition: transform 0.3s;
    }

    .feature-card:hover {
        transform: translateY(-5px);
    }
</style>
{% endblock %}

{# 覆盖导航栏块 #}
{% block navbar %}
{{ super() }}  {# 包含父模板的内容 #}
<!-- 可以添加额外的导航项 -->
<ul class="navbar-nav ms-auto">
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('blog') }}">
            <i class="fas fa-blog me-1"></i>博客
        </a>
    </li>
</ul>
{% endblock %}

{# 覆盖面包屑项目 #}
{% block breadcrumb_items %}
<li class="breadcrumb-item active" aria-current="page">首页</li>
{% endblock %}

{# 覆盖主内容块 #}
{% block content %}
<!-- 英雄区域 -->
<div class="hero-section text-center">
    <h1 class="display-4 fw-bold">欢迎来到我们的网站</h1>
    <p class="lead">我们提供最优质的服务和最先进的解决方案</p>
    <a href="{{ url_for('about') }}" class="btn btn-light btn-lg mt-3">
        了解更多
    </a>
</div>

<!-- 特性展示 -->
<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card feature-card h-100">
            <div class="card-body text-center">
                <i class="fas fa-bolt fa-3x text-primary mb-3"></i>
                <h5 class="card-title">快速高效</h5>
                <p class="card-text">我们的服务响应迅速，确保最佳用户体验。</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card feature-card h-100">
            <div class="card-body text-center">
                <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                <h5 class="card-title">安全可靠</h5>
                <p class="card-text">采用最先进的安全技术保护您的数据。</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card feature-card h-100">
            <div class="card-body text-center">
                <i class="fas fa-headset fa-3x text-warning mb-3"></i>
                <h5 class="card-title">优质支持</h5>
                <p class="card-text">24/7客户支持，随时为您解决问题。</p>
            </div>
        </div>
    </div>
</div>

<!-- 动态内容 -->
{% if recent_posts %}
<div class="mt-5">
    <h2 class="mb-4">最新文章</h2>
    <div class="row">
        {% for post in recent_posts %}
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <p class="card-text">{{ post.excerpt|truncate(100) }}</p>
                    <small class="text-muted">
                        <i class="fas fa-calendar me-1"></i>
                        {{ post.created_at|date('Y-m-d') }}
                    </small>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <a href="{{ url_for('post_detail', slug=post.slug) }}"
                       class="btn btn-outline-primary btn-sm">
                        阅读更多
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}

{# 添加额外的JavaScript #}
{% block scripts %}
<script>
    // 首页特定的JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        console.log('首页加载完成');

        // 为特性卡片添加点击事件
        document.querySelectorAll('.feature-card').forEach(card => {
            card.addEventListener('click', function() {
                this.classList.toggle('shadow-lg');
            });
        });
    });
</script>
{% endblock %}

{% extends "base.html" %}

{% block title %}关于我们 - 我的网站{% endblock %}

{% block styles %}
<style>
    .team-member {
        text-align: center;
        padding: 20px;
    }

    .team-member img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
    }

    .timeline {
        position: relative;
        padding-left: 30px;
    }

    .timeline:before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #007bff;
    }
</style>
{% endblock %}

{% block breadcrumb_items %}
<li class="breadcrumb-item active" aria-current="page">关于我们</li>
{% endblock %}

{% block content %}
<h1 class="mb-4">关于我们</h1>

<div class="row">
    <div class="col-lg-6">
        <h2>我们的故事</h2>
        <p>我们成立于2010年，一直致力于为客户提供最优质的技术解决方案。</p>
        <p>我们的使命是通过创新技术让世界变得更美好。</p>
    </div>
    <div class="col-lg-6">
        <h2>我们的价值观</h2>
        <ul>
            <li><strong>创新</strong>：不断探索新技术</li>
            <li><strong>诚信</strong>：诚实对待每一位客户</li>
            <li><strong>卓越</strong>：追求最高标准的质量</li>
            <li><strong>合作</strong>：团队合作共创价值</li>
        </ul>
    </div>
</div>

<!-- 时间线 -->
<div class="mt-5">
    <h2>发展历程</h2>
    <div class="timeline mt-4">
        {% for milestone in milestones %}
        <div class="mb-4 position-relative">
            <div class="position-absolute" style="left: -30px; top: 0;">
                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                     style="width: 30px; height: 30px;">
                    {{ loop.index }}
                </div>
            </div>
            <h5>{{ milestone.year }} - {{ milestone.title }}</h5>
            <p>{{ milestone.description }}</p>
        </div>
        {% endfor %}
    </div>
</div>

<!-- 团队成员 -->
<div class="mt-5">
    <h2 class="mb-4">我们的团队</h2>
    <div class="row">
        {% for member in team_members %}
        <div class="col-md-4 mb-4">
            <div class="team-member">
                <img src="{{ member.avatar }}" alt="{{ member.name }}">
                <h5>{{ member.name }}</h5>
                <p class="text-muted">{{ member.position }}</p>
                <p>{{ member.bio }}</p>
                <div>
                    {% if member.linkedin %}
                    <a href="{{ member.linkedin }}" class="text-decoration-none me-2">
                        <i class="fab fa-linkedin fa-lg"></i>
                    </a>
                    {% endif %}
                    {% if member.github %}
                    <a href="{{ member.github }}" class="text-decoration-none me-2">
                        <i class="fab fa-github fa-lg"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block footer %}
{# 完全覆盖页脚，不显示父模板内容 #}
<footer class="bg-dark text-white py-4 mt-5">
    <div class="container text-center">
        <p>© 2023 关于页面特别页脚</p>
        <p><small>这个页面的页脚与基础模板不同</small></p>
    </div>
</footer>
{% endblock %}

{# 父模板 #}
{% block head %}
<meta name="description" content="默认描述">
<link rel="stylesheet" href="/css/base.css">
{% endblock %}

{# 子模板 #}
{% block head %}
{{ super() }}  {# 包含父模板的内容 #}

{# 添加额外内容 #}
<meta name="keywords" content="额外关键字">
<link rel="stylesheet" href="/css/custom.css">
{% endblock %}

<meta name="description" content="默认描述">
<link rel="stylesheet" href="/css/base.css">

<meta name="keywords" content="额外关键字">
<link rel="stylesheet" href="/css/custom.css">

父模板内容 + 子模板内容