2017年9月17日 星期日

[Django] Custom Home page and 404 page

 Python   Django  






Introduction


We will use View and Template to create a basic home page and custom 404 page.



Python 3.6.2
Django 1.11.5



Implement


Create an app

Go the the root of your Django project and use the following command to create an app with MTV.

$ python manage.py startapp app

The project now looks like this…

 


Templates

We are going to create these HTML files(pages):
1.  index.html
2.  404.html
3.  500.html
4.  base.html




Lets use Django template language on base.html to make it a base page for others.

base.html

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8" />
    <title>{% block title %}django-sample{% endblock %}</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>

<body>
<ol class="breadcrumb">
        <li class="breadcrumb-item active">Powered by Django</li>
    </ol>
    <div class="jumbotron">
        <h1 class="display-3">{% block header %}{% endblock %}</h1>
        <p class="lead">
            {% block content %} {% endblock %}
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="{% url 'home' %}" role="button">Home</a>
            </p>
    </div>
</body>

</html>

Notice template tag: {% url 'home' %} will bind the url pattern which named “home”.
We will update the url patterns later.


After the base.html is done, write the header and content for other HTML.
I will only make a sample for index.html

index.html

{% extends "base.html" %}
{% block header %}HOME{% endblock %}
{% block content %}
Welcome to django!
{% endblock %}



Furthermore, we have to tell django to use our new Templates in path: $shopcart/app/templates
Open settings.py and update the TEMPLATES: DIRS value like this,

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'app/templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


          

Views

In app/views.py, we will create the mapping functions for getting a Http request and sending a Http response.

views.py

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, 'index.html')

def handler404(request):
    return render(request, '404.html')

def handler500(request):
    return render(request, '500.html')


Notice that when we define functions like handler{HttpStatusCode}, django will automatically response the custom template page for the HttpStatusCode. No need to set url patterns on them.



Update url patterns

urls.py

from django.conf.urls import url
from django.contrib import admin
from app.views import home

urlpatterns = [
    url(r'^$', home, name='home'),
    url(r'^admin/', admin.site.urls),
]




Test


Let’s first start the web server with DEBUG=true, django successfully shows our custom home page.



We will get a 404 debug mode page.





Start the web server with DEBUG=false and we will get the custom 404 page.

$ export DJANGO_SETTINGS_MODULE="shopcart.settings.prod"
$ python manage.py runserver


 




Github





Reference






沒有留言:

張貼留言