Python Web开发：共享模板的使用 实训

介绍

应用共享模板有关知识，

对主页应用共享模板。

实训步骤

应用共享模板

打开homeApp应用下的templates文件夹，编辑home.html,代码如下：

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
主页
{% endblock %}


{% block content %}
<!-- 广告横幅 -->
<div class="container-fluid">
    <div class="row">
        <img class="img-responsive model-img" src="{% static 'img/science.jpg' %}" alt="科研基地">
    </div>
</div>
<div class="container">
    <!-- 主体标题 -->
    <div class="model-details-title">
        主页
    </div>

</div>
{% endblock %}

为导航链接标签<li>设置id号

base.html 为首页添加home的id号:

<li class="nav-top" id="home">
                        <a href="{% url 'home' %}">首页</a>
                    </li>

设置JS动态添加active属性

base.html:

    <script type="text/JavaScript">
        $('#{{active_menu}}').addClass("active");
    </script>

向模板传递active_menu变量

homeApp/views.py:

from django.shortcuts import render
from django.shortcuts import HttpResponse


# Create your views here.
def home(request):
    return render(request, 'home.html',{'active_menu':'home',})

效果