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

心已赠人 2023-10-03 11:57 22阅读 0赞

**一、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')

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

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`

尾部footer.html

`templates/footer.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`

我们把所有页面相同的代码单独提取出来放在 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里。如果添加数据出错，请查看[使用富文本编辑器添加数据][Link 2]解决。

![img][][myblog.zip][]

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

[Link 1]: https://www.django.cn/course/show-36.html
[Link 2]: https://www.django.cn/course/show-40.html
[img]: https://img-blog.csdnimg.cn/img_convert/54e6c98031efc78c30ab2651074ac31d.gif
[myblog.zip]: https://www.django.cn/media/upfile/myblog_20181024232952_528.zip
[Django]: https://www.django.cn/course/show-44.html