django开发简易博客（三）

　　一.静态文件的使用

　　首先，新建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>

View Code

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

View Code

　　创建新文件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 %}

View Code

　　在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})

View Code

　　添加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 %}

View Code

　　重新编辑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 %}

View Code

　　重新编辑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 %}

View Code

　　这样，一个简单的经过bootstrap美化的blog页面就出现了，但是现在还只能展示，不能自己提交blog。