本次blog系统的全端使用了django模板,而不是jinjia2。
为了让整个网站系统具有整齐的布局,同时页面的各个部分具有可复用性。一般从如下几点考虑:
1、将index页面拆分几块。各个页面都继承自base。可变部分可以定义在block中,公用模板可以使用include
2、base的布局如下:
{% load staticfiles %} <!doctype html> <html> <head> <meta charset="utf-8"> <title>{{ site_name }}</title> <meta name="keywords" content="{{ site_name }}"/> <meta name="description" content="{{ site_desc }}"/> <link href='{% static "base/css/base.css" %}' rel="stylesheet"> <link href='{% static "base/css/index.css" %}' rel="stylesheet"> {% block customer_css %}{% endblock %} <script type="text/javascript" src='{% static "jquery/jquery-3.1.1.js" %}'></script> <script type="text/javascript" src='{% static "base/js/sliders.js" %}'></script> {% block customer_js %}{% endblock %} </head> <body> <header> {% include "main/header.html" %} </header> <article> <div class="l_box f_l"> {% include "main/ad.html" %} <!-- banner代码 结束 --> {% block content %}{% endblock %} </div> {% include "main/right.html" %} </article> <footer> {% include "main/footer.html" %} </footer> </body> </html>
其他各个页面继承自base.html
{% extends "main/base.html" %}
3、注意使用{% load staticfiles %}来引入静态文件。
下一步,我们将在首页显示所有的文章,同时分页显示。