当前位置: 首页 > news >正文

静态博客如何实现站内搜索-大象装入冰箱

静态博客如何实现站内搜索

静态博客

我们通过markdown写文章,
再通过hexo,Jekyll等开源框架,可以生成自己的纯静态博客网站。
通过我们的云服务器,或者github和gitee也支持我们把生成的纯静态页面发布出去,直接能够互联网访问。

但是静态博客如何实现站内搜素呢:

  1. 简单的方式是利用搜索引擎或者第三方提供的站内搜索服务,这里不做这方面的讨论。
  2. 通过js实现搜索,这个我们做详细的展开介绍下】。

js如何实现搜索

其实原理很简单,就像把大象装入冰箱的步骤一样。

把冰箱门打开

维护好配置信息。
比如我们有三篇文章

java入门, 内容:java入门文章
go入门, 内容:go入门文章
python入门, 内容:python入门文章

对文章标题和url进行摘记:

{
    "1": "java入门-url",
    "2": "go入门-url",
    "3": "python入门-url"
}

把文章标题和url用数字关联。

对文章内容进行摘记:

{
    "java":"1-1",
    "go":"2-1",
    "python":"3-1",
    "入门":"1-1,2-1,3-1",
    "文章":"1-1,2-1,3-1",
}

以上内容举例就明白了:
比如"入门":"1-1,2-1,3-1"表示就是”入门“这关键字在出现在文章1的第一行,还出现在文章2的第一行,还出现在文章3的第一行。

其实就是反向索引的一些思路,只不过我们没对内容进行压缩和优化保存,改用对js友好的js格式保存,毕竟个人的笔记量即使每天写,每分钟写。。。

以上摘记内容我们完全可以用自己擅长的语言对内容进行分析产生这样的json内容,并直接当全局变量保存到js中。

把大象放进去

js操作配置信息。
这时候就更简单了,我们获取用户输入的搜索关键字,去json里面匹配。
比如我们输入java,则获取到"1-1",
我们就知道是文章1的第一行出现java这个关键字,
而文章1对应的就是“java入门这篇文章”。

然后把门关上

大象装入冰箱是要三步的,我们也是哈,第三部发布出去。

相关文章:

  • Python:暴力破解密码 - 压缩包、web实战
  • 年轻人不用太过于努力
  • 【HTML学生作业网页】基于HTML+CSS+JavaScript仿南京师范大学泰州学院(11页)
  • 【项目实战】Spring Boot项目整合Jetty、MySQL、Redis和MongoDB
  • Opencv项目实战:15 手势缩放图片
  • 猿创征文|11个开发者必备工具,赶快收藏
  • 零零信安-DD数据泄露报警日报【第40期】
  • 马斯克的这波神操作,让我意识到保持写代码的能力有多重要
  • Android入门第19天-Android里的RatingBar的使用
  • [会议分享]2022年欧洲计算机科学与信息技术会议(ECCSIT 2022)
  • Python --- 面向对象
  • C语言经典题目之汉诺塔问题超详解(4000字数只为能让你听懂这个题目)
  • 信号线上串接电阻的作用
  • OpenFeign的实现原理(附Feign和OpenFeign的区别)
  • 不同性质生物素叠氮试剂Biotin-azide,Biotin-PEG2/PEG3/PEG4-azide特点分享
  • 分享的文章《人生如棋》
  • canvas 高仿 Apple Watch 表盘
  • create-react-app做的留言板
  • Flannel解读
  • isset在php5.6-和php7.0+的一些差异
  • JavaScript-Array类型
  • JAVA并发编程--1.基础概念
  • ucore操作系统实验笔记 - 重新理解中断
  • uva 10370 Above Average
  • v-if和v-for连用出现的问题
  • webgl (原生)基础入门指南【一】
  • 我是如何设计 Upload 上传组件的
  • 一个完整Java Web项目背后的密码
  • ​如何在iOS手机上查看应用日志
  • ###项目技术发展史
  • #100天计划# 2013年9月29日
  • #QT(TCP网络编程-服务端)
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • $(function(){})与(function($){....})(jQuery)的区别
  • (4)(4.6) Triducer
  • (C语言)逆序输出字符串
  • (Note)C++中的继承方式
  • (Python) SOAP Web Service (HTTP POST)
  • (八)Spring源码解析:Spring MVC
  • (分享)自己整理的一些简单awk实用语句
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • (转)Sql Server 保留几位小数的两种做法
  • (转载)虚幻引擎3--【UnrealScript教程】章节一:20.location和rotation
  • .NET Core Web APi类库如何内嵌运行?
  • .net core 连接数据库,通过数据库生成Modell
  • .net mvc部分视图
  • .net 开发怎么实现前后端分离_前后端分离:分离式开发和一体式发布
  • .net 流——流的类型体系简单介绍
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)
  • .NET多线程执行函数
  • .net知识和学习方法系列(二十一)CLR-枚举
  • [1159]adb判断手机屏幕状态并点亮屏幕
  • [C#]获取指定文件夹下的所有文件名(递归)
  • [CVPR 2023:3D Gaussian Splatting:实时的神经场渲染]
  • [GN] 后端接口已经写好 初次布局前端需要的操作(例)