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

一、django static文件的引入方式

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

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

或

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

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

3.前端引入

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

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

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

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

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

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

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

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

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

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

模板包含

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

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

头部head.html

templates/head.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyBlog</title>
</head>
<body>
<div>头部</div>

主体部分index.html

templates/index.html

<div>中部</div>

尾部footer.html

templates/footer.html

<div>尾部</div>
</div>
</body>
</html>

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

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代码：

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 %}替换。

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>

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

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 %}标签,然后在子模板页面里加入代码：

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

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

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

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

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

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

myblog.zip

参考链接：Django博客开发教程:一些常用的模板使用方法

Django 3.2.5博客开发教程:一些常用的模板使用方法相关推荐

Django 3.2.5博客开发教程:基础配置
创建项目之后,我们需要对项目进行最基础的配置.这些配置是我们做项目的时候必须要配置的,所以我们先提前配置好. 我们打开myblog目录下的settings.py文件. 一.设置域名访问权限 myblo ...
Django 3.2.5博客开发教程:HelloWorld欢迎页面
基础配置做好了之后,我们就可以先迁移数据到数据库,然后启动我们的项目,感受Django的魅力. 在Pycharm左下角底部的Terminal,会弹出Terminal终端窗口,Pycharm自动会帮我们 ...
Django 3.2.5博客开发教程:用Admin管理后台管理数据
上节我们我们把数据库迁移到数据库里去了,那么现在我们数据库里是个什么样的情况呢?我们点击Pycharm右上角的Database,然后在网站项目里选中我们的数据库文件db.sqlite3,把它拖到Dat ...
Django 3.2.5博客开发教程:URL与视图函数
在讲URL与视图函数之前我们先给大家简单介绍一下用户访问网站的流程.我们访问一个网站的时候,一般先打开浏览器,然后在浏览器的地址栏里输入一个网址,也就是URL,然后回车,我们就可以在浏览器里看到这个网 ...
Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
Django 3.2.5博客开发教程:体验django模板
上面我们有说过,用户发送请求的时候,视图会返回一个响应,响应可以是一个重定向,一个404错误,一个XML文档,一张图片或者是一个HTML内容的网页.前面几个返回的信息比较有限,我们重点更多是放在HTM ...
Django 3.2.5博客开发教程:体验数据查询
进行数据查询之前,我们需要先进入我们的管理后台,在里面添加一些数据.然后我们用Pycharm打开我们的数据库.具体操作方法:用Pycharm可视化操作数据库我们的数据结构长这般模样: 双击blog_ ...
Django 3.2.5博客开发教程:实现模板之前的分析与准备
在之前的体验django模板.体验数据查询以及一些常用的模板使用方法文章里,向大家介绍了如何将数据库的数据展现到网页上,和一些简单的模板使用方法.之后我们就开始实现各种页面的展现. 在此之前,我们先从 ...
Django 3.2.5博客开发教程:实现网站首页
实现首页模板前,我们先把共公的页面模板base.html调用好.首先我们先看导航部分,除开首页和关于博主之外,其它的其实是我们的文章分类名.如图: 我们只需要在首页视图函数里,查询出所有的文章分类名称 ...

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

Django 3.2.5博客开发教程:一些常用的模板使用方法相关推荐

最新文章

热门文章