自定义百度本地搜索框

blog and tools | Apr 10, 2016 • Ding Jiao

刚刚捣鼓了一下百度本地搜索,无论好坏,对于小站来说,这个真是个很便利的产品,给百度点个赞.

直接去http://zn.baidu.com/注册.

然后就可以对已经认证的网站新增搜索框.按引导流程走就行.

设置搜索的范围.也就是定一下域名规则.

如果没有其他要求,可以直接使用百度自己模板,也支持局部样式调整,比如颜色,字体,大小,宽度等等.

设置好以后就能获得一段js代码.然后插入到自己要放置搜索框的位置即可.

若有问题,及时看里面帮助,其中有很多cms的添加方法.

那问题来了.我对搜索框的样式有要求,完全无法忍受不协调的界面….

比如我….

那就要选择使用自定义模板.

其实很简单,就是吧自己的模板定义成一个form表单.然后里面有一个id="bdcsMain" 的 input,再加上一个submit元素即可.

把最后百度给出的js贴到body尾部即可.脚本会自己找到相应的id分析,然后修改添加需要的元素.

上代码:

<body>

<!--基于Bootstrap3的模板为例-->
<form class="navbar-form navbar-right col-centered" role="search">
    <div class="form-group form-group-sm">
        <!--注意这里的id赋值-->
        <input type="search" class="form-control" placeholder="Search" id="bdcsMain">
    </div>
    <button type="submit" class="btn btn-link">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
</form>

<!--然后把百度控制台获取的搜索框js代码放在在body尾部-->
<script type="text/javascript">
//baidu搜索框js
</script>

</body>

如上调整后,嵌入的百度js会查找id为bdcsMain的input然后向上找到父级的form节点,

然后修改属性,这时候,点击form中submit类型的元素时候提交搜索.

还可以在百度的控制台配置关键词提示的功能,还有网页关键词,配置搜索页面样式转换等等.

这样对于小站的搜索来说,足矣.