html Jekyll运行jekyll-lunr-js-search插件的示例搜索页面。

Posted 2021-05-11

---
layout: default
permalink: /search/
---

<!--
http://10consulting.com/2013/03/06/jekyll-and-lunr-js-static-websites-with-powerful-full-text-search-using-javascript/
-->

<div class="home">
	<header class="post-header">
		<h1>Search</h1>
	</header>
	
	<article class="post-content">
		<div id="search">
			<form action="/search" method="get">
				<input type="text" id="search-query" name="q" placeholder="Search" autocomplete="on">
			</form>
		</div>

		<section id="search-results" style="display: none;">
			<p>Search results</p>
			<div class="entries">
			</div>
		</section>
  
		{% raw %}
		<script id="search-results-template" type="text/mustache">
			{{#entries}}
			<article>
				<h3>
					{{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
					<a href="{{url}}">{{title}}</a>
				</h3>
			</article>
			{{/entries}}
		</script>
		{% endraw %}
  
		<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
  
		<script type="text/javascript">
		$(function() {
			$('#search-query').lunrSearch({
				indexUrl: '/js/index.json',           // URL of the `index.json` index data for your site
				results:  '#search-results',          // jQuery selector for the search results container
				entries:  '.entries',                 // jQuery selector for the element to contain the results list, must be a child of the results element above.
				template: '#search-results-template'  // jQuery selector for the Mustache.js template
			});
		});
		</script>
	</article>
</div>