Simple Jekyll Search
vements
一个 JavaScript 库，用于向任何 Jekyll 博客添加搜索功能。
您有一个用 Jekyll 构建的博客，并且希望在您的博客上提供轻量级搜索功能（纯客户端）？
无需维护服务器配置或数据库。
只需5 分钟即可拥有一个完全可用的可搜索博客。
npm install simple-jekyll-searchsearch.json将以下代码放入 Jekyll 博客根目录中名为search.json的文件中。 （您也可以从这里获取副本）
该文件将用作小型数据源以在客户端执行搜索：
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] SimpleJekyllSearch 需要两个DOM元素才能工作：
以下是您可以在默认配置下使用的代码：
您需要将以下代码放置在要显示搜索的布局中。 （请参阅下面的配置部分进行自定义）
例如在_layouts/default.html中：
<!-- HTML elements for search -->
< input type =" text " id =" search-input " placeholder =" Search blog posts.. " >
< ul id =" results-container " > </ ul >
<!-- or without installing anything -->
< script src =" https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js " > </ script > 通过传入您的配置选项来自定义 SimpleJekyllSearch：
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) SimpleJekyllSearch 的新实例返回一个对象，具有唯一的属性search 。
search是一个用于模拟用户输入并显示匹配结果的函数。
例如：
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )它可用于按标签或类别过滤帖子！
以下是可用选项、使用问题、故障排除和指南的列表。
插件应侦听键盘事件并触发文章搜索和呈现的输入元素。
应在其中呈现搜索结果的容器元素。通常为<ul> 。
您可以将 URL 传递到search.json文件，也可以直接将结果以 JSON 形式传递，以节省获取数据的一次往返。
单个呈现的搜索结果的模板。
模板语法非常简单：只需用花括号将要替换的属性括起来即可。
例如
模板
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json' ,
searchResultTemplate : '<li><a href="{{ site.url }}{url}">{title}</a></li>'
} )将呈现为以下内容
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li >如果search.json包含此数据
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]每当在模板中找到匹配项时就会调用的函数。
它获取当前属性名称、属性值和模板。
如果函数返回一个非未定义的值，它将在模板中被替换。
这对于操作 URL 等可能很有用。
例子：
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )请参阅测试以获取深入的代码示例
将用于对过滤结果进行排序的函数。
例如，它可用于将各个部分分组在一起。
例子：
SimpleJekyllSearch ( {
...
sortMiddleware : function ( a , b ) {
var astr = String ( a . section ) + "-" + String ( a . caption ) ;
var bstr = String ( b . section ) + "-" + String ( b . caption ) ;
return astr . localeCompare ( bstr )
}
. . .
} )如果查询没有匹配任何内容，将显示 HTML。
您可以限制页面上呈现的帖子数量。
启用模糊搜索以允许较少限制的匹配。
传入要排除的术语列表（术语将与正则表达式匹配，因此允许 URL、单词）。
加载数据后调用的函数。
限制在给定时间窗口内可以执行搜索功能的次数。这对于在大型数据集（无论是使用罕见术语还是因为要显示的帖子数量很大）进行搜索时改善用户体验特别有用。如果未提供debounceTime （毫秒），则每次击键都会触发搜索。
remove_chars作为过滤器。例如：在search.json中，替换
"content" : " {{ page.content | strip_html | strip_newlines }} "和
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} "如果在使用 Github 页面时这不起作用，您可以尝试jsonify以确保内容与 json 兼容：
"content" : { { page . content | jsonify } }注意：您不需要在其中使用引号" ，因为jsonify会自动插入它们。
将search.json替换为以下代码：
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}",
" content " : "{{ post.content | strip_html | strip_newlines }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
,
{% for page in site.pages %}
{
{% if page.title != nil %}
" title " : "{{ page.title | escape }}",
" category " : "{{ page.category }}",
" tags " : "{{ page.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ page.url }}",
" date " : "{{ page.date }}",
" content " : "{{ page.content | strip_html | strip_newlines }}"
{% endif %}
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] npm installnpm test cd example ; jekyll serve
# in another tab
npm run cypress -- run感谢多年来所有的贡献者！你是最棒的:)
@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber 等等！
