• 七、Django学习:模板嵌套


    blog_list.htmlblog_detail.htmlblogs_with_type.html这3个文件有大量的重复代码,如果把这些重复的代码提取到另外一个html文件中,也就是使用模板嵌套,就可以达到复用的目的。

    • blog templates文件夹下面建立一个新的文件base.html,并将重复的html代码复制进去。
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	
    </head>
    <body>
    	<div>
    		<a href='{% url "home" %}'>
    			<h3>个人博客网站</h3>
    		</a>
    	</div>
    	
    </body>
    </html>
    
    • 使用模板语言block来构建块,用于其他html文件对其的引用

    blockblock block_name开头,以endblock结束,其中block_name为自己取的块名

    修改base.html如下:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>{% block title %}{% endblock %}</title>
    </head>
    <body>
    	<div>
    		<a href='{% url "home" %}'>
    			<h3>个人博客网站</h3>
    		</a>
    	</div>
    	{# 加一个横线用于分割页面 #}
    	<hr>
    	{% block content %}{% endblock %}
    </body>
    </html>
    
    • 使用extends引用base.html

    blog_detail.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 G:m:s" }}</p>
    	<p>分类:
    		<a href='{% url "blogs_with_type" blog.blog_type.pk %}'>
    			{{ blog.blog_type }}
    		</a>
    	</p>
    	<p>{{ blog.content }}</p>
    {% endblock %}
    
    

    解释:使用extends来扩展使用base.html

    • 类似的修改blogs_with_type.htmlblog_list.html文件

    blogs_with_type.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>
    		<p>{{ blog.content|truncatechars_html:30 }}</p>
    
    	{% empty %}
    		<p>-- 暂无博客,敬请期待 --</p>
    	{% endfor %}
    	<p>一共有{{ blogs|length }}篇博客</p>
    {% endblock %}
    

    blog_list.html

    {% extends 'base.html' %}
    
    {# 页面标题 #}
    {% block title %}
    	个人博客网站
    {% endblock %}
    
    {# 页面内容 #}
    {% block content %}
    	{% for blog in blogs %}
    		<a href="{% url 'blog_detail' blog.pk %}">
    			<h3>{{ blog.title }}</h3>
    		</a>
    		<p>{{ blog.content|truncatechars_html:30 }}</p>
    
    	{% empty %}
    		<p>-- 暂无博客,敬请期待 --</p>
    	{% endfor %}
    	<p>一共有{{ blogs|length }}篇博客</p>
    {% endblock %}
    

    再次运行服务,可以得到相同的结果。

    模板文件放在app文件夹还是放到项目文件夹,取决于这个模板文件是否可以被其他的app复用,是否会对app产生影响。我们博客的base.html最好放在项目文件夹中。

    • mysite文件夹下面新建templates文件夹(manage.py同级目录),将blog base.html文件移动到该文件夹内。为了让新的路径能识别,需要在settings.py文件中进行设置。
    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',
                ],
            },
        },
    ]
    

    再次启动页面,可以看到页面结果一样。

    同理blog_detail.htmlblog_list.htmlblogs_with_type.html也可以移动到mysite templates目录下。但为了避免混淆,可以在mysite templates目录下新建一个blog文件夹,将这三个文件放到这个目录下。

    blog_detail.htmlblog_list.htmlblogs_with_type.html移动到mysite templates blog文件夹下面,修改appblog views.py以找到该路径。

    from django.shortcuts import render_to_response,get_object_or_404
    from .models import Blog, BlogType
    
    # Create your views here.
    
    def blog_list(request):
        context = {}
        context['blogs'] = Blog.objects.all()
        return render_to_response('blog/blog_list.html', context)
    
    
    def blog_detail(request, blog_pk):
        context = {}
        context['blog'] = get_object_or_404(BlogType, pk=blog_type_pk)
        return render_to_response('blog/blog_detail.html', context)
    
    def blogs_with_type(request, blog_type_pk):
        context = {}
        blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
        context['blogs'] = Blog.objects.fileter(blog_type=blog_type)
        context['blog_type'] = blog_type
        return render_to_response('blog/blogs_with_type.html', context)
    

    再次启动页面,可以看到页面结果一样。


    总结:通过模板嵌套,让代码更简洁明了,但是显示的页面还是比较简陋,这就产生了新的需求,使用css对页面进行美化。

  • 相关阅读:
    很好的学习idea工具的教程
    事件绑定
    接口出现问题
    IDEA快捷方式
    源代码编译安装Python3.5.2
    CentOS7使用无线网卡
    MySql5.7.12设置log-bin
    报表传递参数控制数据权限
    python将png转为pkm
    WebGL纹理详解——压缩纹理的使用
  • 原文地址:https://www.cnblogs.com/sjfeng1987/p/11382477.html
Copyright © 2020-2023  润新知