站内搜索

最新推荐文章于 2021-06-08 13:20:33 发布

爬虫仔蛙

最新推荐文章于 2021-06-08 13:20:33 发布

阅读量591

点赞数

分类专栏： python相关代码

python相关代码专栏收录该内容

17 篇文章 0 订阅

订阅专栏

- 博客分类：
- Google / Facebook / Pinterest / SNS
Google WordPress Ajax 设计模式 HTML
链接：

Google AJAX 搜索 API

参考：

http://www.google.com/cse/docs/cref.html?hl=zh-CN

http://www.google.com/cse/manage/all

http://sofree.cc/custom-search-element/

一般来说，每个网站或博客系统都有其自带的搜索，但是很多系统的搜索功能比较简单，搜索结果往往不尽人意。就拿WordPress来说，我用一个关键词搜索时，会出来很多不相关的结果，而且这些搜索结果不是按相关性排列，而是按发表的时间次序排列的。当文章较多时，我们很难通过搜索找到某一篇文章。

一直想使用Google来实现站内搜索，昨天终于做好了，效果就是顶部导航栏右边的搜索框。使用Google站内搜索有几个好处：
1. 优化搜索，提高搜索结果的相关性
2. 个性化搜索，一定程度提高博客亲和力与权威性
3. 使用外部搜索，降低博客系统的资源消耗
4. 与Google Adsense结合，实现盈利
如何使用Google Custom Search打造博客站内搜索？

首先来到http://www.google.com/coop/cse/ ，点击右侧按钮“Creat a Custom Search Engine”，然后会要求使用Google帐号登录，登录后就来到第一步。第一步要求填写基本信息，包括：
- Search engine name - 给搜索取个名
- Search engine description - 简单描述
- Search engine keywords - 搜索关键词，提高搜索相关性
- Search engine language - 搜索结果语言（简体中文 simplified chinese）
- 搜索范围：only sites I select
- 填写要搜索的网站或博客地址例如：www.waterylife.com
- AD display - 是否展示广告，如果想结合adsense赚钱，就选Show ads on results pages
- 同意条款
提交后，进入下图所示的页面，finish 就可以了。

我们可以进入控制面板control panel做一些设置。control panel下有一下菜单：

我们主要设置Look and Feel，Code，Make Money
- 在Look and Feel 里选择搜索框的样式
- 在Make Money 里设置是否与Adsense结合
- 在Code 里设置搜索结果展示页面
这里选择搜索结果展示在博客页面，以及其下面的iframe 项。iframe 项下面的 New ！ 是使用ajax输出搜索结果，但是只有8个，而且不能make money。注意填“搜索结果展示的页面 ”。使用wordpress的朋友可以很容易在后台新增一个页面，然后将 Search results code 加入到这个页面即可（代码模式）。也可以手动建立一个静态页面，然后将代码加入到这个页面中。

Search box code 就是搜索框代码，将代码放到想显示搜索框的地方即可。Search results code 是搜索结果的代码，将其放在建立的页面即可。

大概就是这样了，具体的页面优化，可以根据自己博客的页面设计来制作，做到将搜索结果融入到页面，和谐一点。大家可以搜索本站看搜索结果的页面，以作参考。

参考 http://drupal.org/node/274441

参考代码：(替换 Your search engine ID )
Php代码
1. <div id="cse-search-form" style="display:none;">Loading</div>
2. <div id="SubGeRight"></div>
4. <script src="http://www.google.com/jsapi" type="text/javascript"></script>
5. <script type="text/javascript">
6. google.load('search', '1', {language : 'en'});
7. google.setOnLoadCallback(function(){
8. var customSearchControl = new google.search.CustomSearchControl('Your search engine ID');
9. customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
10. var options = new google.search.DrawOptions();
11. options.setSearchFormRoot('cse-search-form');
12. customSearchControl.draw('SubGeRight', options);
13. customSearchControl.execute("<?php echo trim($_GET['keyword']) ?>");
14. }, true);
15. </script>
16. <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
17. <style type="text/css">
18. .gsc-control-cse {
19. font-family: Arial, sans-serif;
20. border-color: #FFFFFF;
21. background-color: #FFFFFF;
22. }
23. input.gsc-input {
24. border-color: #BCCDF0;
25. }
26. input.gsc-search-button {
27. border-color: #666666;
28. background-color: #CECECE;
29. }
30. .gsc-tabHeader.gsc-tabhInactive {
31. border-color: #E9E9E9;
32. background-color: #E9E9E9;
33. }
34. .gsc-tabHeader.gsc-tabhActive {
35. border-top-color: #FF9900;
36. border-left-color: #E9E9E9;
37. border-right-color: #E9E9E9;
38. background-color: #FFFFFF;
39. }
40. .gsc-tabsArea {
41. border-color: white;
42. }
43. .gsc-webResult.gsc-result {
44. border-color: #FFFFFF;
45. background-color: #FFFFFF;
46. }
47. .gsc-webResult.gsc-result:hover {
48. border-color: #FFFFFF;
49. background-color: #FFFFFF;
50. }
51. .gs-webResult.gs-result a.gs-title:link,
52. .gs-webResult.gs-result a.gs-title:link b {
53. color: #CC2826;
54. }
55. .gs-webResult.gs-result a.gs-title:visited,
56. .gs-webResult.gs-result a.gs-title:visited b {
57. color: #CC2826;
58. }
59. .gs-webResult.gs-result a.gs-title:hover,
60. .gs-webResult.gs-result a.gs-title:hover b {
61. color: #CC2826;
62. }
63. .gs-webResult.gs-result a.gs-title:active,
64. .gs-webResult.gs-result a.gs-title:active b {
65. color: #CC2826;
66. }
67. .gsc-cursor-page {
68. color: #CC2826;
69. }
70. a.gsc-trailing-more-results:link {
71. color: #CC2826;
72. }
73. .gs-webResult.gs-result .gs-snippet {
74. color: #000000;
75. }
76. .gs-webResult.gs-result .gs-visibleUrl {
77. color: #858585;
78. }
79. .gs-webResult.gs-result .gs-visibleUrl-short {
80. color: #858585;
81. }
82. .gsc-cursor-box {
83. border-color: #FFFFFF;
84. }
85. .gsc-results .gsc-cursor-page {
86. border-color: #E9E9E9;
87. background-color: #FFFFFF;
88. }
89. .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
90. border-color: #FF9900;
91. background-color: #FFFFFF;
92. }
93. .gs-promotion.gs-result {
94. border-color: #336699;
95. background-color: #FFFFFF;
96. }
97. .gs-promotion.gs-result a.gs-title:link {
98. color: #0000CC;
99. }
100. .gs-promotion.gs-result a.gs-title:visited {
101. color: #0000CC;
102. }
103. .gs-promotion.gs-result a.gs-title:hover {
104. color: #0000CC;
105. }
106. .gs-promotion.gs-result a.gs-title:active {
107. color: #0000CC;
108. }
109. .gs-promotion.gs-result .gs-snippet {
110. color: #000000;
111. }
112. .gs-promotion.gs-result .gs-visibleUrl,
113. .gs-promotion.gs-result .gs-visibleUrl-short {
114. color: #008000;
115. }
116. /* by peikai*/
117. .gsc-tabHeader.gsc-tabhActive{
118. display:none;
119. }
120. .gs-webResult.gs-result .gs-snippet{
121. font-size:12px;
122. }
123. .gs-webResult.gs-result .gs-title {
124. font-family:Georgia,"Times New Roman",Times,serif;
125. font-size:13pt;
126. overflow:visible;
127. }
128. .gs-webResult.gs-result .gs-title a {
129. }
130. .gs-result .gs-title, .gs-result .gs-title * {
131. color: #CC2826;
132. text-decoration:underline;
133. }
134. .gsc-wrapper{
135. width: 600px;
136. }
137. </style>
博客分类：
Google / Facebook / Pinterest / SNS

Google WordPress Ajax 设计模式 HTML

链接：

Google AJAX 搜索 API

参考：

http://www.google.com/cse/docs/cref.html?hl=zh-CN

http://www.google.com/cse/manage/all

http://sofree.cc/custom-search-element/

一般来说，每个网站或博客系统都有其自带的搜索，但是很多系统的搜索功能比较简单，搜索结果往往不尽人意。就拿WordPress来说，我用一个关键词搜索时，会出来很多不相关的结果，而且这些搜索结果不是按相关性排列，而是按发表的时间次序排列的。当文章较多时，我们很难通过搜索找到某一篇文章。

一直想使用Google来实现站内搜索，昨天终于做好了，效果就是顶部导航栏右边的搜索框。使用Google站内搜索有几个好处：

优化搜索，提高搜索结果的相关性
个性化搜索，一定程度提高博客亲和力与权威性
使用外部搜索，降低博客系统的资源消耗
与Google Adsense结合，实现盈利

如何使用Google Custom Search打造博客站内搜索？

首先来到http://www.google.com/coop/cse/ ，点击右侧按钮“Creat a Custom Search Engine”，然后会要求使用Google帐号登录，登录后就来到第一步。第一步要求填写基本信息，包括：

Search engine name - 给搜索取个名
Search engine description - 简单描述
Search engine keywords - 搜索关键词，提高搜索相关性
Search engine language - 搜索结果语言（简体中文 simplified chinese）
搜索范围：only sites I select
填写要搜索的网站或博客地址例如：www.waterylife.com
AD display - 是否展示广告，如果想结合adsense赚钱，就选Show ads on results pages
同意条款

提交后，进入下图所示的页面，finish 就可以了。

我们可以进入控制面板control panel做一些设置。control panel下有一下菜单：

我们主要设置Look and Feel，Code，Make Money

在Look and Feel 里选择搜索框的样式
在Make Money 里设置是否与Adsense结合
在Code 里设置搜索结果展示页面

这里选择搜索结果展示在博客页面，以及其下面的iframe 项。iframe 项下面的 New ！ 是使用ajax输出搜索结果，但是只有8个，而且不能make money。注意填“搜索结果展示的页面 ”。使用wordpress的朋友可以很容易在后台新增一个页面，然后将 Search results code 加入到这个页面即可（代码模式）。也可以手动建立一个静态页面，然后将代码加入到这个页面中。

Search box code 就是搜索框代码，将代码放到想显示搜索框的地方即可。Search results code 是搜索结果的代码，将其放在建立的页面即可。

大概就是这样了，具体的页面优化，可以根据自己博客的页面设计来制作，做到将搜索结果融入到页面，和谐一点。大家可以搜索本站看搜索结果的页面，以作参考。

参考 http://drupal.org/node/274441

参考代码：(替换 Your search engine ID )

       Php代码   
       
     
 <div id="cse-search-form" style="display:none;">Loading</div>  
 <div id="SubGeRight"></div>  
    
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>  
 <script type="text/javascript">  
   google.load('search', '1', {language : 'en'});  
   google.setOnLoadCallback(function(){  
     var customSearchControl = new google.search.CustomSearchControl('Your search engine ID');  
     customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);  
     var options = new google.search.DrawOptions();  
     options.setSearchFormRoot('cse-search-form');  
     customSearchControl.draw('SubGeRight', options);  
     customSearchControl.execute("<?php echo trim($_GET['keyword']) ?>");  
   }, true);  
 </script>  
 <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />  
 <style type="text/css">  
   .gsc-control-cse {  
     font-family: Arial, sans-serif;  
     border-color: #FFFFFF;  
     background-color: #FFFFFF;  
   }  
   input.gsc-input {  
     border-color: #BCCDF0;  
   }  
   input.gsc-search-button {  
     border-color: #666666;  
     background-color: #CECECE;  
   }  
   .gsc-tabHeader.gsc-tabhInactive {  
     border-color: #E9E9E9;  
     background-color: #E9E9E9;  
   }  
   .gsc-tabHeader.gsc-tabhActive {  
     border-top-color: #FF9900;  
     border-left-color: #E9E9E9;  
     border-right-color: #E9E9E9;  
     background-color: #FFFFFF;  
   }  
   .gsc-tabsArea {  
     border-color: white;  
   }  
   .gsc-webResult.gsc-result {  
     border-color: #FFFFFF;  
     background-color: #FFFFFF;  
   }  
   .gsc-webResult.gsc-result:hover {  
     border-color: #FFFFFF;  
     background-color: #FFFFFF;  
   }  
   .gs-webResult.gs-result a.gs-title:link,  
   .gs-webResult.gs-result a.gs-title:link b {  
     color: #CC2826;  
   }  
   .gs-webResult.gs-result a.gs-title:visited,  
   .gs-webResult.gs-result a.gs-title:visited b {  
     color: #CC2826;  
   }  
   .gs-webResult.gs-result a.gs-title:hover,  
   .gs-webResult.gs-result a.gs-title:hover b {  
     color: #CC2826;  
   }  
   .gs-webResult.gs-result a.gs-title:active,  
   .gs-webResult.gs-result a.gs-title:active b {  
     color: #CC2826;  
   }  
   .gsc-cursor-page {  
     color: #CC2826;  
   }  
   a.gsc-trailing-more-results:link {  
     color: #CC2826;  
   }  
   .gs-webResult.gs-result .gs-snippet {  
     color: #000000;  
   }  
   .gs-webResult.gs-result .gs-visibleUrl {  
     color: #858585;  
   }  
   .gs-webResult.gs-result .gs-visibleUrl-short {  
     color: #858585;  
   }  
   .gsc-cursor-box {  
     border-color: #FFFFFF;  
   }  
   .gsc-results .gsc-cursor-page {  
     border-color: #E9E9E9;  
     background-color: #FFFFFF;  
   }  
   .gsc-results .gsc-cursor-page.gsc-cursor-current-page {  
     border-color: #FF9900;  
     background-color: #FFFFFF;  
   }  
   .gs-promotion.gs-result {  
     border-color: #336699;  
     background-color: #FFFFFF;  
   }  
   .gs-promotion.gs-result a.gs-title:link {  
     color: #0000CC;  
   }  
   .gs-promotion.gs-result a.gs-title:visited {  
     color: #0000CC;  
   }  
   .gs-promotion.gs-result a.gs-title:hover {  
     color: #0000CC;  
   }  
   .gs-promotion.gs-result a.gs-title:active {  
     color: #0000CC;  
   }  
   .gs-promotion.gs-result .gs-snippet {  
     color: #000000;  
   }  
   .gs-promotion.gs-result .gs-visibleUrl,  
   .gs-promotion.gs-result .gs-visibleUrl-short {  
     color: #008000;  
   }  
   /* by peikai*/  
   .gsc-tabHeader.gsc-tabhActive{  
     display:none;  
   }  
   .gs-webResult.gs-result .gs-snippet{  
       font-size:12px;  
   }  
   .gs-webResult.gs-result .gs-title {  
     font-family:Georgia,"Times New Roman",Times,serif;  
     font-size:13pt;  
     overflow:visible;  
    }  
    .gs-webResult.gs-result .gs-title a {  
    }  
    .gs-result .gs-title, .gs-result .gs-title * {  
        color: #CC2826;  
        text-decoration:underline;  
     }  
     .gsc-wrapper{  
         width: 600px;  
     }  
 </style>  

爬虫仔蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
站内搜索

博客分类： Google / Facebook / Pinterest / SNSGoogleWordPressAjax设计模式HTML链接：Google AJAX 搜索 API 参考：http://www.google.com/cse/docs/cref.html?hl=zh-CNhttp://www.google
复制链接

扫一扫

专栏目录