Django Learning: blog page responsive layout (10)

Others 2019-08-27 20:07:53 views: null

To modify the details page responsive layout, it requires the use of BootStrap grid system. And because of the close contact page and app, the best template file to the relevant app template folder.

  • Move mysite templates blogthe folder to mysite blog templatesfolder below

  • modifyblog_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 %}

In order to use blog classification, we need mysite views.pyto modify the file, get all blog types

  • Modify mysite views.pyfile
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)
  • Modify blog_list.html` file
{% 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 %}

Enter 127.0.0.1:8000/blogView

Referring to https://v3.bootcss.com/components/#panels add panel

  • Modify blog_list.htmlfile
{% 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 %}

Refresh the page to see

Ul label to add a css style to remove blog points classification

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

The page goes as follows:

The same panel also add content to the blog, modify blog_list.htmlfile

{% 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 %}

When the screen pulled a small screen, a list of blog content and blog will be merged into one to go, we need to set a variety of screens.

  • Modify blog_list.htmlfile
{% 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 %}
  • The ullabel's cssstyle individually extracted: In the mysite staticfolder below to create a new file blog.css, blog_list.htmlthe file ullabel to add a classproperty blog_types.

blog.css

ul.blog_types {
    list-style-type: none;
}
  • Modify blog_list.htmlthe introduction of blog.cssstatic files
{% 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 %}

For consistency, to blog.cssmove the file to appthe. In blog appestablishing the next staticfolder in the staticfolder below to create a blogfolder, blog.cssmove files into it.

  • Modification blog_list.html, a reference csspath
{% block header_extends %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/blog.css' %}">
{% endblock %}

You can get the same results page.

  • Further optimization of blog_list.htmlpage
{% 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 %}
  • Optimized page display, modify blog.cssfile
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;
}

Currently the page like this.

  • Classification and increase blog post, modify the blog_list.htmlfile as follows
{% 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 %}

Blog page as follows:

With further reference to https://v3.bootcss.com/components/#glyphicons-examples uses icons instead of fonts

  • Modify blog_list.htmlfile
{% 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 %}

Page as follows:

Because all blog lists a category with all the blog list page are similar, can be used by extension template blog list

  • Modify blog_list.htmlfile
<div class="panel-heading">{% block blog_list_title %}博客列表(一共有{{ blogs|length }}篇博客){% endblock %}</div>
  • Modify blogs_with_type.html, so pages and blog list page is displayed similar
{% 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 %}
  • Modify the blog views.pyfile, make blog classification is displayed on the right side
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)
  • Modify the template blog details pageblog_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 %}
  • For details page to adjust the page layout

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;
}

Finally blog details page similar to the following:

Guess you like

Origin www.cnblogs.com/sjfeng1987/p/11417848.html
Recommended
微软回应中国区AI团队“打包赴美”传闻
Ranking
How to use ChatGPT to write 100,000+ hot articles for public accounts (includes prompt words)
sudo echo command execution Permission denied
ADO: Using Transactions to Operate Oracle Database
[Java] [Class and Object] equals, hashCode, clone methods
Linux virtual host function
Порт управления rabbitmq открыт
on,where
jQuery WeUI
How can there be a weed pilot in Hangzhou?
tcp / ip model four
Daily
More
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

Code World

© 2018 codetd.com