885° Nov 26, 2017 20:07 • 2017 • 846字 • 0条评论

Bitcron主题的搜索页面

search.jade
其他形式
相关阅读

欢迎来到《Bitcron主题制作系列教程》。今天来说一说搜索页面。一般情况下搜索框会被放置在首页或其他页面，不会单独成页，而且Bitcron也提供了相应的API，只要将+posts.search_in_html放置在任意喜欢的位置即可，一点儿不占空间。如果放在首页，便可利用index.jade中对文章列表的定义直接显示搜索结果，代码简洁内容直观，甚是过瘾。即便如此，折腾星人如我还是决定搞一个搜索页面，这么一来还能放一些自定义内容，给想要搜索网站的访客更好的体验。如果你觉得一个小小的搜索框不足以表达对于搜索这件事的全部，那么也可以像接下来我要介绍的一样，做一个只属于自己的搜索页面。

search.jade

路径决定文档名称，比如我希望搜索页面在/search，于是我新建了一个search.jade，然后往里面塞东西：

extends index

block title
    title= '搜索 - ' + site.title

block content
    h2 搜索
    // 请出搜索框
    #search
        +posts.search_in_html(placeholder='搜索', base_url='/search')
    // 如果有搜索结果
    if request.args.s
        #result
            // 定义搜索结果文章列表，取30篇，后面调用了分页，所以这里表示每页显示30篇
            search_posts = posts.search(keywords=request.args.s, limit=30)
            for post in search_posts
                h2: a(href=post.url)= post.title
                .content= post.content.limit(150)
            // 别忘了调用分页
            +h.paginator()

根据官方API，+posts.search_in_html接受两个参数：

base_url：网站根域，也就是构建https://yourdomain.com/<base_url>?s=<keyword>这个URL用的，默认是/

under：搜索针对的目录路径

因为是全站搜索，就不用去管under了。而这个base_url可以利用起来，这样搜索结果就能显示在搜索页面/search里了。另外可以用placeholder='文字'来更改搜索框内的默认文字，比如placeholder='随你搜'。定义search_posts时的limit可以设定为想要每页显示的搜索结果文章数。

其他形式

我还用base_url做过这样的事：在首页插入搜索框，设置搜索结果在/result页面显示：+posts.search_in_html(base_url='/result')。然后新建一个result.jade，在里面的block content里写上上述代码中#result以下的内容。如此一来所有搜索结果将显示在url为/result?s=关键字的页面里，可以跟首页的文章列表分开定义样式。

说完了搜索框，这个网站可谓是很齐全了。除去特殊要求的自定义页面，基本上一个博客需要的功能都罗列出来了。接下来需要给它穿上漂亮的衣服，也迎来了整个主题制作中非常重要的最终环节——定义CSS样式。当然如果需要一些更复杂的动态效果，还需要Js的帮助，这些都是后话了。那么就下次见吧！

Bitcron主题的搜索页面

search.jade

其他形式

相关阅读