一.静态文件的使用
首先，新建static目录，目录下分别建立css、js、img三个子目录
修改settings.py文件
STATICFILES_DIRS = ( 'F:/web/static', #替换成自己的static 目录 )
修改web下的urls.py，添加以下内容
urlpatterns += patterns((''), (r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': 'F:/web/static'} ), )
二.使用bootstrap美化界面
下载boostrap组件，将相应文件放到static目录中。然后修改base.html。在head中添加
<link rel="stylesheet" href="/static/css/bootstrap.min.css"> <script src="/static/js/jquery-2.0.0.min.js"></script> <script src="/static/js/bootstrap.min.js"></script>
重写base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <script src="/static/js/jquery-2.0.0.min.js"></script> <script src="/static/js/bootstrap.min.js"></script> <title> {% block title %} {% endblock %} </title> {% block extra_head %} {% endblock %} </head> <body> {% block body %} {% block header %} {% block menu %} {% endblock %} {% endblock %} <div class="container main"> {% block content %} <div class="container"> <div class="row"> <div class="col-md-9"> {% block article %} {% block article_title %}{% endblock %} {% block article_content %}{% endblock %} {% endblock %} {% block article_menu %} {% endblock %} {% block comments %} {% endblock %} </div> <div class="col-md-3"> {% block aside %} {% block tags %}{% endblock %} {% endblock %} </div> </div> </div> {% endblock %} {% block footer %} <p>Thanks for visiting my site! </p> {% endblock %} {% endblock %} </div> </body> </html>
创建新文件blog_base.html，在其中添加导航栏
{% extends "base.html" %} {% block header %} {% block menu %} <div class="container"> <nav class="navbar navbar-default navbar-inverse"> <div class="navbar-header"> <a href="{% url 'bloglist' %}" class="navbar-brand active">首页</a> </div> <div> <ul class="nav navbar-nav"> <li><a href="#">Pyhton</a></li> <li><a href="#">Django</a></li> <li><a href="#">Html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Linux</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </div> </nav> </div> {% endblock %} {% endblock %}
在blog的urls.py文件中添加
url(r'^blog/tag/(?P<id>d+)/$','blog_filter',name='filterblog'),
在views.py中添加
def blog_filter(request,id=''): tags = Tag.objects.all() tag = Tag.objects.get(id=id) blogs = tag.blog_set.all() return render_to_response("blog_filter.html",{"blogs":blogs,"tag":tag,"tags":tags})
添加blog_filter.html文件
{% extends "base.html" %} {% block title %} 标签: {{ tag.tag_name }} {% endblock %} {% block article %} <article class='content-main'> {% for blog in blogs %} <h3><a href="{% url 'detailblog' blog.id %}">{{ blog.caption }}</a></h3> <div class="row"> <div class="col-md-3"> <p class="muted"> <span class="glyphicon glyphicon-tag"></span> <small> {{ blog.publish_time }}</small> </p> </div> <div class="col-md-2 col-md-offset-7"> </div> </div> <hr class="soften"> {% empty %} <p class="text-info">no result!!</p> {% endfor %} </article> {% endblock %} {% block aside %} {% block tags %} <div class="well"> {% for tag in tags %} <span class="label"><a href="{% url 'filterblog' tag.id %}">{{ tag }}</a></span> {% endfor %} </div> {% endblock %} {% endblock %}
重新编辑blog_list.html
{% extends "blog_base.html" %} {% block title %} 博文列表 {% endblock %} {% block article %} <article class='content'> {% for blog in blogs %} <h4><a href="{% url 'detailblog' blog.id %}">{{blog.caption}}</a></h4> <p class="muted"> {% for tag in blog.tags.all %} <span class="glyphicon glyphicon-tag"></span><small>{{tag}}</small> {% endfor %} </p> <div class="row"> <div class="col-md-3"> <span class="glyphicon glyphicon-time"></span><small> {{ blog.publish_time }}</small> </div> <div class="col-md-2 col-md-offset-7"> </div> </div> <hr> {% endfor %} </article> {% endblock %} {% block aside %} {% block tags %} <div class="well"> {% for tag in tags %} <span class="label"><a href="{% url 'filterblog' tag.id %}">{{tag}}</a></span> {% endfor %} </div> {% endblock %} {% endblock %}
重新编辑blog_show.html
{% extends "blog_base.html" %} {% block title %} {{ blog.caption }} {% endblock %} {% block article %} <div class="content"> <article class="content-main"> {% block article_title %} <h2>{{ blog.caption }}</h2> {% endblock %} <p class="muted"> <span class="glyphicon glyphicon-user"></span><small> {{ blog.author }}</small> <span class="glyphicon glyphicon-time"></span><small> {{ blog.publish_time }}</small> </p> <section> <div class="blog-content"> {% block article_content %} {{ blog.content }} {% endblock %} </div> </section> <section> <div class="row"> <div class="col-md-3"> <p> <span class="glyphicon glyphicon-tag"></span> {% for tag in blog.tags.all %} <small class="muted"> {{ tag }} </small> {% endfor %} </p> </div> <div class="col-md-2 col-md-offset-7"> </div> </div> </section> </article> <hr> </div> {% endblock %}
这样，一个简单的经过bootstrap美化的blog页面就出现了，但是现在还只能展示，不能自己提交blog。