搭建本身的博客（五）：使用模版标签优化前端代码

时间 2019-12-05

标签搭建本身博客使用模版标签优化前端代码繁體版

原文原文链接

上一篇咱们优化了一些首页和详情页代码，可是咱们会发现不少html界面中有很是多的重复代码。因此咱们就要用到django的模版标签来优化。html

一、提取公共部分到base.htmldjango

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {#  用来放标题  #}
        {% block title %}

        {% endblock %}
    </title>
</head>
<body>
<div>
    <a href="{% url 'home' %}">
        <h3>felix Blog</h3>
    </a>

</div>
<hr/>
{# 用来放内容 #}
{% block content %}

{% endblock %}

</body>
</html>

base.html

二、改造以前的三个html文件app

{# 引用模板 #}
{% extends 'base.html' %}

{# 标题 #}
{% block title %}
    {{ blog.title }}
{% endblock %}

{# 内容#}
{% block content %}
    <h3>{{ blog.title }}</h3>
    <p>做者：{{ blog.author }}</p>
    {# 时间过滤器让时间按照本身须要的格式过滤 #}
    <p>发布日期：{{ blog.created_time|date:"Y-m-d H:n:s" }}</p>
    <p>分类：
        <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
            {{ blog.blog_type }}
        </a>
    </p>
    <p>{{ blog.content }}</p>
{% endblock %}

blog_detail.html

{% extends 'base.html' %}

{# 标题 #}
{% block title %}
    felix Blog
{% endblock %}

{# 内容#}
{% block content %}
    {% for blog in blogs %}
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        {#    添加过滤器 文章太长时只显示前30个字符  #}
        <p>{{ blog.content|truncatechars:30 }}</p>
    {% empty %}
        <p>--暂无博客，敬请期待--</p>
    {% endfor %}
    {# 过滤器统计博客数量 #}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}

blog_list.html

{% extends 'base.html' %}

{# 标题 #}
{% block title %}
    {{ blog_type.type_name }}
{% endblock %}

{# 内容#}
{% block content %}
    <h3>标签名：{{ blog_type.type_name }}</h3>
    {% for blog in blogs %}
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        {#    添加过滤器 文章太长时只显示前30个字符  #}
        <p>{{ blog.content|truncatechars:30 }}</p>
    {% empty %}
        <p>--暂无博客，敬请期待--</p>
    {% endfor %}
    {# 过滤器统计博客数量 #}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}

blog_with_type.html

三、通过改造以后，发现重复代码明显变少了ide

开启服务，和以前的访问效果同样函数

四、项目目录测试

和上次相比，之变化了templates中的4个文件。优化

五、不得不提全局模版文件夹url

以前咱们的模版文件夹templates都是在app内的，这就会有个问题，当咱们app多了，若是这个app不用了，删了，那app中的模板文件就不能使用了。因此咱们一般设置一个全局的模板文件夹，来存放各个app中须要的模板文件。spa

（1）、建立全局模版文件夹debug

在myblog项目下建立templates文件夹，再在templates文件夹下建立blog文件夹用来存放blog app的模版文件。

而后把以前在app中的模版文件移到新建立的模版文件夹中。

由于新建立的模版文件夹，django没法找到，因此咱们要修改settings.py文件，让django能找到模板文件夹templates。

修改settings文件中的TEMPLATES字段

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 将新建立的模版文件夹添加进来
        'DIRS': [
            os.path.join(BASE_DIR,'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

而后修改视图文件views.py，让html路径能让视图函数找到

from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog, BlogType


# Create your views here.

# 博客列表
def blog_list(requests):
    context = {
        'blogs': Blog.objects.all()
    }
    return render_to_response('blog/blog_list.html', context)


# 博客详情
def blog_detail(requests, blog_pk):
    context = {
        'blog': get_object_or_404(Blog, pk=blog_pk)
    }

    return render_to_response('blog/blog_detail.html', context)


def blogs_with_type(requests, blog_type_pk):
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    context = {
        'blogs': Blog.objects.filter(blog_type=blog_type),
        'blog_type':blog_type,
    }
    return render_to_response('blog/blog_with_type.html', context)

views.py

（2）、最后修改好的项目目录以下：

把原来在blog app下的模版文件移动到了全局的模板文件下了，而且修改了views.py中的视图函数和settings.py中的Templates路径。

六、最后启动服务测试

测试效果和上一篇博客相同。只是代码逻辑更加优化了，代码更加简便。

七、最后模版文件的设置建议

app模版文件--》放在app中

project模版文件--》放在全局模板中