轻轻松松为自己建一个站内搜索引擎

 更新时间:2016年9月20日 19:05  点击:2252

  提示:请把全角状态下的<>改成半角状态下的<>使用

  很多个人网站的站长都希望为自己的网站建立一个站内搜索引擎,但一不熟悉ASP、PHP、JSP等动态开发技术,另外自己建立站内搜索也需要空间支持相应的动态技术,所以常不得已放弃。其实,何不借用Google打造站内搜索引擎,来方便网友对自己网站的内容进行查找。

  若想在某特定网站内搜索特定的内容(如搜索www.cfan.com.cn中包含关键字“网络”的内容),只需要在Google的搜索栏里输入:“网络 site:cfan.com.cn”即可(不含引号)。如果直接在自己站点的网页上建立一个Google的搜索栏,然后让访问者按Google规定的格式进行查询,那不就能实现Google作为自己站内搜索引擎的功能了吗?但是我们当然不能要求使用者还要特地学习Google对特定网站搜索的格式规范。于是笔者立刻联想到是否可以使用JavaScript脚本使得Google接收的查询关键字后自动加上类似“site:cfan.com.cn”的字符串呢?答案当然是肯定的。在你的网站首页需要放置站内搜索引擎页面的<body>标签的范围内放置如下代码:

<script type="text/javascript">
var domainroot="mysite.com"//个人站点域名,替换成你的网站的网址即可
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.Google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p>站内搜索:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="开始搜索">
</p>
</form>

  脚本的关键部分在于Gsitesearch函数。语句:“curobj.q.value="site:"+domainroot+" "+curobj.qfront.value”的含义为:将“site:”字符串+变  量domainroot、空格、访客填写的关键字依此合并。既使得搜索格式符合Google的语言规范,又使增加了搜索功能的友好性,不需要用户来遵循Google的搜索规则。

  至此,您的专业站内搜索引擎就完成了(见图1 完成的站内引擎)。

  如果我们不但要搜索本站的内容,还要让访客同时能搜索兄弟站点或本类网站的内容,该如何修改呢?接下来我们就对我们刚才的代码做一些推广。

<script type="text/javascript">
function Gsitesearch(curobj){
var domainroot=curobj.domainroot[curobj.domainroot.selectedIndex].value
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}HTML在线编辑器相信大家见得多了,有些流行的在线编辑器具有很丰富的功能。但美中不足的是,现有的HTML在线编辑器设置字号大小通常只限于1-7号字而已,不能更好地满足人们的需要。能不能实现像Word那样任意地设置字号大小呢?经过长时间的攻关,Bound0终于可以肯定地回答这个问题了,呵呵呵!请大家共同分享此“Eureka之喜悦”吧!

我们通常所见的内嵌在网页中的HTML在线编辑器,其核心本质是一个IFRAME

例如:

<IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME>

令 Editor.document.designMode="ON";

此时这个IFRAME就是一个设计模式的HTML编辑器了,可以通过脚本

Editor.document.selection.createRange().execCommand(command)

对选中的内容执行command,进行编辑操作。

由于浏览器本身提供的编辑功能非常有限,因此现在流行的HTML在线编辑器大都进行了一些扩展。

在本文发表之前,HTML在线编辑器在设计模式下的字号(字体大小)任意设定功能尚无成功实现,本文所述技术不仅在此方面实现了零的突破,还对HTML在线编辑器的其他扩展功能的实现作出了广泛的启示。

现在流行的HTML在线编辑器的功能可以说已经很丰富了,为什么唯独任意设置字体大小这个看起来并不华丽的功能没有被做出来呢?让我们先来了解一下其中的原因好了:

假设编辑区的HTML内容(Editor.document.body.innerHTML)是:

<H1>逍遥主义者的宣言</H1>

<H3>十个小老头
<BR>朱氵太子
</H3>

<P>我们不是败家浪子,我们从不游手好闲;我们不是无用书生,我们从不怨天忧地;我们不是嬉皮士,我们从不玩世不恭;我们不是妄想家,我们从不脱离实际;我们不是阿Q,我们从不麻木颓废;我们不是狂人,我们从不争风吃醋。我们是创造者,我们是改变者,我们是革命者。我们不是在不幸中去幻想幸福的人,我们甚至不是去追求、寻找幸福的人,我们是自己制造幸福的人,我们是快乐的发源者。首先,在我们经历必当经历的经历时,我们不允许自己不快乐!这就是,逍遥主义的真谛。</P>

<P><BIG>将你的梦打开,填进我的希望。谁都不必介怀,一点点的分量。面对别人述说,命运烛转轮回,世间天空海阔,种种因缘寂晦……</BIG></P>

假设选中的是红色的部分,则Editor.document.selection.createRange().htmlText的内容是:

<P>者。我们不是在不幸中去幻想幸福的人,我们甚至不是去追求、寻找幸福的人,我们是自己制造幸福的人,我们是快乐的发源者。首先,在我们经历必当经历的经历时,我们不允许自己不快乐!这就是,逍遥主义的真谛。</P>

<P><BIG>将你的梦打开,填进我</BIG></P>

看见多出来几个蓝色的标签了吧?产生这种现象是因为:“任何时候,document.selection.createRange().htmlText取出来的html代码都是完整成对的,即使当前选中的内容横跨了几个不同的标签”(卖坏梨语),所以IE会自作主张地把不完整的标签补齐。

就是因为这个原因,当选中的内容在Editor.document.body.innerHTML中对应的代码包含不完整的标签时,在Editor.document.selection.createRange()上做pasteHTML可能会吃不进去(有不完整的<table>等时),或者出现明显的BUG。

而现在的HTML在线编辑器所提供的除了基本的Editor.document.selection.createRange().execCommand(command)之外的各种功能几乎都是通过在Editor.document.selection.createRange()上做pasteHTML来实现的。所以字号的自由设定才始终没能实现。

一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。很多朋友对我说,她/他有代码洁癖,即,让她/他写XHTML的话,从来不愿意加上额外的标签(tag)。举个简单的例子,相信很多人从很多地方都看到过的:

<div id="nav">
    <ul>
        <li></li>
        <li></li>
        ......
    </ul>
</div>


<

  Micrsoft推出IE7已有一段时间了,相信大家已领略到IE7带来的从视觉和功能上的改进了,不过作为Web设计人员可要注意了:在CSS文件中,如:

.text{
color: #ff0000 !important;
color: #000000;
}

    以上代码在IE7中显示的文字颜色是红的。这一意味着新版的IE7认识!important了。大多数WebStandard设计者都用!important解决IE和Firefox对margin的理解问题,如果不用!important分别设margin值,稍微有点布局的符合WebStandard的网页必然在IE或Firefox下有一个是面目全非的。不要认为微软这个激进的做法不会对现有代码造成影响。

    在IE6、IE7过度阶段,使用IE6的用户依然会不理解带!important的CSS,而使用IE7的用户会和使用Firefox的用户一样理解!important,问题是IE7和Firefox对margin和padding的处理还是不同,换句话说现在开始要找别的方法给微软擦屁股了。




鉴于很多朋友问到如何切图这个问题,又鉴于这个问题可大可小,一两句话是绝对讲不清楚的,所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK,让我们开始:

  step1:在PhotoShop中打开设计稿,如下图


  选择工具板上的slice切片工具,先大刀阔斧的切上一番!技巧: 大面积的色块单独切成一块,尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示:


  step2:在PhotoShop中选择file-save for web...来输出,这里要注意一些参数的选择:

[!--infotagslink--]

相关文章

  • MySQL中的联合索引学习教程

    联合索引又叫复合索引。对于复合索引:Mysql从左到右的使用索引中的字段,一个查询可以只使用索引中的一部份,但只能是最左侧部分。例如索引是key index (a,b,c). 可以支持a | a,b| a,b,c 3种组合进行查找,但不支持 b,c进...2015-11-24
  • vue+高德地图实现地图搜索及点击定位操作

    这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
  • MySQL中的唯一索引的简单学习教程

    mysql 唯一索引UNIQUE一般用于不重复数据字段了我们经常会在数据表中的id设置为唯一索引UNIQUE,下面我来介绍如何在mysql中使用唯一索引UNIQUE吧。 创建唯一索引的目的不是为了提高访问速度,而只是为了避免数据出现重复...2015-11-24
  • 站内搜索关键词变亮方法

    我们这个做法是把搜索结果出来,与搜索关键词相同的替换成高亮的字, 我们会用到str_replace(你找的关键字,你找的关键字,$str); 就这么容易了,好了下面我们来看一...2016-11-25
  • R语言 install.packages 无法读取索引的解决方案

    这篇文章主要介绍了R语言 install.packages 无法读取索引的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
  • 怎么对百度网页搜索的检索指标进行评估

    用户为满足自己某种需求而来到搜索引擎的,判断用户的需求是做好网站的开始。只有准确地判断出用户需求,了解用户搜索的目的,才能合理地衡量出一个网站结果的质量好,做好搜...2016-10-10
  • MYSQL中常用的强制性操作(例如强制索引)

    其他强制操作,优先操作如下:mysql常用的hint对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法。同样,在mysql里,也有类似的hint功能。下面介绍一些常用的。强制索引 FORCE INDEX...2014-05-31
  • php搜索csv表格中是否存在指定数据

    php搜索csv中的数据原理是打开csv文件,然后一行行搜索指定的内容是否包含在我们读取这代码中,如果是返回true。 //搜索csv中指定内容 代码如下 复制代码...2016-11-25
  • 详解c#索引(Index)和范围(Range)

    这篇文章主要介绍了c#索引(Index)和范围(Range)的相关资料,帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下...2020-12-08
  • pycharm 如何取消连按两下shift出现的全局搜索

    这篇文章主要介绍了pycharm 如何取消连按两下shift出现的全局搜索?下面小编就为大家介绍一下解决方法,还等什么?一起跟随小编过来看看吧...2021-01-16
  • Angular2搜索和重置按钮过场动画

    这篇文章主要介绍了Angular2搜索和重置按钮过场动画,需要的朋友可以参考下...2017-05-27
  • 基于element-ui封装可搜索的懒加载tree组件的实现

    这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-23
  • MySQL 索引知识汇总

    这篇文章主要介绍了MySQL 索引使用方法的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-05
  • yii2带搜索功能的下拉框实例详解

    带搜索功能下拉框在项目中经常会用到,下面小编把实现代码分享到脚本之家平台,供大家参考...2016-05-13
  • oracle索引的测试实例代码

    这篇文章主要给大家介绍了关于oracle索引测试的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-17
  • MySQL带你秒懂索引下推

    如果你在面试中,听到MySQL5.6”、“索引优化” 之类的词语,你就要立马get到,这个问的是“索引下推”。本文就来分分享这个小知识点索引下推...2021-09-16
  • 如何避免被搜索引擎视为作弊

      一个网站要想成功注册,它起码应具备两个条件,一是网站本身要有较好的内容和设计,二是网站没有作弊行为。这里所谓的“作弊”,是指采用一些特殊的、有悖常规的网...2016-09-20
  • 网站被搜索引擎降权有效处理方法

    网站被搜索引擎教程降权,从多个方面可以看得出来,例如网站收录数量减少,首页不在第一位,关键词排名下降等。被降权的原因涉及很多的因素,在此不再列举,下面千盟网络主要谈一...2016-10-10
  • PHP网络开发详解:搜索页面的设计

    PHP对于数据库的搜索主要通过使用SQL语句中的like子句来实现。如果同时搜索多个关键词,可以使用union子句来将搜索结果合并起来。以下代码实现了一个搜索页面...2016-11-25
  • php函数索引(1)

    Abs: 取得绝对值。 Acos: 取得反余弦值。 ada_afetch: 取得数据库的返回列。 ada_autocommit: 开关自动改动功能。 ada_close: 关闭 Adabas D 链接。 ada_commit: 改...2016-11-25