Files
pages/2021/07/23/search.html
2025-12-31 16:00:29 +00:00

325 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>如何给博客加上全文搜索功能 | Mayx的博客</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="如何给博客加上全文搜索功能" />
<meta name="author" content="mayx" />
<meta property="og:locale" content="zh_CN" />
<meta name="description" content="原来JavaScript比Java还难" />
<meta property="og:description" content="原来JavaScript比Java还难" />
<meta property="og:site_name" content="Mayx的博客" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2021-07-23T00:00:00+08:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="如何给博客加上全文搜索功能" />
<meta name="google-site-verification" content="huTYdEesm8NaFymixMNqflyCp6Jfvd615j5Wq1i2PHc" />
<meta name="msvalidate.01" content="0ADFCE64B3557DC4DC5F2DC224C5FDDD" />
<meta name="yandex-verification" content="fc0e535abed800be" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"mayx"},"dateModified":"2021-07-23T00:00:00+08:00","datePublished":"2021-07-23T00:00:00+08:00","description":"原来JavaScript比Java还难","headline":"如何给博客加上全文搜索功能","mainEntityOfPage":{"@type":"WebPage","@id":"/2021/07/23/search.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/2021/07/23/search.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="canonical" href="https://mabbs.github.io/2021/07/23/search.html" />
<link type="application/atom+xml" rel="alternate" href="/atom.xml" title="Mayx的博客" />
<link rel="alternate" type="application/rss+xml" title="Mayx的博客(RSS)" href="/rss.xml" />
<link rel="alternate" type="application/json" title="Mayx的博客(JSON Feed)" href="/feed.json" />
<link rel="stylesheet" href="/assets/css/style.css?v=1767196818" />
<!--[if !IE]> -->
<link rel="stylesheet" href="/Live2dHistoire/live2d/css/live2d.css" />
<!-- <![endif]-->
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mayx的博客" />
<link rel="webmention" href="https://webmention.io/mabbs.github.io/webmention" />
<link rel="pingback" href="https://webmention.io/mabbs.github.io/xmlrpc" />
<link rel="preconnect" href="https://summary.mayx.eu.org" crossorigin="anonymous" />
<link rel="prefetch" href="https://www.blogsclub.org/badge/mabbs.github.io" as="image" />
<link rel="blogroll" type="text/xml" href="/blogroll.opml" />
<link rel="me" href="https://github.com/Mabbs" />
<script src="/assets/js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
var lastUpdated = new Date("Thu, 01 Jan 2026 00:00:18 +0800");
var BlogAPI = "https://summary.mayx.eu.org";
</script>
<script src="/assets/js/main.js"></script>
<!--[if !IE]> -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-137710294-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137710294-1');
</script>
<script src="/assets/js/instant.page.js" type="module"></script>
<!-- <![endif]-->
</head>
<body>
<!--[if !IE]> --><noscript><marquee style="top: -15px; position: relative;"><small>发现当前浏览器没有启用JavaScript这不影响你的浏览但可能会有一些功能无法使用……</small></marquee></noscript><!-- <![endif]-->
<!--[if IE]><marquee style="top: -15px; position: relative;"><small>发现当前浏览器为Internet Explorer这不影响你的浏览但可能会有一些功能无法使用……</small></marquee><![endif]-->
<div class="wrapper">
<header class="h-card">
<h1><a class="u-url u-uid p-name" rel="me" href="/">Mayx的博客</a></h1>
<img src="https://avatars0.githubusercontent.com/u/17966333" fetchpriority="high" class="u-photo" alt="Logo" style="width: 90%; max-width: 300px; max-height: 300px;" />
<p class="p-note">Mayx's Home Page</p>
<form action="/search.html">
<input type="text" name="keyword" id="search-input-all" placeholder="Search blog posts.." />&#160;<input type="submit" value="搜索" />
</form>
<br />
<p class="view"><a class="u-url" href="/Mabbs/">About me</a></p>
<ul class="downloads">
<li style="width: 270px; border-right: none;"><a href="/MayxBlog.tgz">Download <strong>TGZ File</strong></a></li>
</ul>
</header>
<section class="h-entry">
<small><time class="date dt-published" datetime="2021-07-23T00:00:00+08:00">23 July 2021</time> - 字数统计1447 - 阅读大约需要5分钟 - Hits: <span id="/2021/07/23/search.html" class="visitors">Loading...</span></small>
<h1 class="p-name">如何给博客加上全文搜索功能</h1>
<p class="view">by <a class="p-author h-card" href="//github.com/Mabbs">mayx</a></p>
<div id="outdate" style="display:none;">
<hr /><p>
这是一篇创建于 <span id="outime"></span> 天前的文章,其中的信息可能已经有所发展或是发生改变。
</p>
</div>
<script>
daysold = Math.floor((new Date().getTime() - new Date("Fri, 23 Jul 2021 00:00:00 +0800").getTime()) / (24 * 60 * 60 * 1000));
if (daysold > 90) {
document.getElementById("outdate").style.display = "block";
document.getElementById("outime").innerHTML = daysold;
}
</script>
<hr />
<b>AI摘要</b>
<p id="ai-output">这篇文章讲述了作者的经历他们在给自己的静态博客添加全文搜索功能时遇到的挑战。原计划由于博客内容量不大和性能考虑而未实施后来发现了一个名为Simple-Jekyll-Search的插件但却遇到异步加载内容和搜索方法触发时机的问题。作者在尝试多种解决方案后最终决定放弃插件自带的AJAX转而使用jQuery的AJAX来解决加载问题。作者在文中表达了JavaScript学习的困难以及对中文互联网编程资源质量的不满。</p>
<hr />
<ul><li><a href="#起因">起因</a></li><li><a href="#痛苦的写代码时间">痛苦的写代码时间</a></li><li><a href="#突发奇想的解决">突发奇想的解决</a></li><li><a href="#最终的代码">最终的代码</a></li><li><a href="#后记">后记</a></li></ul>
<hr />
<main class="post-content e-content" role="main"><p>原来JavaScript比Java还难<!--more--></p>
<h1 id="起因">
<a href="#起因"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 起因
</h1>
<p>前两天,我在看群的时候看到了<a href="https://github.com/TMaize/tmaize-blog">其他人的博客</a>,打开随便看了两眼莫名其妙的就点到搜索页面上了,随手一输那个效果想不到还不错,有那个全文搜索功能。 </p><p>
其实我之前也想搞全文搜索,但是作为静态博客,全文搜索意味着客户端要遍历所有的文章,想想好像挺耗时就没搞。但是再想想我写几百万字可能还没有一张图片大,似乎对用户体验也不会有特别大的影响,而且最主要的是我之前博客用的那个<a href="https://github.com/androiddevelop/jekyll-search">破烂玩意</a>它需要调用bootstrap库这库大也就算了但是bootstarp的样式表会影响我博客的效果我给那个插件作者<a href="https://github.com/androiddevelop/jekyll-search/issues/7">反馈</a>之后人家完全不在乎。行吧,开源作者有这个权利,那我只好换一家了。</p>
<h1 id="痛苦的写代码时间">
<a href="#痛苦的写代码时间"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 痛苦的写代码时间
</h1>
<p>我最开始是想用那个最开始看到的那个博客上的代码然后随便改改用,但是那个代码的耦合性太高了,我也不想整些太多余的代码,我是拆了半天没拆出来之后我就放弃了,从网上搜搜看有没有更合适的。 <del>自己写那是不可能的我哪会JS啊😂</del> </p><p>
后来我找到了<a href="https://github.com/christian-fei/Simple-Jekyll-Search">Simple-Jekyll-Search</a>这个项目看起来好像还挺简单的实际试了一下也挺简单的而且还支持全文搜索可惜就是不能高亮被搜索词。按它的说明用确实挺不错不过我的博客结构如果加搜索的话如果单独设置成一个超链接到单独的页面实在是太不明显了后来我想了想干脆还是设置成搜索框吧到时候用URL参数把内容传过去搜索也算是挺方便的。但是有个很严重的问题就是这个库搜索要么就是键盘输入触发要么就是用它带的search方法触发。最开始我还没看见那个search方法想了半天想不出来怎么才能触发搜索后来倒是看见了那个方法不过还是有很大的问题那就是我的代码肯定是在页面加载时运行的但是那个插件搜索前需要把我全文的内容加载进来。这个加载需要时间而且还是异步的这就导致我根本不知道那个方法什么时候可以使用。如果在它加载完成之前调用就搜索不到内容这就很令人伤脑筋……就这个东西让我改代码<a href="https://github.com/Mabbs/mabbs.github.io/commits/master/search.html">改了几十次</a>看文档倒是说它加载完成时可以用success设置一个回调函数然而实际上那是个假的选项我试了一下就算是数据没有载入完它也会执行回调函数这搞得我实在是没办法说实话我JS的水平真的不太行主要是JS的语法真的是很有特色和其他语言都不一样而且作为可以操作HTML的语言还有那个异步都注定它与其他语言是不一样的。总之新手还是别学JS了学PHP都比JS好。</p>
<h1 id="突发奇想的解决">
<a href="#突发奇想的解决"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 突发奇想的解决
</h1>
<p>之后我又看了半天并研究了一下那个插件的源代码不管咋样目前问题看起来就是出在AJAX的异步上了而且最重要的是回调函数是假的那我看算了我不用这个垃圾插件的AJAX了我用jQuery的AJAX它不香吗所以我就用jQuery来加载我博客的全文内容最终可算是解决了问题。</p>
<h1 id="最终的代码">
<a href="#最终的代码"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 最终的代码
</h1>
<p>搜索引擎的代码 <code class="language-plaintext highlighter-rouge">search.html</code> <a href="https://github.com/Mabbs/mabbs.github.io/blob/master/search.html">https://github.com/Mabbs/mabbs.github.io/blob/master/search.html</a> </p><p>
全文索引的代码 <code class="language-plaintext highlighter-rouge">search.json</code> <a href="https://github.com/Mabbs/mabbs.github.io/blob/master/search.json">https://github.com/Mabbs/mabbs.github.io/blob/master/search.json</a></p>
<h1 id="后记">
<a href="#后记"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 后记
</h1>
<p>感觉这个问题真的是在我所有学习的编程语言中解决最曲折的了主要还有一个问题就是网上的教程好多都是完全没用的东西真的中文互联网根本学不成编程全都是垃圾在垃圾堆里找点可能有点用的东西结果还是啥烟雾弹虽然我很看好前端但是JS真的是把我整恶心了。</p></main>
<small style="display: block">tags: <a rel="category tag" class="p-category" href="/search.html?keyword=%E6%90%9C%E7%B4%A2"><em>搜索</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=%E5%8D%9A%E5%AE%A2"><em>博客</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=%E5%85%A8%E6%96%87"><em>全文</em></a> <span style="float: right;"><a href="https://gitlab.com/mayx/mayx.gitlab.io/tree/master/_posts/2021-07-23-search.md">查看原始文件</a></span></small>
<h4 style="border-bottom: 1px solid #e5e5e5;margin: 2em 0 5px;">推荐文章</h4>
<p id="suggest-container">Loading...</p>
<script>
var suggest = $("#suggest-container");
$.get(BlogAPI + "/suggest?id=/2021/07/23/search.html&update=" + lastUpdated.valueOf(), function (data) {
if (data.length) {
getSearchJSON(function (search) {
suggest.empty();
var searchMap = {};
for (var i = 0; i < search.length; i++) {
searchMap[search[i].url] = search[i];
}
var tooltip = $('<div class="content-tooltip"></div>').appendTo('body').hide();
for (var j = 0; j < data.length; j++) {
var item = searchMap[data[j].id];
if (item) {
var link = $('<a href="' + item.url + '">' + item.title + '</a>');
var contentPreview = item.content.substring(0, 100);
if (item.content.length > 100) {
contentPreview += "……";
}
link.hover(
function(e) {
tooltip.text($(this).data('content'))
.css({
top: e.pageY + 10,
left: e.pageX + 10
})
.show();
},
function() {
tooltip.hide();
}
).mousemove(function(e) {
tooltip.css({
top: e.pageY + 10,
left: e.pageX + 10
});
}).data('content', contentPreview);
suggest.append(link);
suggest.append(' - ' + item.date + '<br />');
}
}
});
} else {
suggest.html("暂无推荐文章……");
}
});
</script>
<br />
<div class="pagination">
<span class="prev">
<a href="/2021/07/13/wifi.html">
上一篇绕过Portal认证的另一个想法
</a>
</span>
<br />
<span class="next">
<a href="/2021/08/06/pcb.html">
下一篇:最近打电路板的体验
</a>
</span>
</div>
<!--[if !IE]> -->
<link rel="stylesheet" href="/assets/css/gitalk.css">
<script src="/assets/js/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script>
var gitalk = new Gitalk({
clientID: '36557aec4c3cb04f7ac6',
clientSecret: 'ac32993299751cb5a9ba81cf2b171cca65879cdb',
repo: 'mabbs.github.io',
owner: 'Mabbs',
admin: ['Mabbs'],
id: '/2021/07/23/search', // Ensure uniqueness and length less than 50
distractionFreeMode: false, // Facebook-like distraction free mode
proxy: "https://cors-anywhere.mayx.eu.org/?https://github.com/login/oauth/access_token"
})
gitalk.render('gitalk-container')
</script>
<!-- <![endif]-->
</section>
<!--[if !IE]> -->
<div id="landlord" style="left:5px;bottom:0px;">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="500" height="560" class="live2d"></canvas>
<div class="live_talk_input_body">
<form id="live_talk_input_form">
<div class="live_talk_input_name_body" >
<input type="checkbox" id="load_this" />
<input type="hidden" id="post_id" value="/2021/07/23/search.html" />
<label for="load_this">
<span style="font-size: 11px; color: #fff;">&#160;想问这篇文章</span>
</label>
</div>
<div class="live_talk_input_text_body">
<input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀?" />
<button type="submit" class="live_talk_send_btn" id="talk_send">发送</button>
</div>
</form>
</div>
<input name="live_talk" id="live_talk" value="1" type="hidden" />
<div class="live_ico_box" style="display:none;">
<div class="live_ico_item type_info" id="showInfoBtn"></div>
<div class="live_ico_item type_talk" id="showTalkBtn"></div>
<div class="live_ico_item type_music" id="musicButton"></div>
<div class="live_ico_item type_youdu" id="youduButton"></div>
<div class="live_ico_item type_quit" id="hideButton"></div>
<input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
<audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
<input id="duType" value="douqilai" type="hidden" />
</div>
</div>
<div id="open_live2d">召唤伊斯特瓦尔</div>
<!-- <![endif]-->
<footer>
<p>
<small>Made with ❤ by Mayx<br />Last updated at 2026-01-01 00:00:18<br /> 总字数614622 - 文章数178 - <a href="/atom.xml" >Atom</a> - <a href="/README.html" >About</a></small>
</p>
</footer>
</div>
<script src="/assets/js/scale.fix.js"></script>
<!--[if !IE]> -->
<script src="/assets/js/main_new.js"></script>
<script src="/Live2dHistoire/live2d/js/live2d.js"></script>
<script src="/Live2dHistoire/live2d/js/message.js"></script>
<!-- <![endif]-->
</body>
</html>