Django基础教程（六十七）Django实现前端页面框架：魔法书还是编程框架？Django前端搭建让你笑出“模板泪”！

最新推荐文章于 2025-10-12 13:55:20 发布

原创

最新推荐文章于 2025-10-12 13:55:20 发布 · 247 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#django #前端 #python

记得我刚学Django那会儿，对着前端页面一堆重复的导航栏、页脚和侧边栏，每天都在重复CV大法。直到有一天，我盯着屏幕上五个页面里相同的导航栏代码，突然意识到——如果把这玩意儿比作汉堡包，我简直是在为每个汉堡单独发明一次面包！

直到我发现了Django的模板继承系统，那一刻，我的编程生涯仿佛从黑白默片跃入了彩色有声电影。

一、为什么你的前端页面需要“乐高化”？

先来看个真实案例。我曾经的第一个Django项目是个小博客，当时我的页面结构是这样的：

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>我的博客首页</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
</head>
<body>
    <nav class="navbar">...长达30行的导航代码...</nav>
    
    <div class="content">
        <h1>欢迎来到我的博客</h1>
        <p>这里是首页内容...</p>
    </div>
    
    <footer class="footer">...又是20行的页脚代码...</footer>
</body>
</html>
<!-- about.html -->
<!DOCTYPE html>
<html>
<head>
    <title>关于我</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
</head>
<body>
    <nav class="navbar">...完全相同的30行导航代码...</nav>
    
    <div class="content">
        <h1>关于作者</h1>
        <p>这里是关于页面内容...</p>
    </div>
    
    <footer class="footer">...再次重复的20行页脚代码...</footer>
</body>
</html>

发现问题了吗？当我需要修改导航栏时，得把十个页面全都改一遍！这就像是你有十个分身，每次换衣服却要挨个亲自去换——太反人类了！

模板继承就是为解决这个问题而生，它让你可以：

一次修改，全网生效：改导航栏？只需改一个文件！
分工明确：前端专注布局，后端专注数据，完美！
维护性爆表：新同事接手时不会对着重复代码怀疑人生

二、Django模板继承：比你想象的更“智能”

Django的模板系统其实挺像祖传的俄罗斯套娃——大娃娃套小娃娃，每个娃娃还都有自己的特色。

2.1 基础模板：打造你的页面“骨架”

基础模板（base template）就像是你页面的基因，决定了所有后代的长相。来看看一个合格的基础模板长啥样：

<!-- base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}我的酷站{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .main-header { background-color: #2c3e50; }
        {% block extra_css %}{% endblock %}
    </style>
</head>
<body>
    <header class="main-header">
        <nav class="navbar navbar-expand-lg navbar-dark">
            <div class="container">
                <a class="navbar-brand" href="/">我的酷站</a>
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="/about/">关于</a></li>
                </ul>
            </div>
        </nav>
    </header>
    
    <main class="container my-4">
        {% block content %}
        <!-- 这个区域留给子模板填充 -->
        {% endblock %}
    </main>
    
    <footer class="bg-light text-center py-3 mt-5">
        <div class="container">
            <p>&copy; 2023 我的酷站. 保留所有权利。</p>
        </div>
    </footer>
    {% block extra_js %}{% endblock %}
</body>
</html>

看到那些{% block %}标签了吗？它们就像是在说：“