Django博客开发教程:一些常用的模板使用方法

合集 - Django博客开发教程(21)
1.1、Django博客开发教程:开发前的准备2.2、Django博客开发教程:项目需求分析3.Django博客开发教程:数据库设计分析4.Django博客开发教程:创建项目5.Django博客开发教程:基础配置6.Django博客开发教程:欢迎页面7.Django博客开发教程:创建数据库模型8.Django博客开发教程:用Admin管理后台管理数据9.Django博客开发教程:使用富文本编辑器添加数据10.Django博客开发教程:使用ckeditor富文本编辑器添加数据11.Django博客开发教程:URL与视图函数12.Django博客开发教程:体验django模板,13.Django博客开发教程:体验数据查询
14.Django博客开发教程:一些常用的模板使用方法
15.Django博客开发教程:实现模板之前的分析与准备16.Django博客开发教程:实现网站首页17.Django博客开发教程:实现文章列表18.Django博客开发教程:实现文章内容页19.Django博客开发教程:实现标签页面20.Django博客开发教程:实现搜索页面21.Django博客开发教程:单页面实现与代码优化
收起

一、django static文件的引入方式

 1. 在django project中创建 static文件夹
 2.settings.py中配置要在 STATIC_URL = '/static/'  下边　

1
2
3
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'), 
]

或

1
STATICFILES_DIRS = os.path.join(BASE_DIR, 'static')

在做基础配置的时候，我们已经做好了。基础配置

3.前端引入

1
2
3
4
5
6
7
在页面顶部：
{% load staticfiles %} #django2及之前的版本用这样的方法django3用下面的
{% load static %}  #django3 用这个语法
 
#引入CSS、JS
{% static 'xxx.css' %}　
{% static 'xxx.js' %}

二、模板(template)包含、继承与 {% block %} 的用法

使用模板前，先设置TEMPLATES里的'DIRS'，添加模板目录templates的路径，这样Django才能自动找到模板页面：

1
2
3
4
#修改前
'DIRS': []
#修改后
'DIRS': [os.path.join(BASE_DIR, 'templates')]

Django模板存放方式有两种方法：

1、在项目根下创建templates目录，然后把模板存入在templates目录里，多个APP的话，就直接在templates目录下建立与APP名相同名称的目录即可。Django会自动查找到，这种方法简单、直观，适合个人或小项目。

2、各个APP下单独建立一个templates目录，然后再建立一个与项目名相同的的目录，把模板放到对应的目录里。这样的方法适合大项目多人协作，每个人只负责各自的APP项目的时候。多样式多站点(域名)的情况也适用，不同的APP用不同的模板样式，不同的域名。

两种方法，模板调用方法一样：

1
return render(request, 'app/index.html', context)

两种方法各有优点，大家选适合自己的就好，后面本教程就用第一个方法。

模板包含

以我们的演示站为例，http://demo.django.cn/  我们可以看到，网站所有页面的头部和尾部都一样，只有中间的部分不一样。这时我们就可以把这个页面分为三个部分，每个部分分别存放在页面head.html、index.html、footer.html中，其中，头部head.html用来放所有页面头部相同的代码、主体部分index.html放与其它页面不相同的代码、尾部head.html放与其它页面尾部相同的代码。

举例，我们的首页代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<div>头部</div>
 
<div>中部</div>
 
<div>尾部</div>
 
</div>
</body>
</html>

这时我们把这个页面分成三个页面，内容分别如下：

头部head.html

1
2
3
4
5
6
7
8
9
10
templates/head.html
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<div>头部</div>

主体部分index.html

1
2
3
templates/index.html
 
<div>中部</div>

尾部footer.html

1
2
3
4
5
6
templates/footer.html
 
<div>尾部</div>
</div>
</body>
</html>

假如，我们想实现首页模板调用的时候，我们可以这样做，就能合并成一个完整的首页代码如下：

1
2
3
4
5
templates/index.html
 
{% include 'head.html' %}
<div>中部</div>
{% include 'footer.html' %}

我们只需要在主体代码的头部和尾部分别用{% include 'head.html' %}和{% include 'footer.html' %}标签把头部文件和尾部文件包含进来，就能组合成一个完整的页面。这样的方法就是模板包含，我们其它页面只要是头部和尾部都相同的，我们只需要把这两个文件分别包含进来就行了。

这种方法还适用于另一种情况。比如我们所有页面的主体部分，其中有一小块代码都是相同的，我们在做模板的时候，如果内容需要修改的话，每个页面都要修改一次，很麻烦，并浪费时间。我们可以把这个代码单独提取出来，放在另一个页面xxx.html里，在调用的时候，我们只需要通过这个代码{% include 'xxx.html' %}就能把页面xxx.html包含进来。具体的，还需要大家根据页面的实际情况灵活使用。

模板继承

还是以上面的代码为例，我们的页面index.html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
index.html
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<div>头部</div>
 
<div>中部</div>
 
<div>尾部</div>
 
</div>
</body>
</html>

我们把所有页面相同的代码单独提取出来放在 base.html页面里，然后在代码不同的位置，也就是主体那里用模板标签{% block content %} {% endblock %}替换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
templates/base.html
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<div>头部</div>
 
{% block content %}
 
{% endblock %}
 
<div>尾部</div>
 
</div>
</body>
</html>

在实现首页模板的时候，我们通过下面的代码实现，组合成一个完整的首页：

1
2
3
4
5
6
templates/index.html
 
{% extends "base.html" %} 
{% block content %}
<div>中部</div>
{% endblock %}

这里里面的{% extends "base.html" %} 的意思是继承 base.html页面的代码，需要留意的是，使用继承方法的话，这个代码一定要放页面的第一行。

我们还看到，两个页面里都有代码{% block xxx %}{% endblock %} 代码{% block xxx %}{% endblock %} 里的xxx可以自由命名，这个代码意思是告诉模板引擎：这个位置我要预留给别人放东西的。这个部分子模板可以重载，每个{% block%}标签所要做的是告诉模板引擎，该模板下的这一块内容将有可能被子模板覆盖。

一般这个代码要父模板base.html里定义好，才可以在别的子模板上引用。引用的时候我们以{% block xxx %}开始，把代码放在这个标记对中间，最后以 {% endblock %}结尾。

{% block %} 标签非常有用，一般来说，基础模板中的 {% block %} 标签越多越好，用起来也会更灵活。例如，我的子页面想要多引用一个CSS样式文件，这个样式只需要应用在当前页面就行。我们可以在base.html模板里多加一个{% block  css %} {% endblock %}标签,然后在子模板页面里加入代码：

1
2
3
4
5
6
{% block  css %}
 
#CSS样式文件路径
<link href='{% static "css/style.css" %}' type='text/css' />
 
{% endblock %}

这样的话，这个CSS就只在当前页面生效。

这样的应用场景非常多，比如我们做SEO的时候，不同页面要放不同的标题、关键词、描述等。

提示：不允许在同一个模板中定义多个同名的 {% block %} ，不然就会出错。

模板的一些基本用法就介绍到这里。下面的章节就教大家如何实现网站的各个功能模块和各个页面的展现！

这里我把之前的源码都打包一份，大家可以下载下来对比一下。里面有一些数据，后台帐号密码是:admin qq445813  需要用到的软件和版本号都放在文件requirements.txt里。如果添加数据出错，请查看使用富文本编辑器添加数据解决。

myblog.zip

posted @   Expl  阅读(46)  评论(0)  编辑  收藏  举报
相关博文：
· Django博客开发教程:实现模板之前的分析与准备
· Django博客开发教程:体验django模板,
· django模板使用的总结
· Django-4.2博客开发教程:初识模板（九）
· Python Django 模版全解与实战
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
点击右上角即可分享
微信分享提示