implement client side site search
see https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae
This commit is contained in:
parent
d1b0727790
commit
cfaa9504a1
4 changed files with 147 additions and 0 deletions
5
layouts/_default/index.json
Normal file
5
layouts/_default/index.json
Normal file
|
@ -0,0 +1,5 @@
|
|||
{{- $.Scratch.Add "index" slice -}}
|
||||
{{- range .Site.RegularPages -}}
|
||||
{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
|
||||
{{- end -}}
|
||||
{{- $.Scratch.Get "index" | jsonify -}}
|
25
layouts/_default/search.html
Normal file
25
layouts/_default/search.html
Normal file
|
@ -0,0 +1,25 @@
|
|||
{{ define "content" }}
|
||||
<script src="/jquery-3.4.0.js"></script>
|
||||
<script src="/fuse.js"></script>
|
||||
<script src="/jquery.mark.js"></script>
|
||||
<script src="/search.js"></script>
|
||||
|
||||
<div class="my-auto" >
|
||||
<form action="{{ "search" | absURL }}">
|
||||
<input id="search-query" name="s"/>
|
||||
</form>
|
||||
<div id="search-results">
|
||||
<h3>Matching pages</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
|
||||
<script id="search-result-template" type="text/x-js-template">
|
||||
<div id="summary-${key}">
|
||||
<h4><a href="${link}">${title}</a></h4>
|
||||
<p>${snippet}</p>
|
||||
${ isset tags }<p>Tags: ${tags}</p>${ end }
|
||||
${ isset categories }<p>Categories: ${categories}</p>${ end }
|
||||
</div>
|
||||
</script>
|
||||
{{ end }}
|
Loading…
Add table
Add a link
Reference in a new issue