这段时间主要针对网站的UI设计进行调整和写写博客。

随着博文越来越多，发现想找某篇博文不是很方便。so ~ 是时候添加搜索博文的功能了。

1、添加网址规则

首先，先修改urls.py。

因为搜索博文实际上也是把我们想要搜索的内容提交到服务器，再返回对应的博文数据。

那么提交数据，得要有一个网址给我们提交。所以需要先分配一个网址。

因为是对博文搜索，则在blog应用对应的urls.py添加网址规则。我打算访问name为search的网址，对应的参数通过请求的GET中获取。如下所示：

url(r'^search$','blog.views.search',name='search'),

2、添加访问函数

设置网址规则之后，需要写对应的函数：blog.views.search。打开blog应用下对应的views.py文件，添加如下函数：

def search(request):
    """show blogs' list"""
    try:
        wd=request.GET['wd']
        if not wd:
            return index(request)

        blogs = Blog.objects.filter(caption__contains=wd)
        paginator,blogs=getPages(request,blogs)

        #return data
        data = commonData()
        data["blogs"]=blogs
        data["paginator"]=paginator 
        data["wd"]=wd
    except Exception:
        raise Http404
    return render_to_response('blog/blog_search.html',data)

有几点要说明一下：

1) 获取搜索关键字的是wd参数

2) 没有对应搜索内容返回blog默认列表(前面有些index函数)

3) commonData()是我这个文件后面定义的一个获取公告数据的函数，可以忽略

4) getPages()是我封装起来的获取分页器函数，可以忽略。具体可以看前面的博文：Django分页器

5) 设置条件是对博客caption字段模糊搜索，需要加 __contains 修饰，表示子字符串。

3、添加对应的模版文件呈现数据

在前面优化期间，添加了tag标签筛选。由于比较简单，这部分没有写出来。大体类似，只供参考。

在blog应用模版文件夹的位置，新建blog_search.html文件。模版文件内容如下：

{% extends "blog/blog_list.html" %}

{% block title %}
	“{{wd}}” - 杨仕航的博客
{% endblock %}

{% block blog_header %}		
	<div class="alert alert-success" role="alert">
		关键字：“{{wd}}” 所有博文
	</div>
{% endblock %}

该模版还调用了博客列表模版，可以省很多事。传递进来的博客列表内容，会在blog_list.html文件中处理。

4、添加搜索框

万事俱备只欠东风。后台数据都准备好之后，给菜单栏添加搜索框。这个搜索框其实是一个Form表单。

我网站用了bootstrap框架。相关的教程可以看看宁皓网的视频教程其中的“导航”章节。大致代码如下：

<form action="{% url 'search'%}" class="navbar-form navbar-right">
    <input name="wd" type="text" placeholder="搜索博文" class="form-control">
    <button type="submit">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form>

设置表单提交给名字为search的网址；表单字段为name="wd"。这些都是相关的html知识，这里就不多说。

你也可以看上面的宁皓网教程。

5、添加样式

最好，再稍微调整一下css样式即可。

.navbar-form{
    position: relative;
    right: 10px;
}
.navbar-form button[type="submit"]{
    position: absolute;
    top:24%;
    right: 20px;
    background:none;
    border:none;
}
@media (max-width: 767px){
    .navbar-form button[type="submit"]{
        top:35%;
    }
}

同样，这些内容可以在宁皓网的教程里面找到（“导航”章节）。

这样就添加了搜索博文功能。不过搜索能力不强，只对博文标题模糊搜索。不支持多关键字什么的，后面再慢慢完善。

上一篇：我的网站搭建(第12天) 关闭调试

下一篇：利用Eval函数，简单实现回调机制