Django重构基础模板

最新推荐文章于 2020-12-14 10:34:12 发布

chengqiuming

最新推荐文章于 2020-12-14 10:34:12 发布

阅读量238

点赞数

分类专栏： Django 文章标签： Django

本文链接：https://blog.csdn.net/chengqiuming/article/details/85038223

版权

Django 专栏收录该内容

105 篇文章 6 订阅

订阅专栏

一点睛

一般来说，网站界面可以大致分为上、中、下三个部分。

上部是头部，显示网站的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 内容页

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django重构基础模板

一点睛一般来说，网站界面可以大致分为上、中、下三个部分。上部是头部，显示网站的LOGO和导航。中部是要显示的具体内容。下部显示网站的版权信息或者联系方式、购买流程等不怎么发生变化的信息或超链接。二代码重构1 重构后的基础模板代码结构2 新建mysite/templates/header.html&lt;!--模板中声明引入静态文件的标签，只有使用它 sta...
复制链接

扫一扫

专栏目录