Django编写个人博客(四)前端页面设计

1、设计一个首页

更改base.html

 修改博客路由，加入博客列表路由

增加首页模板文件

修改总路由，上来显示首页：

 对应方法

2、使用css设计页面

base.html对应css

home.html css设置 

将css文件放在static文件夹下

settings对应配置

对应html，引用css

 

页面效果 

 

2、boostrap使用与美化:

 官方下载bootstrap源码，放在static文件夹下,建立二级目录bootstrap

下载jquery,放在static下

对应的头，引入相应文件

 

页面：

 

li中active设置选中状态：

每个页面加入 

 效果：

 

 

设计其他显示页面：

{% extends 'base.html' %}
{#页面标题#}
{% block title %}
<h3>我的网站</h3>
{% endblock %}
{%block head_extend%}
<link rel="stylesheet" href="/static/blog/blog.css">
    {% endblock %}
{%block nav_blog_active%}
active
{%endblock%}
{#页面内容#}

{%block content%}
<!--设计栅格系统，分栏显示，一共十二份，博客占8份，分类占4份，根据自己需要调整，xs表示超小屏，sm表示小屏，md表示中等屏，lg表示大屏,从小设到大，这里让超小屏时隐藏-->
<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%} <h4>博客列表 (一共有{{blogs|length}}篇博客)</h4><!--模板嵌套，用于后面的博客细节页面-->
{%endblock%}
                </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" aria-hidden="true"></span>分类:<a href="{%url 'blogs_with_type' blog.blog_type.pk%}">{{blog.blog_type.type_name}}</a>
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>发表日期:{{blog.created_time|date:"Y-m-d "}}
                        </p>
   <p> {{ blog.content |truncatechars:200}}</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">
    <h4 >博客分类</h4>
  </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%}

 这里在应用下单独建立static,并建立blog文件夹，下面放blog.css用于修饰页面，设blog文件夹防止冲突

最后一个意思是除了最后一个元素，其他都这种样式

注意修改views.py传入分类

 最终效果

分类页面，直接拓展列表页面即可：

修改一下views.py传入blog_types

 最后修改博客细节页面，通过一行栅格，设置偏移使显示内容居中

{% extends 'base.html' %}
{#页面标题#}
{% block title %}
<h3>{{blog.title}}</h3>
{% endblock %}
{%block head_extend%}
<link rel="stylesheet" href="/static/blog/blog.css">
    {% endblock %}

{%block nav_blog_active%}
active
{%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%}

对应css

 效果：