站内搜索功能的几种实现方式
原文地址:https://pengfeixc.com/blogs/website/site-search
今天花了一些时间优化了网站的搜索功能。
一.简易版搜索
之前的网站搜索功能实现比较简单。过程大致如下:
- 用户在搜索框输入要搜索的关键字。
- 浏览器根据关键字,发送搜索请求。
- 服务器收到请求。
- 服务器根据搜索关键字,查询数据库(根据文章标题和文章描述),将查到的文章返回给浏览器。
- 浏览器根据请求response,渲染文章列表。
由于这个搜索功能只考虑了文章的标题和描述,没有搜索文章的内容,功能很弱,无法满足一般的搜索需求,所以一直计划着改进这个搜索功能。接下来的内容,都是我在尝试改进的过程中查找到的资料,在这里分享给大家。
二.两个Library
LunrJs
npm install lunr
<script src="https://unpkg.com/lunr/lunr.js"></script>
var documents = [{"name": "Lunr","text": "Like Solr, but much smaller, and not as bright."}, {"name": "React","text": "A JavaScript library for building user interfaces."}, {"name": "Lodash","text": "A modern JavaScript utility library delivering modularity, performance & extras."
}]
使用documents
创建index,想要在text
字段中搜索,name
是标识符。
var idx = lunr(function () {this.ref('name')this.field('text')documents.forEach(function (doc) {this.add(doc)}, this)
})
idx.search("bright");
[{"ref": "Lunr","score": 1.136,"matchData": {"metadata": {"bright": {"text": {}}}}}
]
ref
表示创建index时的标识符。score
表示分数,表示该页面的匹配程度,分数越高,匹配度越高。matchData
表示匹配的数据。
使用Lunr,完全可以满足网站内部的搜索,感兴趣的可以试试。
三.自定义Search Engine
一些机构提供了自定义搜索引擎的界面,可以嵌入到网站内使用,有付费的也有免费的。下面我介绍两个比较好且免费的,谷歌和bing。
google自定义搜索引擎
google Programmable Search Engine,谷歌提供的可以免费使用的自定义搜索引擎。
优点自然不用说,就是将谷歌搜索引擎嵌入到网站内部,可以限定搜索内容的范围,例如限定在本网站。下面是我使用google自定义搜索引擎搜索本站内容下的页面,搜索关键字为typescirpt。
缺点就是有墙,需要vpn翻墙。
所以很可惜,因为需要梯子,我放弃了google搜索引擎。希望能有一天可以不用vpn也能用上google搜索吧。
bing自定义搜索引擎
必应也提供了自定义搜索引擎,与google的功能差不多,界面也可以完全自定义,而且不需要翻墙哦。
戳这里进入官方页面。微软也提供了使用教程,请戳这里。
下图是我试用,bing自定义搜索引擎,搜索我的网站下的内容截图。
按照官方教程,自定义完成后,可以嵌入到个人网站内,免费使用,十分方便。
但是使用此功能,需要订阅Azure的服务,虽然是免费的,但是订阅时,需要提供外汇银行卡。所以想要使用bing自定义搜索引擎,要提前办一张visa卡哦。
四.最简单的方法
最简单的方法,就是直接利用google、bing和百度的浏览器搜索功能。
这也是目前(2021年09月27日)我选择的方式,我选择的是bing。这里主要是利用到一个技巧,当我们使用bing搜索时,可以限定搜索某个域名下的内容。例如在我的网站内搜索"typescript"时,可以在浏览器搜索框输入以下文字。
typescript site: pengfeixc.com
以下是我用bing搜索的图片。
所以,只需要在网站内部,跳转到bing,并且指定搜索内容就可以了。
可以通过search api指定query字符串的方式,这里列出了所有查询字符串参数。
参考文档,使用以下格式的url就可以打开bing搜索,在指定域名下查询指定内容。
https://bing.com/search?q=<查找的内容>%20site%3A+<指定的域名>
其中%20
和%3A
是html编码,因为url地址栏不支持特殊字符。戳这里查看html编码字符。
希望,以上内容可以帮到大家。
(完)
站内搜索功能的几种实现方式相关推荐
- 使用 Swiftype 给 Hexo 搭建的博客添加站内搜索功能
当我们的 博客 文章变的越来越多的时候,就非常需要使用 站内搜索 功能,否则寻找某一篇文章就会变的麻烦,Swiftype 是一个非常好的站内搜索平台,并且是 免费 的,可以到 我的博客 去预览一下搜索 ...
- 如何加强站内搜索功能
简书站内搜索功能太简陋,还有很大提升空间: 搜索指定作者 有时候自己写的文章太多,某篇文章有印象写过,但却找不到,这时候可以通过指定作者搜索功能全文查找自己的文章 搜索24小时热搜关键词 image. ...
- PHP站内搜索功能(laravel自带Scout驱动+elasticsearch)
站内搜索 由于最近做的网站需要用到网站的站内搜索,我也是偷偷摸摸学了一手,希望有需要的朋友也可以看看 搜索引擎 Elasticsearch 官方网站 https://www.elastic.co/cn ...
- 谷歌 Google Custom Search 站内搜索功能
谷歌 Google Custom Search 站内搜索功能 一. 进入设置网址 https://cse.google.com 二. 登入谷歌账号,没有的需申请 三. 新增搜索引擎,添加网址 点击创建 ...
- 百度站内搜索代码php,网页嵌入百度搜索条(含站内搜索功能)
网页嵌入百度搜索条(含站内搜索功能) 样式一: 代码: function g(formname) { var url = "http://www.baidu.com/baidu"; ...
- Kesion CMS 站内搜索功能
虽然将KesionCMS站内搜索功能成功移植到了自己站点里,但对于它的实现原理.代码.标签并不太懂,所以这次移植成功花了很多时间和精力修改代码,记录下来方便以后使用. 一.每个页面都有的通用搜索框(从 ...
- html织梦站内搜索代码,简单三步-实现dede站内搜索功能
前几天,在帮一个客户在做网站时,因为客户要求网站内要弄一个产品搜索功能.因为才接触dede不久,对于dede也不是很熟悉.在网上查询了一些资料,但觉得网上的资料很杂乱,把一个简单的东西变为复杂化了.下 ...
- 简单三步-实现dede站内搜索功能
第一步:找到对应的搜索模板的代码 我们都知道,dede有自带的搜索功能,我们只要找到对应的模板,然后把我们想要的代码拿出来就行了.具体如下: 首先进入templets-->default--&g ...
- -gMIS持续优化更新, +InSiteSearch站内搜索
2019独角兽企业重金招聘Python工程师标准>>> -gMIS 部署和应用的场景越来越多,最近在考虑为所有gMIS承载管理的数据库系统增加一个站内搜索功能, +InSiteSea ...
- ElasticSearch技术方案(二)——站内搜索
文章目录 背景 ES实现站内搜索 ES实现站内搜索 流程图 站内搜索实现分析 SpringBoot整合SpringData ElasticSearch 1. 引入依赖: 2.配置application ...
最新文章
- 什么是CS/BS(一)转
- java去掉rn,React Native删除第三方开源组件的依赖包
- 成功解决AttributeError: 'Word2Vec' object has no attribute 'index2word'
- 网页HTTP协议 get和post请求区别?(HTTP中Get、Post、Put与Delete的区别)
- mysql 写磁盘_图解MySQL | [原理解析] MySQL insert 语句的磁盘写入之旅
- 前端将二进制数据流转为文件_前端通过二进制流下载文件
- springboot使用ImportBeanDefinitionRegistrar 动态注册bean
- 深入理解css优先级
- react全局状态管理_react状态管理redux
- 三层体系结构学习总结
- MxNet 迁移学习实现深度学习分类
- 不一样的三一重工:重在选择 —— 三一集团CIO潘睿刚专访系列之一
- 境内银行卡磁条信息格式
- 好用的文件批量改名工具推荐
- 教程,word导出为pdf既要书签和链接又要高清图片
- 同花顺 python量化交易_开启量化第一步!同花顺iFinD数据接口免费版简易操作教程...
- 一天一个产品分析之美拍_米米米米粒口红_新浪博客
- 计算机网络实验-----常用网络命令操作
- 台式机win10关闭fn热键_笔记本fn键,小编告诉你笔记本fn键怎么取消
- 荣联科技:专注技术与行业深度融合,赋能行业数字化转型