From 9fc697e7b11d462e6929ee435e1eb886653a071d Mon Sep 17 00:00:00 2001 From: "Jesus P Rey (Chuso)" Date: Thu, 4 Feb 2021 21:52:20 +0100 Subject: [PATCH] Add support for client-side search with Fuse.js. Implements #42. Based on https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae --- exampleSite/config.yaml | 8 +++ exampleSite/content/search.md | 52 ++++++++++++++++ layouts/_default/index.json | 5 ++ layouts/_default/search.html | 69 +++++++++++++++++++++ static/js/search.js | 111 ++++++++++++++++++++++++++++++++++ 5 files changed, 245 insertions(+) create mode 100644 exampleSite/content/search.md create mode 100644 layouts/_default/index.json create mode 100644 layouts/_default/search.html create mode 100644 static/js/search.js diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 670c99c..52c5095 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -32,6 +32,14 @@ languages: languageName: 中文 weight: 8 +# At least HTML and JSON are required for the main HTML content and +# client-side JavaScript search +outputs: + home: + - HTML + - RSS + - JSON + # Force a locale to be use, really useful to develop the application ! Should be commented in production, the "weight" should rocks. # DefaultContentLanguage: fr diff --git a/exampleSite/content/search.md b/exampleSite/content/search.md new file mode 100644 index 0000000..0f038c1 --- /dev/null +++ b/exampleSite/content/search.md @@ -0,0 +1,52 @@ +--- +title: "Search Results" +sitemap: + priority : 0.1 +layout: "search" +url: search +--- + + +This file exists solely to respond to /search URL with the related `search` layout template. + +No content shown here is rendered, all content is based in the template layouts/page/search.html + +Setting a very low sitemap priority will tell search engines this is not important content. + +This implementation uses Fusejs, jquery and mark.js + + +## Initial setup + +Search depends on additional output content type of JSON in config.toml +\``` +[outputs] + home = ["HTML", "JSON"] +\``` + +## Searching additional fileds + +To search additional fields defined in front matter, you must add it in 2 places. + +### Edit layouts/_default/index.JSON +This exposes the values in /index.json +i.e. add `category` +\``` +... + "contents":{{ .Content | plainify | jsonify }} + {{ if .Params.tags }}, + "tags":{{ .Params.tags | jsonify }}{{end}}, + "categories" : {{ .Params.categories | jsonify }}, +... +\``` + +### Edit fuse.js options to Search +`static/js/search.js` +\``` +keys: [ + "title", + "contents", + "tags", + "categories" +] +\``` diff --git a/layouts/_default/index.json b/layouts/_default/index.json new file mode 100644 index 0000000..c29397c --- /dev/null +++ b/layouts/_default/index.json @@ -0,0 +1,5 @@ +{{- $.Scratch.Add "index" slice -}} +{{- range .Site.RegularPages -}} + {{- $.Scratch.Add "index" (dict "title" .Title "hero" (partial "helpers/get-hero.html" .) "date" (.Date.Format "January 2, 2006") "summary" .Summary "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}} +{{- end -}} +{{- $.Scratch.Get "index" | jsonify -}} diff --git a/layouts/_default/search.html b/layouts/_default/search.html new file mode 100644 index 0000000..9f7415b --- /dev/null +++ b/layouts/_default/search.html @@ -0,0 +1,69 @@ +{{ define "header" }} + + +{{ end }} + +{{ define "navbar" }} + {{ partial "navigators/navbar-2.html" . }} +{{ end }} + +{{ define "sidebar" }} + {{ $blogHome:="#" }} + {{ if site.IsMultiLingual }} + {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) "posts") }} + {{ end }} + + +{{ end }} + +{{ define "content" }} +
+
+
+
+ + + +
+
+
+
+{{ end }} + +{{ define "scripts" }} + + + +{{ end }} diff --git a/static/js/search.js b/static/js/search.js new file mode 100644 index 0000000..e697ef6 --- /dev/null +++ b/static/js/search.js @@ -0,0 +1,111 @@ +summaryInclude=60; +var fuseOptions = { + shouldSort: true, + includeMatches: true, + threshold: 0.0, + tokenize:true, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 1, + keys: [ + {name:"title",weight:0.8}, + {name:"hero",weight:0.7}, + {name:"summary",weight:0.6}, + {name:"date",weight:0.5}, + {name:"contents",weight:0.5}, + {name:"tags",weight:0.3}, + {name:"categories",weight:0.3} + ] +}; + + +var searchQuery = param("s"); +if(searchQuery){ + $("#search-query").val(searchQuery); + executeSearch(searchQuery); +}else { + $('#search-results').append("

Please enter a word or phrase above

"); +} + + + +function executeSearch(searchQuery){ + $.getJSON( "/index.json", function( data ) { + var pages = data; + var fuse = new Fuse(pages, fuseOptions); + var result = fuse.search(searchQuery); + console.log({"matches":result}); + if(result.length > 0){ + populateResults(result); + }else{ + $('#search-results').append("

No matches found

"); + } + }); +} + +function populateResults(result){ + $.each(result,function(key,value){ + var contents= value.item.contents; + var snippet = ""; + var snippetHighlights=[]; + var tags =[]; + if( fuseOptions.tokenize ){ + snippetHighlights.push(searchQuery); + }else{ + $.each(value.matches,function(matchKey,mvalue){ + if(mvalue.key == "tags" || mvalue.key == "categories" ){ + snippetHighlights.push(mvalue.value); + }else if(mvalue.key == "contents"){ + start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0; + end = mvalue.indices[0][1]+summaryInclude