学习Python的Django系列五：自定义模板的相关内容---优快云博客

本文链接：https://blog.youkuaiyun.com/yangwenjie12/article/details/80305949

此章节较短，只是一个配置。不过对代码可读性来说，很重要。因此单独拿出来，构建代码时可按照此思路。

  一、配置自定义模板和静态文件的位置 

  1.其中templates的配置我们已经在上一章讲过了。类似的，接下来配置静态文件位置，在根目录下添加static文件夹，修改BlogProject/settings.py， 
 在STATIC_URL = '/static/'下添加： 

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

  在static文件夹中建立子文件，并从网上下载拷贝需要js、jQuery和css等资源文件。 

  （1）下载bootstrap相关的css和js.fonts 

 
 https://v3.bootcss.com/getting-started/#download 

  解压拷贝至我们新建的目录中。 

  jQuery下载： 
 https://jquery.com/download/ 

 
 2.重新制作基础模板 

 
 （1）制作头部和底部。 

 
 在template中新建header.html和footer.html。 

 
 header.html代码如下： 

{% load staticfiles %}
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class = "navbar-brand" href="https://blog.youkuaiyun.com/yangwenjie12"><img src="{% static '/images/logo.png' %}" width="100px" height="35px"></a>
        </div>

        <div>
            <ul class="nav navbar-nav" role="navigation">
                <li><a href="{% url 'blog:blog_title' %}">BLOG</a> </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">LOGIN</a> </li>
            </ul>
        </div>
    </nav>
</div>

  footer.html代码如下： 

<div>
    <hr>
    <p class="text-center">copy right csdn-yangwenjie12</p>
</div>

  重写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>

  重新启动django服务，然后重新访问看效果： 
 http://127.0.0.1:8000/blog/ 

 
 此时有个报错： 

 
 解决方法：在BlogProject\Blog\urls.py中添加app_name='blog'即可。解决bug比较有意思。。。遇到问题建议先自己解决一下。 

  重新访问，看效果： 