Django 20200408 博客开发 005

效果图：

使用栅格样式：
修改blog\_list.html

{# 删除和base中重复的内容，留下独有的内容,然后分别填充到下面的两个block中 #}

  

  

{# 这是页面标题 #}

{% extends 'base.html' %}  {# 导入base.html中的内容 #}

{% block title %}  {# 用于填充title #}

    刘子君的博客  {# 这里因为之前title被包起来了，所以直接用变量即可 #}

{% endblock %}

<hr>

{# 这是页面内容 #}

{% block content %}

***    <div class="container">

        <div class="row">

            <div class="col-md-8">

                        {% for blog in blogs %}

{#        <a href="{ % url 'blog\detail' blog.pk % }">#}

            <a href="{% url 'blog\detail' blog.pk %}">

            <h3>{{blog.title}}</h3>

        </a>

{#            管道符表示过滤，这句话意思是对blogcontent中的内容过滤，只剩30字符显示，这里不知为啥起作用了但pycharm识别为错误#}

            <p>{{ blog.content|truncatechars:30 }}</p>

        {% empty %}

            <p>----- 敬请期待，暂无博文 -----</p>

    {% endfor %}

        {#        <p>一共有{{ blogs|length }}篇博文</p> {{ blogs\count }} {#        用于统计blogs中又多少条博文#}

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

    </div>***

  

{% endblock %}

因为blog\_list.html需要用到app(blog)里面的views.py，一般要将与app关系紧密的文件放在app下面，所以这里要将mysite/templates/blog剪切到mysite/blog/templates下面，也能避免和后面app的静态文件重名。

然后将blog\_type通过视图函数传入前端：

现在的效果如下：

没有很明显的边界，用面板增加一个边界：

效果如下：

不想要前面的点，增加新内容：

同理修改博客列表的content:

效果如图：

另外想要将图中的一共有...放在博客列表后面，修改如下：

效果如下：

另外把原来的md改成sm:


因为md对于小屏幕不太友好，

而sm会自动适应屏幕大小而且能适应小屏幕

在修改：


修改上面的

为我们的css样式要放到css文件中，所以如下：

然后在static中创建blog.css文件设置样式：

然后到blog\_list.html中引入blog.css文件

将blog.css文件放在blog下面的static/blog中

修改blog\_list.html中的link:

然后将每块布局包裹在各自的div中，并微调各处内容：

{# 删除和base中重复的内容，留下独有的内容,然后分别填充到下面的两个block中 #}

{# 这是页面标题 #}

{% extends 'base.html' %}   {# 导入base.html中的内容 #}

{% block title %}刘子君的博客{% endblock %}  {# 用于填充title #}

{% block nav\_blog\_active %}active{% endblock %}

  

  

{# 引入blog.css文件 #}

{% load static %}

{% block header\_extends %}

    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">

{% endblock %}

  

  

{# 页面内容 #}

{% block content %}

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">

                <div class="panel panel-default">

                    <div class="panel-heading">{% block blog\_list\_title %}博客列表（一共有{{ blogs|length }}篇博客）{% endblock %}</div>

                   {# <p>一共有{{ blogs|length }}篇博文</p> {{ blogs\_count }} {#用于统计blogs中又多少条博文#}

                    <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:30 }}</p>

                            </div>

                        {#管道符表示过滤，这句话意思是对blogcontent中的内容过滤，只剩30字符显示，这里不知为啥起作用了但pycharm识别为错误#}

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

    </div>

{% endblock %}

增加对应的样式在blog.css中：

修改blog\_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 %}

对应的修改view.py中blog\_with\_type下面的blog\_types：

修改blog\_detail.html中的代码：

{# 删除和base中重复的内容，留下独有的内容,然后分别填充到下面的两个block中 #}

  

  

{# 这是页面标题 #}

{% extends 'base.html' %}  {# 导入base.html中的内容 #}

{% block title %}  {# 用于填充title #}

    {{ blog.title }}  {# 这里因为之前title被包起来了，所以直接用变量即可 #}

{% endblock %}

  

  

{% load staticf %}

{% block header\_extends %}

    <link rel="stylesheet" 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 H:n:s" }}</li>

                </ul>

                <div class="blog-content">{{ blog.content }}</div>

            </div>

        </div>

    </div>

{% endblock %}

再次修改blog.css文件（上面一起粘了，这里就不重复了）

对于里面遇到的bug都写在了madpecker中了，每天都有新的bug出现...