django入门(四) — 简单范例(2)-范本与范本继承

范本(Template)

范本是放HTML档案的资料夹,Template engine(范本引擎)会把views传来的变数插入到我们在范本内所写的范本变数。

我们延续上一篇教学,将回传字样改成使用范本呈现。

修改main/views.py


from django.shortcuts import render
from django.http import HttpResponse <-这行删除


def main(request):
    '''
    Render the main page
    '''
    context = {'hello':'Hello world! 这是首页~'}
    return render(request, 'main/main.html', context)

main app目录下建立 templates 与 templates/main 目录

main/templates/main下建立范本main.html

main/templates/main/main.html 贴上下面html

<!doctype html>
<html>
<head>
<title>简单范例</title>
<meta charset="utf-8">
</head>
<body>
<h2>{{ hello }}</h2>
</body>
</html>

完成後可以重新启动服务器,到浏览器查看成果。

范本继承

范本继承可以让我们更好得管理范本,当有多个范本有相同重复的部分,我们可以将它们放到同一个范本,并定义一些区块标签,让继承这个范本的范本可以自己设定区块标签内的内容,如此的话,我们未来如果需要更动只要修改一个范本就好了。

首先我们建立一个基础范本:
main/templates/main/base.html,并将下方code贴上。

<!doctype html>
{% load static %}
<html>
<head>
<title>简单范例</title>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
{% block css %}{% endblock %}

</head>
<body>
{% include 'main/menu.html' %}<!--  -->
<div class="p_header" align="center">
	<div class="title">
		<h2>简单范例 -- {% block heading %}{% endblock %}</h2>
	</div>
</div>
<div class="wrapper" align="center">
	<div class="content" >
		{% block content %}{% endblock %}
	</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
{% block script %}{% endblock %}
</body>
</html>

main/templates/main/main.html的内容用下面的code盖掉

{% extends 'main/base.html' %}
{% block heading %}首页{% endblock %}
{% block content %}
<h2>{{ hello }}</h2>
{% endblock %}

范本汇入其它范本

我们在首页加入一个目录的功能。

首先,建立menu.html

main/templates/main/menu.html,将下方code贴上。

<ul id="menu">
  <li><a href="{% url 'main:main' %}">首页</a></li>
</ul>

main/templates/main/base.html

...
<body>
{% include 'main/menu.html' %}  <-加入这行
<h2>简单范例 -- {% block heading %}{% endblock %}</h2>
{% block content %}{% endblock %}
</body>
...

到这里我们可以知道范本继承达成了「高内聚,低耦合」的目的,便於开发人员日後维护。

建立第二个APP-stock

接着继续往下,在专案下再建立一个app,名称为stock。(记得要去demo/settings新增APP)
如果忘记怎麽建立可以参考前面的教学文章。

首先我们建立一个范本:
main/templates/stock/stock.html,并将下方code贴上。

{% extends 'main/base.html' %}
{% block heading %}股票{% endblock %}
{% block content %}
<h2>{{ stock }}</h2>
{% endblock %}

撰写views
stock/views.py

from django.shortcuts import render


def stock(request):
    context = {'stock':'stock page'}
    return render(request, 'stock/stock.html', context)

新增一个urls.py在stock app下面,并设定路径。

stock/urls.py

from django.urls import path
from stock import views


app_name = 'stock'
urlpatterns = [
    path('', views.stock, name='stock'),
]

还有demo/urls.py也要设定路径哦

...
urlpatterns = [
    path('admin/', admin.site.urls),
    path('main/', include('main.urls', namespace='main')),
    path('stock/', include('stock.urls', namespace='stock')), <-加入这行
    re_path('.*', views.main),
]

测试

到这里可以启动服务器了,可以看到页面上有首页与股票的分页连结,且可以点击进入页面。


<<:  django入门(三) — 简单范例(1)-建立app

>>:  STM32F746入手与初体验

Day 16 : PHP - 如何在phpMyAdmin里用SQL的语法做资料库的查询?

如标题,这篇想和大家聊聊如何用SQL的语法做资料库的查询 请注意,SQL的函数皆为「全大写的英文字母...

Day 21:GitLab Container Registry

之前在第 15 天的时候,我有提过希望可以把 build image 的步骤移到 CI pipeli...

Day 25 - Reader Monad

今天来介绍 Reader Monad,其主要处理的就是 dependency injection, ...

[Day 7] 餐前浓汤 pt.4-资料内文取得及储存

上一篇我们提到了如何观察并且取出我们要的资料 也成功地把资料取出来了 这一篇我们将要对资料做最後的加...

Day 5 - 原型 (4): 帖子页元件

前言 今天要完成帖子页的元件设计。 帖子页的元件 帖子 基本上可以用回主页的帖子元件, 这里只是少了...