Django学习：博客页面的响应式布局（10）

其他 2019-08-27 14:05:04 阅读次数: 0

要将详情页面修改为响应式布局的话，需要使用BootStrap的栅格系统。而且因为该页面和app紧密联系，最好将相关模板文件移动到app模板文件夹下面。

  • 移动mysite templates blog文件夹到mysite blog templates文件夹下面

  • 修改blog_list.html

{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                {% 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>
            </div>
            <div class='col-md-4'>
                <h4>博客分类</h4>
            </div>
    </div>
    
{% endblock %}

为了使用博客分类，需要在mysite views.py文件中进行修改，获取所有博客类型

  • 修改mysite 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()
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)


def blog_detail(request,blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_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.filter(blog_type=blog_type)
    context['blog_type'] = blog_type
    return render_to_response('blog/blogs_with_type.html', context)
  • 修改blog_list.html`文件
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                {% 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>
            </div>
            <div class='col-md-4'>
                <h4>博客分类</h4>
                <ul>
                    {% for blog_type in blog_types %}
                        <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                    {% empty %}
                        <li>暂无分类</li>
                    {% endfor %}
                </ul>
            </div>
    </div>
    
{% endblock %}

进入127.0.0.1:8000/blog查看

参照https://v3.bootcss.com/components/#panels添加面板

  • 修改blog_list.html文件
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                {% 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>
            </div>
            <div class='col-md-4'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                </div>
                    </div>
            </div>
    </div>
    
{% endblock %}

刷新页面查看

给ul标签增加一个css样式，去除博客分类的点

<ul style="list-style-type: none;">
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>

此时页面变为如下：

同样给博客内容也加上面板，修改blog_list.html文件

{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col-md-8'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% 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></p>
                    </div>
                </div>
                
            </div>
            <div class='col-md-4'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul style="list-style-type: none;">
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

当屏幕拉为小屏幕时，博客列表和博客的内容会合并到一列中去，需要对各种屏幕进行设置。

  • 修改blog_list.html文件
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% 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></p>
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul style="list-style-type: none;">
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}
  • 将ul标签的css样式单独提取出来：在mysite static文件夹下面建立一个新的文件blog.css,blog_list.html文件ul标签添加一个class属性为blog_types.

blog.css

ul.blog_types {
    list-style-type: none;
}
  • 修改blog_list.html，引入blog.css静态文件
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% 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></p>
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

为了一致性，将blog.css文件移动到app中。在blog app下建立static文件夹，在static文件夹下面建立一个blog文件夹，将blog.css文件移动进去。

  • 修改blog_list.html中，引用css的路径
{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

可以得到一样的页面效果。

  • 进一步优化blog_list.html页面
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                            <p>{{ blog.content|truncatechars_html:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>-- 暂无博客，敬请期待 --</h3>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}
  • 优化页面显示，修改blog.css文件
ul.blog_types {
    list-style-type: none;
}
div.blog:not(:last-child) {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}
div.blog h3 {
    margin-top: 0.5em;
}
div.blog p.blog-info {
    margin-bottom: 0;
}

目前页面变成这样。

  • 增加博客分类和发表时间，修改blog_list.html文件如下
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                            <p class="blog_info">
                                分类：<a href='{% url "blogs_with_type" blog.blog_type.pk %}'>{{ blog.blog_type }}</a>
                                发表日期：{{ blog.created_time|date:"Y-m-d" }}
                            </p>
                            <p>{{ blog.content|truncatechars_html:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>-- 暂无博客，敬请期待 --</h3>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

博客页面如下：

可以进一步参考https://v3.bootcss.com/components/#glyphicons-examples使用图标来代替字体

  • 修改blog_list.html文件
{% extends 'base.html' %}
{% block title %}个人博客网站{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row"></div>
            <div class='col_xs_12 col_sm_8 col-md-9 col_lg_10'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客列表(一共有{{ blogs|length }}篇博客)</div>
                     <div class="panel-body">
                        {% for blog in blogs %}
                        <div class="blog">
                            <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                            <p class="blog_info">
                                <span class="glyphicon glyphicon-tag"></span><a href='{% url "blogs_with_type" blog.blog_type.pk %}'>{{ blog.blog_type }}</a>
                                <span class="glyphicon glyphicon-time"></span>{{ blog.created_time|date:"Y-m-d" }}
                            </p>
                            <p>{{ blog.content|truncatechars_html:120 }}</p>
                        </div>
                        {% empty %}
                        <div class="blog">
                            <h3>-- 暂无博客，敬请期待 --</h3>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
            </div>
            <div class='hidden-xs col_sm_4 col-md-3 col_lg_2'>
                <div class="panel panel-default">
                     <div class="panel-heading">博客分类</div>
                     <div class="panel-body">
                        <ul class='blog_types'>
                            {% for blog_type in blog_types %}
                            <li><a href='{% url "blogs_with_type" blog_type.pk %}'>{{ blog_type.type_name }}</a></li>
                            {% empty %}
                            <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    
{% endblock %}

页面如下：

因为某个分类的所有博客列表与全部博客列表的页面是相似的，可以通过扩展博客列表的模板来使用

  • 修改blog_list.html文件
<div class="panel-heading">{% block blog_list_title %}博客列表(一共有{{ blogs|length }}篇博客){% endblock %}</div>
  • 修改blogs_with_type.html，使其显示的页面与博客列表页面相似
{% extends 'blog/blog_list.html' %}
{# 页面标题 #}
{% block title %}{{ blog_type.type_name }}{% endblock %}
{% block blog_list_title %}
    {{ blog_type.type_name }}
    （一共有{{ blogs|length }}篇博客）
    <a href='{% url "blog_list" %}'>查看全部博客</a>
{% endblock %}
  • 修改blog 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()
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blog_list.html', context)


def blog_detail(request,blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_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['blog_type'] = blog_type
    context['blogs'] = Blog.objects.filter(blog_type=blog_type)
    context['blog_types'] = BlogType.objects.all()
    return render_to_response('blog/blogs_with_type.html', context)
  • 修改博客详情页的模板blog_detail.html
{% extends 'base.html' %}
{% block title %}{{ blog.title }}{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}

{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class='col-xs-10 col-xs-offset-1'>
                <h3>{{ blog.title }}</h3>
                    <ul class='blog_info_description'>
                        <li>作者：{{ blog.author }}</li>
                        <li>分类：<a href='{% url "blogs_with_type" blog.blog_type.pk %}'>{{ blog.blog_type }}</a></li>
                        <li>发表时间：{{ blog.created_time|date:"Y-m-d G:m:s" }}</li>
                    </ul>
                    <div class='blog-content'>{{ blog.content }}</div>
            </div>
        </div>
    </div>
    
{% endblock %}
  • 对详情页页面布局进行调整

blog.css

ul.blog_types {
    list-style-type: none;
}
div.blog:not(:last-child) {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}
div.blog h3 {
    margin-top: 0.5em;
}
div.blog p.blog-info {
    margin-bottom: 0;
}

ul.blog_info_description {
    list-style-type: none;
    margin-bottom: 1em;
}
ul.blog_info_description li {
    display: inline-block;
    margin-right: 2em;
}
div.blog-content {
    text-indent: 2em;
}

最后博客详情页类似如下：

猜你喜欢

转载自www.cnblogs.com/sjfeng1987/p/11417848.html
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022