Emlog整合谷歌自定义搜索

Emlog整合谷歌自定义搜索

谷歌自定义搜索很早以前3.5.2的时候,看见小松弄了,我就想弄了,以前就是太赖了。。

后来就不了而之了。。。

现在4.0.1了。。

今天再次动手弄起来。。。

先去申请 Google 自定义搜索。。

点击此处创建属于你博客的自定义搜索引擎,要搜索的网站填入www.example.com(您的网站);可以设置外观,搜索元素,布局。我就不说。。

现在开始改造。。。

我就以我的为例。。

一、修改搜索框

<form id="searchform" action="<?php echo BLOG_URL; ?>search/">
	<div class="searchbox-form">
	    <input type="text" class="text inputblur" name="q" id="s" value="-搜搜更健康-" onfocus="if (this.value == ’-搜搜更健康-’) {this.value = ’’;}" onblur="if (this.value == ’’) {this.value = ’-搜搜更健康-’;}"  />
</div>
</form>

大家如果跟我一样的格式,就不用改了,如果不一致,那么请自行修改相关参数!否则可能达不到预期效果!

二、建立搜索结果页

在你博客的根目录新建一个名为search的文件夹,注意search为第二步form的action的路径,请保持一致!然后在此目录下新建一个名为index.php的文件,文件内容如下:

<?php
/**
 * 搜索
 */
require_once ’../init.php’;
define(’TEMPLATE_PATH’, TPLS_PATH.Option::get(’nonce_templet’).’/’);//前台模板路径
$blogtitle = ’搜索 ’.$_GET[’q’];//页面标题,可自行修改,参数’q’文本框input的name一致
if ($action == ’’) {
$options_cache = $CACHE->readCache(’options’);
extract($options_cache);
$navibar = unserialize($navibar);
include View::getView(’header’);//加载头部文件
include View::getView(’search’);//加载搜索结果页,这个在后面一步讲到
include View::getView(’footer’);//加载底部文件
}
?>

如果搜索框的格式跟我不一样的,需要注意的地方我都标注了,请注意查看。

三、新建一个Search.php文件

文件内容如下:

<?php if(!defined(’EMLOG_ROOT’)) {exit(’error!’);} ?>
//下面是标题,你可以去掉
<div class="post">
<?php if(empty($_GET[’q’])):?>
<?php elseif(!empty($_GET[’q’])):?>
		<h2 class="title">?&nbsp;包含关键词{<?php echo $_GET[’q’];?>}的文章如下:</h2>
		<?php endif;?>
//标题结束//

//下面是自定义搜索的代码,请自行修改成你自己的!
<div id="cse"  "><img src="<?php echo TEMPLATE_URL; ?>/images/loading.gif" alt="Emlog整合谷歌自定义搜索" /></div> //注意id
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load(’search’, ’1’, {style : google.loader.themes.SHINY}); //这个是自定义google样式
google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl(’016897283454442159004:5vdv56qqghq’); //这个也要改成你的
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    var search = ’<?php echo $_GET[’q’]; ?>’;//注意q与上面文本输入框的name属性一致!
    options.setInput(document.getElementById(’s’)); // 传递输入元素
    document.getElementById(’searchform’).setAttribute(’onSubmit’,"document.getElementById(’s’).select(); return false;"); // 按下搜索按钮选中搜索框,并阻止表单提交
    document.getElementById(’s’).value = search; // 设置搜索框的内容
    options.setAutoComplete(true);//自动完成,不需要此功能可去除此句,建议留下
    customSearchControl.draw(’cse’, options);//cse为上面div的id
    customSearchControl.execute(search);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

将search.php上传到你所用的模板模板,切记不要传到search文件夹下!

到此,emlog已经结合了谷歌的自定义搜索了。可以看看我的效果。。。

您可以选择一种方式赞助本站

目前评论:19   其中:访客  10   博主  9

  1. 2010年10月01日 19:53  15楼
  2. 2010年10月01日 18:21  16楼
  3. 2010年10月01日 16:38  17楼
  4. 2010年10月01日 10:20  18楼
  5. 2010年10月01日 14:56  19楼
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: