当前位置：首页 > article >正文

Django 项目模块化开发指南：实现 Vue 风格的组件化

article 2025/3/4 15:13:28

在 Django 项目中，我们经常需要 复用 HTML 代码，避免重复编写相同的模板。例如，博客系统中，博客列表页 和 文章详情页 可能都有相同的 导航栏、模态框、页脚 等。如何像 Vue 一样进行 模块化开发，让代码更加清晰、可维护呢？
本文将详细介绍 Django 的模板继承 和 {% include %} 组件化开发，帮助你构建更清晰的 Django 项目。

📌 1. Django 模板继承：实现全局布局

在 Vue 中，我们通常有一个 App.vue 作为全局布局，在其中嵌套各个组件。在 Django 里，我们可以用 base.html 作为主模板，让所有页面继承它，避免重复代码。

🔹 创建 `base.html`

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}我的博客{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>

    <header>
        <h1>我的博客</h1>
    </header>

    <nav>
        <ul>
            <li><a href="{% url 'home' %}">首页</a></li>
            <li><a href="{% url 'blog_list' %}"