• 搭建自己的博客(五):使用模版标签优化前端代码


    上一篇我们优化了一些首页和详情页代码,但是我们会发现很多html界面中有非常多的重复代码。所以我们就要用到django的模版标签来优化。

    1、提取公共部分到base.html

    <!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

    2、改造之前的三个html文件

    {# 引用模板 #}
    {% 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

    3、经过改造之后,发现重复代码明显变少了

    开启服务,和之前的访问效果一样

    4、项目目录

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

    5、不得不提全局模版文件夹

    之前我们的模版文件夹templates都是在app内的,这就会有个问题,当我们app多了,如果这个app不用了,删了,那app中的模板文件就不能使用了。所以我们通常设置一个全局的模板文件夹,来存放各个app中需要的模板文件。

    (1)、创建全局模版文件夹

    在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路径。

     6、最后启动服务测试

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

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

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

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

  • 相关阅读:
    第10组 Alpha冲刺(4/6)
    第10组 Alpha冲刺(3/6)
    第10组 Alpha冲刺(2/6)
    第10组 Alpha冲刺(1/6)
    第10组 团队Git现场编程实战
    第10组 团队项目-需求分析报告
    团队项目-选题报告
    【软件工程】Alpha冲刺(4/6)
    【软件工程】Alpha冲刺(3/6)
    【软件工程】Alpha冲刺(2/6)
  • 原文地址:https://www.cnblogs.com/felixwang2/p/9906267.html
Copyright © 2020-2023  润新知