四、Django自定义模板和静态文件位置

2020-12-31 本文已影响0人途中的蜗牛

在大一点的系统中，并不建议把模板和静态文件分散到各个应用中，而是建议都放在指定的某个位置。

1、自定义模板位置

将模板位置都放在根目录下的templates文件夹中
（1）创建templates文件夹
（2）修改./mysite/settings.py如下，主要是TEMPLATES 中的DIRS和APP_DIRS变量

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),],   # BASE_DIR本项目的根目录，模板的位置放在本目录下的templates文件夹中
        'APP_DIRS': False,  # 不在允许Django按照默认的方式寻找模板文件。
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2、自定义静态文件位置

静态文件包含CSS、JavaScript、图片等，建议将所有的静态文件都存在指定的目录。编辑./mysite/settings.py，增加如下的代码：

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

这样就可以通过http://127.0.0.1:8000/static/1.jpg来访问到图片文件了

3、通用的静态文件和基础模板

3.1、通用的静态文件

将静态文件包含CSS、JavaScript、图片比如jquery和bootstrap等相关文件分别放在static文件夹中。

3.2、通用的基础模板

，网页的界面一般分为上中下三部分，可以将上面的头部和下面的底部做成基础模板，在./templates文件夹中创建header.html和footer.html。
（1）header.html代码如下：

{% load staticfiles %}   <!-- 声明引入静态文件的标签，这样以下才可以用{% static%}来引入某个静态文件-->
<div class="container">
    <nav class="navbar navbar-default" role="navigation"> 
        <div class="navbar-header">
        </div>
        <div>
            <ul class="nav navbar-nav" role="navigation">
                <li><a href="{% url 'blog:blog_title' %}">BLOG</a></li>  <!-- 使用的是urls.py中的name或者namespace来表示地址 -->
            </ul>
            <ul class="nav navbar-nav navbar-right" style="margin-right:10px"> 
                <li><a href="#">LOGIN</a></li>                              
            </ul> 
        </div>
    </nav>
</div>

其中：

{% load staticfiles %} 声明引入静态文件的标签，这样以下代码才可以用{% static '/images/logo.png' %}来引入某个静态文件，而不是硬编码的方式来写入图片地址
{% url 'blog:blog_title' %}使用的是urls.py中的name或者namespace来表示地址，而不是硬编码。
（2）footer.html

<div class="container"> <hr>
    <p class="text-center">good good study, day day up</p> 
</div>

（3）重写base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
</head>
    <body>
        {% include "header.html" %}
        <div class="container">
            {% block content %}
            {% endblock %}
        </div>
        {% include "footer.html" %}
        {% block javascript %}
        {% endblock %}
    </body>
</html>

原来的blog应用不需要做任何的修改，再次刷新页面，就会呈现不一样的页面效果。

4、重置管理后台模板

由于在第一步已经修改了模板的位置，因此如果打开http://127.0.0.1:8000/admin/则会出现错误，需要将Django中的默认模板admin和registration两个目录都复制到这项目的./templates里面。