188° 2017846字评论

Bitcron主题的搜索页面

欢迎来到《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主题的CSS样式等
返回目录:Bitcron主题制作系列教程
上一篇:Bitcron主题的所有分类和所有标签页面

EOF
105°
间隔年日记第36周
点击加载Disqus