django搭建博客四页面布局和自定义异常视图

2022年04月22日 2评论 1860阅读 2喜欢

页面布局

nav.html

新建\myblog\templates\layout，该文件夹用来存放页面组件。

新增\myblog\templates\layout\nav.html

添加以下内容,nav.html则是页面头部导航条内容，由于现在还没有完成文章的逻辑，这块的文章分类暂时还不做

<nav class="navbar fixed-top navbar-expand-xl navbar-light t-navigation">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
            aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand  text-white">我的博客</a>
    <div class="collapse navbar-collapse" id="navigation">
        {#   文章分类      #}
        <ul class="navbar-nav mr-auto pull-left">
            <li class="nav-item ">
                <a class="nav-link text-white" target="_blank" href="" id="about" aria-haspopup="true"
                   aria-expanded="false">
                    <i class="fa fa-home"></i>编程
                </a>
            </li>
        </ul>
        <div class="d-flex pull-right">
            <form class="form-inline my-2 my-lg-0" method="get" action="">
                <input class="form-control mr-sm-2 rounded-pill" type="text" placeholder="搜索本站文章" aria-label="Search"
                       name="q">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <div class="d-inline-block">
                <a class="btn btn-outline-success my-2 my-sm-0 ml-lg-2" type="button"
                   href="">登陆</a>
                <a class="btn btn-outline-success my-2 my-sm-0 ml-lg-2" type="button"
                   href="">注册</a>
            </div>

        </div>

    </div>

</nav>

jumbotron.html

新增\myblog\templates\layout\jumbotron.html

添加以下内容,jumbotron.html则是页面中间的大图展示内容

<div style="position:relative;">
    <div class="jumbotron new-jumbotron"
         style="background-image:url('/static/images/cover.jpg');background-position: 50% 30%">
        <div class="container text-center cover-desc">
            <p>
                <font size="6" face="华文行楷" color="#fff">寄言燕雀莫相唣</font><br>
                <font size="6" face="华文行楷" color="#fff">自有云霄万里高</font>
            </p>
            <button type="button" class="btn btn-outline-success rounded-pill text-reset" id="start-view"><i
                    class="fa fa-angle-double-down mr-2" aria-hidden="true"></i>开始浏览
            </button>
        </div>
    </div>
</div>

footer.html

新增\myblog\templates\layout\footer.html

添加以下内容,footer.html则是页面底部的内容

<div id="footer">
    {# 站点底部内容 #}
    <div class="container">
        <div class="row">
            <div class="my-3 col-md-6 offset-md-3 text-center">
                <p class="text-muted">©2020
                    <a href="" class="text-white-50 ">我的博客</a>.All Rights Reserved<br>
                    <a id="StranLink" class="text-white-50 ">繁體切换</a>
                    |
                    <a href="" target="_blank" rel="nofollow"
                       class="text-white-50 ">站点地图</a><br>
                    <a href="http://beian.miit.gov.cn" rel="external nofollow" target="_blank"
                       class="text-white-50 ">
                        <i class="govimg"></i>此处填写备案号
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

base.html

新增\myblog\templates\layout\base.html

base.html会通过django的template机制通过include标签引入footer.html,nav.html,jumbotron.html。同时后续的所有的页面html都会通过extend机制继承base.html，也就是说把页面公共的部分提取出来了，生下来的主内容区域即是变动的内容。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>个人博客</title>
    <meta name="description" content="基于django的博客"/>
    <meta name="keywords" content="django,python"/>
    <script src="{% static '/js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static '/js/jquery.form.min.js' %}"></script>
    <link rel="stylesheet" href="{% static '/font-awesome/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/css/bootstrap.css' %}">
    <script src="{% static '/js/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static '/css/blog.css' %}">
    <link rel="stylesheet" href="{% static '/css/hover-min.css' %}">
    <script src="{% static '/js/blog.js' %}"></script>
    {#  有的页面有自己要加载的静态文件   #}
    {% block other_static_file %}
    {% endblock %}
</head>
<body class="animated">
{#头部内容#}
<header>
    {% include 'layout/nav.html' %}

    {% block  jumbotron %}
        {% include 'layout/jumbotron.html' %}
    {% endblock %}
</header>

{#页面主内容#}
<main role="main">

    {% block main %}
    {% endblock %}

</main>

{#底部内容#}
<footer>
    {% include 'layout/footer.html' %}
</footer>
<script type="text/javascript" src="{% static 'js/sakura.js' %}"></script>
<script type="text/javascript" src="{% static '/js/commentTyping.js' %}"></script>
<script src="{% static 'js/sweetalert.js' %}"></script>
<script src="{% static '/js/zh-cn-tw.js' %}"></script>
</body>
</html>

最终效果如下

]

异常配置

404.html

新建\myblog\templates\404.html

{% extends 'base.html' %}
{% load static %}
{% block  jumbotron %}
{% endblock %}
{% block main %}


    <div class="container">
        <div class="jumbotron text-center">
            <p><img src="{% static '/images/404.png' %}" width="520" height="320"/></p>
            <p>wow~这个页面被外星人抢走了~</p>
            <p><a class="btn btn-primary btn-lg" href="{% url 'index' %}" role="button">回到主页</a>
            </p>
        </div>
    </div>

{% endblock %}

效果图如下：
在这里插入图片描述

403.html

新建\myblog\templates\403.html

{% extends 'base.html' %}
{% load static %}
{% block  jumbotron %}
{% endblock %}
{% block main %}

    <div class="container">
        <div class="jumbotron" style="text-align:center;">
            <p><img src="{% static '/images/403.png' %}" width="520" height="320"/></p>
            <p>wow~这个页面禁止访问~</p>
            <p><a class="btn btn-primary btn-lg" href="{% url 'index' %}" role="button">回到主页</a></p>
        </div>
    </div>
{% endblock %}

效果图如下：
在这里插入图片描述

500.html

新建\myblog\templates\500.html

{% extends 'base.html' %}
{% load static %}
{% block  jumbotron %}
{% endblock %}
{% block main %}
    <div class="container mw-100">
        <div class="jumbotron" style="text-align:center;">
            <p><img src="{% static '/images/500.png' %}" width="520" height="320"/></p>
            <p>wow~服务器出错了~</p>
            <p><a class="btn btn-primary btn-lg" href="{% url 'index' %}" role="button">回到主页</a></p>
        </div>
    </div>
{% endblock %}

效果图如下：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N3CFRCHM-1650624641542)(assets/1650624010721.png)\]

自定义异常处理视图

新增\myblog\system\exception.py

from django.shortcuts import render


def page_not_found(request, exception):
    response = render(request=request,template_name="404.html")
    response.status_code = 404
    return response


def page_error(request):
    response = render(request=request,template_name="500.html")
    response.status_code = 500
    return response


def forbidden_request(request, exception):
    response = render(request=request,template_name="403.html")
    response.status_code = 403
    return response

配置异常处理视图

编辑\myblog\urls.py

追加以下内容

# 全局页面错误提示配置(DEBUG=False下使用)
if not settings.DEBUG:
    handler404 = "system.exception.page_not_found"
    handler403 = "system.exception.forbidden_request"
    handler500 = "system.exception.page_error"
© 著作权归作者所有,欢迎转载，转载请说明出处：未雨晴空博客,谢谢理解！
python django
最后编辑：
上一篇 下一篇
  1. qqq
    2023-05-27 23:05:35

    博主，base.html中使用的css和js可以分享一下吗

    回复
    1. admin qqq
      2023-05-29 08:05:46

      这些静态文件本站都有，可自行抓取。

      回复

发表评论 取消回复

电子邮件地址不会被公开。

请输入以http或https开头的URL,格式如:https://oneisall.top