一 点睛
一般来说,网站界面可以大致分为上、中、下三个部分。
上部是头部,显示网站的LOGO和导航。
中部是要显示的具体内容。
下部显示网站的版权信息或者联系方式、购买流程等不怎么发生变化的信息或超链接。
二 代码重构
1 重构后的基础模板代码结构
2 新建mysite/templates/header.html
<!--模板中声明引入静态文件的标签,只有使用它 static才能使用-->
{% load staticfiles %}
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="https://blog.csdn.net/chengqiuming"><img src="{% static '/images/logo.png' %}" width="100px"></a>
</div>
<div>
<ul class="nav navbar-nav" role="navigation">
<!--blog是urlpatterns中定义的namespace,blog_title是视图函数-->
<li><a href="{% url 'blog:blog_title' %}">记录我的点点滴滴</a></li>
</ul>
</div>
</nav>
</div>
3 新建mysite/templates/footer.html
<div class="container">
<p class="text-center">版权 https://blog.csdn.net/chengqiuming</p>
</div>
4 重构mysite/templates/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 javascritp %}{% endblock %}
</body>
</html>
三 测试重构结果
1 标题页
2 内容页