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 %}
我的网站
{% endblock %}
{%block head_extend%}

    {% endblock %}
{%block nav_blog_active%}
active
{%endblock%}
{#页面内容#}

{%block content%}


    

        

            

                

                 {%block blog_list_title%} 
博客列表 (一共有{{blogs|length}}篇博客)
{%endblock%}
                
                

                    {% for blog in blogs %}
                    

                        

                            {{ blog.title }}
                         

                            分类:{{blog.blog_type.type_name}}
                            发表日期:{{blog.created_time|date:"Y-m-d "}}
                        
   
 {{ blog.content |truncatechars:200}}



{%empty%}
                    

      
暂无博客敬请期待
                    
{% endfor %}

  
                
            

        

            

  

    
博客分类
  
  

    

            {%for blog_type in blog_types%}

            
{{blog_type.type_name}}
            {% empty %}
            
暂无分类
            {% endfor %}
            
  



        
        


{%endblock%}

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

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

注意修改views.py传入分类

 最终效果

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

修改一下views.py传入blog_types

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

{% extends 'base.html' %}
{#页面标题#}
{% block title %}
{{blog.title}}
{% endblock %}
{%block head_extend%}

    {% endblock %}

{%block nav_blog_active%}
active
{%endblock%}
  {%block content%}

    

        

{{blog.title}}
            

作者：{{blog.author}}
            

    分类:
    {{blog.blog_type}}

发表日期：{{blog.created_time|date:"Y-m-d H:n:s"}}
            
{{blog.content}}

        
    

{%endblock%}

对应css

 效果：