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
效果: