接下来我们新建个人介绍的网页,其中使用了Jinja模板。点此查看有关Jinja的介绍
(1)在mysite文件夹下新建personal 应用
Django-admin.py startapp personal
(2)将pesonal 应用添加到mysite/setting.py中INSTALLED_APPS里
INSTALLED_APPS = [
'personal',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
(3)修改mysite/urls.py直接修改访问http://127.0.0.1:8000的指向,指向personal/urls.py文件
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', include('personal.urls')),
]
(4)修改personal/urls.py文件,直接指向personal/views.py文件中的index函数
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.index, name='index')]
(5)修改personal/views.py中的index函数,让其直接载入templates/personal/home.html的内容
from django.shortcuts import render
def index(request):
return render(request, 'personal/home.html')
(6)这事在mysite/personal文件夹下建立templates文件夹,在tempaltes文件夹下建立home.html文件和header.html文件
(7)header.html文件中的内容是
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harrison YangShuolll</title>
<meta charset="utf-8" />
</head>
<body class="body" style="background-color:#f6f6f6">
<div>
{% block content %}
{% endblock %}
</div>
</body>
</html>
{% block content %}
{% endblock %}
这部分就是Jinji的代码(8)给home.html的文件添加内容
{% extends "personal/header.html" %}
{% block content %}
<p>Hey,I am Jinja</p>
{% endblock %}
{% extends "personal/header.html" %}是在home.html文件中导入header.html的内容
{% block content %} 这个是替换header.html中Jinja的指代
<p>Hey! Welcome to my website! Well, I wasn't expecting guests. Um, my name is Harrison. I am a programmer.</p>
{% endblock %}
(9)在mysite文件夹下运行
python3 manage.py runserver
(10)浏览器中直接输入 http://127.0.0.1:8000 直接进入I am Jinja页面
(11)接下来在mysite/personal/templates/personal/includes文件夹下建立htmlsnippet.html文件
内容如下
{% block content %}
<p>Whoa, check me out, I am included!</p>
{% endblock %}
(12)接下来修改home.html文件的内容
{% extends "personal/header.html" %}
{% block content %}
<p>Hey,I am Jinja</p>
{% include 'personal/includes/htmlsnippet.html' %}
{% endblock %}
(13) 重新部署服务器,访问 http://127.0.0.1:8000 ,产生如下内容