您的位置：首页 > 编程语言 > Go语言

django 简易博客开发 3 静态文件、from 应用与自定义

2014-03-08 23:16 501 查看

首先还是贴一下源代码地址 https://github.com/goodspeedcheng/sblog

上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数据操作，这篇博客将介绍静态文件的使用、from 应用与自定义

1、静态文件的使用

鉴于我们上次所看到的界面惨不忍睹，为了不影响心情，先介绍一下如何使用静态文件美化界面

首先新建static目录，目录下新建css/js/img三个目录

修改seeting.py文件

STATICFILES_DIRS = (
'/home/gs/blog/static',   #替换成自己的static 目录
)

修改blog目录下 urls.py 添加以下内容

urlpatterns += patterns((''),
(r'^static/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': '/home/gs/blog/static'}
),
)

当然这只是本机测试环境下的使用方法，生产环境这样部署是不可以的。

2、使用bootstrap美化界面

为了方便，我们使用bootstrap进行界面优化，如果你想自己写界面，这一步完全可以跳过去

bootstrap 下载地址 http://twitter.github.com/bootstrap/

中文文档：http://wrongwaycn.github.com/bootstrap/docs/index.html

bootstrap使用非常方便下载解压后将其中的css/js/img 目录中文件分别放入static目录下相应文件夹就好了，然后修改base.html，在head标签添加

<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/code.css">
<script src="/static/js/modernizr.js"></script>
<script src="/static/js/jquery.js"></script>

因为bootstrap需要jquery支持，所以必须要引入jquery ，因为我们使用的html5，使用modernizr会自动检测不兼容的浏览器利用js添加相应的功能。

在body添加

<script src="/static/js/bootstrap.min.js"></script>

现在base.html是这个样子的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
{% block title %}{% endblock %}
</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/js/modernizr.js"></script>
<script src="/static/js/jquery.js"></script>
{% block extra_head %}
{% endblock %}
</head>

<body>
{% block body %}
{% block header %}
{# 任何每个页面都可能修改的文本区域的页面 #}
{% block menu %}
{# 你的菜单 (导航栏) 应该包含在这个区块中. 它是针对站点级的导航, 不是 每个页面专属的导航菜单. #}
{% endblock %}
{% endblock %}
<div class="container">
{% block content %}
{# 这个区块用来放置页面正文内容. 任何页面正文内容都可能不一样. 它不 包含任何站点导航, 信息头, 页脚, 或其它任何属于 base 模板的东东. #}

<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
{% block article %}
{% block article_title %}
{% comment %}
用来指定 content 区块的 "title". 比如 blog 的标题.
也可以用来 包含 content 内的导航 (译注: 比如提纲), 或其它类似的东东.
大致都是些 页面中并非主要内容的东东.
我不知道这个区块是否应该放到 content tag 内, 并且对应于前面建议的 content tag,
是不是还需要一个 main_content 区块.
{% block [section]_menu %} {% block page_menu %}
这是对应于之前建议的 menu 区块. 用来导航一个章节或页面.
{% endcomment %}
{% endblock %}
{% block article_content %}{% endblock %}
{% endblock %}

{% block article_menu %} {% endblock %}
{% block comments %} {% endblock %}
</div>
<div class="span3">
{% block aside %}
{% block tags %}{% endblock %}
{% endblock %}
</div>
</div>
</div>
{% endblock %}
{% block footer %}
{# 任何每个页面都可能修改的文本区域的页脚 #}
<p>Thanks for visiting my site! </p>
{% endblock %}
{% endblock %}
</div>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>

因为base.html中block越多以后越方便，所以我添加了一些标签，可以暂时忽略

其中用到了bootstrap的布局，阅读文档吧： http://twitter.github.com/bootstrap/scaffolding.html

然后新建一个blog_base.html文件，添加blog中会用到的内容，比如导航栏、搜索框等

{% extends "base.html" %}

{% block extra_head %}
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
{% endblock %}

{% block header %}
{% block menu %}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">BLOG</a>
<ul class="nav">
<li class="active divider-vertical">
<a href="{% url bloglist %}">home</a>
</li>
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">contact</a>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% endblock %}

修改blog_list.html 文件和blog_show.html文件以适应bootstrap

blog_list.html

{% extends "blog_base.html" %}
{% load comments %}

{% block title %} blog list {% endblock %}

{% block article %}
<article class='content-main'>
{% for blog in blogs %}
<h4><a href="{% url detailblog blog.id %}">{{ blog.caption }}</a></h4>
<p class="muted">
{% for tag in blog.tags.all %}
<i class="icon-tag"></i> <small>{{ tag }}</small>
{% endfor %}
</p>
{% load markup %}
<div>{{ blog.content|markdown:'codehilite' }} </div>

<div class="row-fluid">
<div class="span3">
<p class="muted"><i class="icon-time"></i><small> {{ blog.publish_time }}</small></p>
</div>
<div class="span2 offset7">
<a href="{% url delblog blog.id %}" title="delete"><i class="icon-trash"></i></a>
<a href="{% url updateblog blog.id %}" title="edit"><i class="icon-edit"></i></a>
{% get_comment_count for blog as comment_count %}
<a href="{% url detailblog blog.id %}#cmt" title="comment"><i class=" icon-comment"></i>{{ comment_count }}</a>
</div>
</div>
<hr>
{% endfor %}
</article>
{% endblock %}

{% block aside %}

<a class="btn" href="{# {% url addblog %} #}"><i class="icon-plus"></i> add new blog</a>

{% block tags %}
<div class="well">
{% for tag in tags %}
<span class="label"><a href="{% url filtrblog tag.id %}">{{ tag }}</a></span>
{% endfor %}
</div>
{% endblock %}
{% endblock %}

其中

<a class="btn" href="{# {% url addblog %} #}"><i class="icon-plus"></i> add new blog</a>

是接下来要说的添加文章的操作

{% for tag in tags %}
<span class="label"><a href="{% url filtrblog tag.id %}">{{ tag }}</a></span>
{% endfor %}

需要在urls.py文件添加

url(r'^blog/tag/(?P<id>\d+)/$', 'blog_filter', name='filtrblog'),

然后添加view

from sblog.models import Tag

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_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">
<i class="icon-user"></i><small> {{ blog.author }}</small>
<i class="icon-time"></i><small> {{ blog.publish_time }}</small>
</p>
<section>
<div class="blog-content">
{% block article_content %}
{{ blog.content }}
{% endblock %}
</div>
</section>
<section>
<div class="row-fluid post-info">
<div class="span3">
<p>
<i class="icon-tag"></i>
{% for tag in blog.tags.all %}
<small class="muted"> {{ tag }} </small>
{% endfor %}
</p>
</div>
<div class="span2 offset7">
<a href="{% url delblog blog.id %}" title="delete"><i class="icon-trash"></i></a>
<a href="{% url updateblog blog.id %}" title="edit"><i class="icon-edit"></i></a>
<a href="#cmt" title="comment"><i class=" icon-comment"></i></a>
</div>
</div>
<hr>
</section>
</article>
<hr>
</div>
{% endblock %}

这其中

<section>
<div class="row-fluid post-info">
<div class="span3">
<p>
<i class="icon-tag"></i>
{% for tag in blog.tags.all %}
<small class="muted"> {{ tag }} </small>
{% endfor %}
</p>
</div>
<div class="span2 offset7">
<a href="{% url delblog blog.id %}" title="delete"><i class="icon-trash"></i></a>
<a href="{% url updateblog blog.id %}" title="edit"><i class="icon-edit"></i></a>
<a href="#cmt" title="comment"><i class=" icon-comment"></i></a>
</div>
</div>
<hr>
</section>

是我们接下来要说的对blog的修改、删除等操作

3、表单的使用及自定义

通过钱两部，我们美化了一下界面，现在让我们来添加功能吧。

要实现添加博客的功能，我们必须要用到表单。

Django带有一个form库，称为django.forms，这个库可以处理我们本章所提到的包括HTML表单显示以及验证。当然我们现在有两个选择

自己写，完成表单显示以及验证
使用django提供的From

这里我们选择后者，既然我们选择了django，为什么还要重复的造轮子呢？

Form文档在此 https://docs.djangoproject.com/en/dev/topics/forms/ 我就不再介绍了，直接说怎么用吧。

首先修改urls.py 文件添加

url(r'^blog/add/$', 'blog_add', name='addblog'),

然后在sblog目录下新建forms.py文件

from django import forms

class BlogForm(forms.Form):
caption = forms.CharField(label='title', max_length=100)
content = forms.CharField(widget=forms.Textarea)

这里我们只博客的标题和内容

CharField 表示字符类型    当你在本地显示这个表单的时，

content字段被显示成`` input type=”text”`` ，而它应该被显示成<`` textarea`` >。我们可以通过设置* widget* 来修改它

然后新建blog_add.html

1 {% extends "blog_base.html" %}
2
3 {% block title %} 发布文字 {% endblock %}
4
5
6 {% block article %}
7
8 <form action="" method="post">
9     {% csrf_token %}
10     <div class="field">
11         <label for="id_caption">Title: </label>
12         {% if form.caption.errors %}
13         <div class="alert alert-error">
14             {{ form.caption.errors }}
15         </div>
16         {% endif %}
17         {{ form.caption }}
18     </div>
19     <div class="field">
20         <label for="id_content">Content: </label>
21         {% if form.content.errors %}
22         <div class="alert alert-error">
23             {{ form.content.errors }}
24         </div>
25         {% endif %}
26         {{ form.content }}
27     </div>
28     <div class="form-actions">
29         <input class="btn btn-primary" type="submit" value="save and add">
30     </div>
31 </form>
32 {% endblock %}

添加views

from django.http import HttpResponseRedirect
from django.template import RequestContext
from sblog.models import Author
from sblog.forms import BlogForm

def blog_add(request):
if request.method == 'POST':
form = BlogForm(request.POST)
if form.is_valid():
cd = form.cleaned_data
title = cd['caption']
author = Author.objects.get(id=1)
content = cd['content']
blog = Blog(caption=title, author=author, content=content)
blog.save()
id = Blog.objects.order_by('-publish_time')[0].id
return HttpResponseRedirect('/sblog/blog/%s' % id)
else:
form = BlogForm()
return render_to_response('blog_add.html',
{'form': form}, context_instance=RequestContext(request))

使用 form的is_valid()方法，验证它的数据是否合法，如果一个Form实体的数据是合法的，它就会有一个可用的cleaned_data属性。
这是一个包含干净的提交数据的字典。

这里我们默认作者是id=1，当然你也可以自己修改或者根据登录的session读取

博客提交后使用HttpResponseRedirect 跳转到最新发表的博客页面

因为我们使用的是post 所以必须在表单后面添加 {% csrf_token %}

然后在视图中使用 context_instance=RequestContext(request)

现在你会发现我们并没有使用tags，好吧，现在我们添加 tag标签功能

首先修改forms.py文件添加

class TagForm(forms.Form):
tag_name = forms.CharField()

然后修改视图

1 from sblog.forms import TagForm
2
3 def blog_add(request):
4     if request.method == 'POST':
5         form = BlogForm(request.POST)
6         tag = TagForm(request.POST)
7         if form.is_valid() and tag.is_valid():
8             cd = form.cleaned_data
9             cdtag = tag.cleaned_data
10             tagname = cdtag['tag_name']
11             for taglist in tagname.split():
12                 Tag.objects.get_or_create(tag_name=taglist.strip())
13             title = cd['caption']
14             author = Author.objects.get(id=1)
15             content = cd['content']
16             blog = Blog(caption=title, author=author, content=content)
17             blog.save()
18             for taglist in tagname.split():
19                 blog.tags.add(Tag.objects.get(tag_name=taglist.strip()))
20                 blog.save()
21             id = Blog.objects.order_by('-publish_time')[0].id
22             return HttpResponseRedirect('/sblog/blog/%s' % id)
23     else:
24         form = BlogForm()
25         tag = TagForm(initial={'tag_name': 'notags'})
26     return render_to_response('blog_add.html',
27         {'form': form, 'tag': tag}, context_instance=RequestContext(request))

for taglist in tagname.split():
Tag.objects.get_or_create(tag_name=taglist.strip())

表示将得到的tag字符串用空格分割开并删除多余空格

get_or_create表示首先获取tag_name 如果存在就不操作，不存在就创建

在blog_add.html 文件合适的位置添加

<div class="field">
<label for="id_tag">tags</label>
{% if tag.tag_name.errors %}
<div class="alert alert-error">
{{ tag.tag_name.errors }}
</div>
{% endif %}
{{ tag.tag_name }}
</div>

现在刷新 http://127.0.0.1:8080/sblog/blog/add/ 是不是看到tag输入框了，（添加多个标签使用空格隔开）

4、更新文章内容

修改urls.py文件添加

url(r'^blog/(?P<id>\w+)/update/$', 'blog_update', name='updateblog'),

因为更新和添加所需表单内容相同，这里就直接使用blog_add.html 作为update的模板

在views.py添加

def blog_update(request, id=""):
id = id
if request.method == 'POST':
form = BlogForm(request.POST)
tag = TagForm(request.POST)
if form.is_valid() and tag.is_valid():
cd = form.cleaned_data
cdtag = tag.cleaned_data
tagname = cdtag['tag_name']
tagnamelist = tagname.split()
for taglist in tagnamelist:
Tag.objects.get_or_create(tag_name=taglist.strip())
title = cd['caption']
content = cd['content']
blog = Blog.objects.get(id=id)
if blog:
blog.caption = title
blog.content = content
blog.save()
for taglist in tagnamelist:
blog.tags.add(Tag.objects.get(tag_name=taglist.strip()))
blog.save()
tags = blog.tags.all()
for tagname in tags:
tagname = unicode(str(tagname), "utf-8")
if tagname not in tagnamelist:
notag = blog.tags.get(tag_name=tagname)
blog.tags.remove(notag)
else:
blog = Blog(caption=blog.caption, content=blog.content)
blog.save()
return HttpResponseRedirect('/sblog/blog/%s' % id)
else:
try:
blog = Blog.objects.get(id=id)
except Exception:
raise Http404
form = BlogForm(initial={'caption': blog.caption, 'content': blog.content}, auto_id=False)
tags = blog.tags.all()
if tags:
taginit = ''
for x in tags:
taginit += str(x) + ' '
tag = TagForm(initial={'tag_name': taginit})
else:
tag = TagForm()
return render_to_response('blog_add.html',
{'blog': blog, 'form': form, 'id': id, 'tag': tag},
context_instance=RequestContext(request))

其中

for taglist in tagnamelist:
blog.tags.add(Tag.objects.get(tag_name=taglist.strip()))
blog.save()
tags = blog.tags.all()
for tagname in tags:
tagname = unicode(str(tagname), "utf-8")
if tagname not in tagnamelist:
notag = blog.tags.get(tag_name=tagname)
blog.tags.remove(notag)

作用是将tag与blog关联，并且去掉原有关联修改后不关联的tag 例如blog1 原有tag为1，2 ，3 修改后为2， 3

这里的作用是去除blog1与tag 1的关联

5、删除文章

修改urls.py 添加

url(r'^blog/(?P<id>\w+)/del/$', 'blog_del', name='delblog'),

修改views.py 添加

def blog_del(request, id=""):
try:
blog = Blog.objects.get(id=id)
except Exception:
raise Http404
if blog:
blog.delete()
return HttpResponseRedirect("/sblog/bloglist/")
blogs = Blog.objects.all()
return render_to_response("blog_list.html", {"blogs": blogs})

完成后发现我们并没有相关的update delete 链接

将第二步中的注释去掉吧现在刷新 blog show 页面是否看到了呢

最后源代码可以在 https://github.com/goodspeedcheng/sblog 可以看一下
希望大家把错误的地方提出纠正一下。

谢谢

以上关于from的内容能在 django book 2 第七章找到

扩展阅读： https://docs.djangoproject.com/en/1.4/

http://twitter.github.com/bootstrap/index.html

推荐 Django 最佳实践 - 中文版 https://github.com/brantyoung/zh-django-best-practices/blob/master/readme.rst/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航