zoukankan      html  css  js  c++  java
  • 搭建自己的博客(五):使用模版标签优化前端代码

    上一篇我们优化了一些首页和详情页代码,但是我们会发现很多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模版文件--》放在全局模板中

  • 相关阅读:
    支持向量机SVM知识点概括
    决策树知识点概括
    HDU 3081 Marriage Match II
    HDU 3572 Task Schedule
    HDU 4888 Redraw Beautiful Drawings
    Poj 2728 Desert King
    HDU 3926 Hand in Hand
    HDU 1598 find the most comfortable road
    HDU 4393 Throw nails
    POJ 1486 Sorting Slides
  • 原文地址:https://www.cnblogs.com/felixwang2/p/9906267.html
Copyright © 2011-2022 走看看