Django基础教程（七十五）Django导航栏组件之实现导航栏前端组件：手把手深度分析：把Django导航栏组件打造成你项目的“超级管家”

最新推荐文章于 2025-11-25 14:10:45 发布

原创

最新推荐文章于 2025-11-25 14:10:45 发布 · 431 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#django #前端 #sqlite

一、为啥要折腾“组件化”？—— 从“石器时代”到“工业革命”

想象一下，你项目最初的那个导航栏，可能长这样：一个朴素的<div>里面包着几个<a>标签，分散在index.html， about.html， blog.html等无数个文件里。

突然！产品经理小哥哥微笑着走过来：“哥们儿，咱们在导航栏加个‘热门活动’的入口吧，很急，在线等！”

然后你就开始了：打开index.html，加一个<li>。打开about.html，复制，粘贴。打开blog.html，复制，粘贴……等所有八十个页面都改完，你发现，index.html里那个链接的class好像拼写错了。于是，新一轮的“寻宝修改之旅”又开始了。

血压是不是有点上来了？

这就是我们为什么要搞组件化！它的核心思想就一句话：把公共的部分抽出来，放在一个单独的文件里，谁需要就“叫”它一声。

在Django里，这个“叫”一声的神奇咒语就是 {% include 'navbar.html' %}。以后修改导航栏？你只需要动navbar.html这一个文件，全站所有页面自动同步更新！这种感觉，就像从用石头刻字的“石器时代”，一步跨入了活字印刷的“文明时代”，爽不爽？

二、核心装备库：Django模板语言的“两把刷子”

要实现这个宏伟蓝图，你得先熟悉Django模板系统的两大神器：

{% include %} 标签： 传说中的“乾坤大挪移”。它的作用就是在一个模板里，直接把另一个模板的内容整个“搬运”过来。

<!-- 在 base.html 或者任何页面里 -->
<body>
  {% include 'components/navbar.html' %} <!-- 看，导航栏进来了！ -->
  {% block content %}{% endblock %} <!-- 页面自己的内容 -->
</body>

简单、粗暴、有效！

{% block %} 标签： “画框的人”。它定义了一个可以被子模板覆盖的“区块”。这通常和{% extends %}（模板继承）一起用，是搭建页面骨架的基石。

<!-- base.html -->
<html>
<head><title>{% block title %}默认标题{% endblock %}</title></head>
<body>
  {% include 'components/navbar.html' %}
  <div class="container">
    {% block content %}
    <!-- 这个空洞等着子模板来填呢 -->
    {% endblock %}
  </div>
</body>
</html>
<!-- about.html -->
{% extends 'base.html' %}
{% block title %}关于我们 - 我的酷站{% endblock %}
{% block content %}
  <h1>这里是关于我们