zoukankan      html  css  js  c++  java
  • Blog_Django(五):blog的页面布局:模板、过滤器

    本次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

    其他各个页面继承自base.html

    {% extends "main/base.html" %}

    3、注意使用{% load staticfiles %}来引入静态文件。

    下一步,我们将在首页显示所有的文章,同时分页显示。

  • 相关阅读:
    项目经验:如何做到不和产品打起来
    leetcode-剑指30-OK
    leetcode-剑指05-OK
    leetcode-剑指58-OK
    leetcode-剑指28-OK
    leetcode-剑指53-I
    leetcode-剑指18-OK
    leetcode-剑指15-OK
    leetcode-剑指27-OK
    leetcode-剑指17-OK
  • 原文地址:https://www.cnblogs.com/yangshl/p/6505393.html
Copyright © 2011-2022 走看看