一.静态文件的使用
首先，新建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。
时间： 2024-12-29 07:58:55