Python Web开发：基于Django模板的静态资源配置

准备静态文件

创建静态模板

在homeApp文件夹下新建templates文件夹，

引用静态资源

在该文件夹下新建home.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>恒达科技(教学示例网站)</title>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

<body>
</body>
</html>

代码中引入了{% load staticfiles %},通过导入它可以在页面中通过关键字static定位到项目的静态资源。

编写静态页面

在刚才的页面<body>中做如下替换：

<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example" aria-expanded="false">
                    <span>导航栏</span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example">
                <ul class="nav navbar-nav" style="width:100%;">
                    <li class="active nav-top">
                        <a href="{% url 'home' %}">首页</a>
                    </li>
                    <li class="dropdown nav-top">
                        <a href="#" class="dropdown-toggle on" data-toggle="dropdown">
                            公司简介</a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'aboutApp:survey' %}">企业概况</a></li>
                            <li><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></li>
                        </ul>
                    </li>

                    <li class="dropdown nav-top">
                        <a href="#" class="dropdown-toggle on" data-toggle="dropdown">
                            新闻动态</a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'newsApp:company' %}">公司要闻</a></li>
                            <li><a href="{% url 'newsApp:industry' %}">行业新闻</a></li>
                            <li><a href="{% url 'newsApp:notice' %}">通知公告</a></li>
                        </ul>
                    </li>
                    <li class="dropdown nav-top">
                        <a href="#" class="dropdown-toggle on" data-toggle="dropdown">
                            产品中心</a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'productsApp:robot' %}">
                                    家用机器人</a></li>
                            <li><a href="{% url 'productsApp:monitoring' %}">
                                    智能监控</a></li>
                            <li><a href="{% url 'productsApp:face' %}">
                                    人脸识别解决方案</a></li>
                        </ul>
                    </li>
                    <li class="dropdown nav-top">
                        <a href="#" class="dropdown-toggle on" data-toggle="dropdown">
                            服务支持</a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'serviceApp:download' %}">
                                    资料下载</a></li>
                            <li><a href="{% url 'serviceApp:platform' %}">
                                    人脸识别开放平台</a></li>
                        </ul>
                    </li>
                    <li class="nav-top">
                        <a href="{% url 'scienceApp:science' %}">科研基地</a>
                    </li>
                    <li class="dropdown nav-top">
                        <a href="#" class="dropdown-toggle on" data-toggle="dropdown">
                            人才招聘</a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'contactApp:contact' %}">欢迎咨询</a></li>
                            <li><a href="{% url 'contactApp:recruit' %}">加入恒达</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

其中，href属性使用了django模板标签{% url'逆向路径‘ %}，寻找方式采用“应用名：函数名”的形式。应用名如果没有可以不使用

这种逆向网址解析的方式主要是为了方便变换根访问路径。

视图处理函数

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')

配置文件更改

告诉django模板当前共享的静态资源位置。

hengDaProject/settings.py:

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)