From a3376d1ad133455b73ca893e222c1aec89ae6d44 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Mon, 15 Jun 2020 23:50:54 +0800 Subject: Update searching based on Fuse.js --- assets/js/fuji.js | 37 +++++++++++++++++++++++++++++++++++ assets/scss/_fuji-style/_content.scss | 4 ++++ gulpfile.js | 9 ++++++--- layouts/_default/index.json | 2 +- layouts/_default/search.html | 18 +++++++---------- layouts/partials/scripts-end.html | 27 +++++++++++++++++++++---- package.json | 4 +--- static/assets/css/fuji.min.css | 2 +- static/assets/js/fuji.min.js | 2 +- 9 files changed, 81 insertions(+), 24 deletions(-) diff --git a/assets/js/fuji.js b/assets/js/fuji.js index b72c30e..d1be458 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -83,3 +83,40 @@ document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => } } }); + +// search by fuse.js +function searchAll(key, index) { + let fuse = new Fuse(index, { + keys: ['title', 'tags'], + }); + let result = fuse.search(key); + console.log(result); + if (result.length > 0) { + document.getElementById('search-result').innerHTML = template('search-result-template', result); + } +} + +let urlParams = new URLSearchParams(window.location.search); // get params from URL +if (urlParams.has('search')) { + let key = urlParams.get('search'); // get search keyword + document.querySelector('.search-input input').setAttribute('value', key); + // get search index from json + let xhr = new XMLHttpRequest(); + xhr.open('GET', '/index.json', true); + xhr.responseType = 'json'; + xhr.onerror = function (e) { + console.error(`${xhr.status} ${xhr.statusText}`); + }; + xhr.onload = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + // use index json to search + console.log(xhr.response); + searchAll(key, xhr.response); + } else { + console.error(`${xhr.status} ${xhr.statusText}`); + } + } + }; + xhr.send(null); +} diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index bc3e579..df223e9 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -169,3 +169,7 @@ article { #disqus_thread { padding: 1.25rem 0; } + +#search-result .post:first-child { + padding: 1.5rem 0; +} diff --git a/gulpfile.js b/gulpfile.js index a0df114..792deae 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -58,13 +58,16 @@ function css() { ); } -exports.build = gulp.parallel(js, css); -exports.clean = function () { +function clean() { return del(['static/assets/css/fuji.min.css.map', 'static/assets/js/fuji.min.js.map']); -}; +} + +exports.build = gulp.parallel(js, css, clean); exports.devJs = function () { + devJs(); return gulp.watch('assets/js/fuji.js', { delay: 500 }, devJs); }; exports.devCss = function () { + devJs(); return gulp.watch('assets/**/*.scss', { delay: 500 }, devCss); }; diff --git a/layouts/_default/index.json b/layouts/_default/index.json index a823e62..bf08b0f 100644 --- a/layouts/_default/index.json +++ b/layouts/_default/index.json @@ -1,5 +1,5 @@ {{- $.Scratch.Add "search" slice -}} {{- range (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}} - {{- $.Scratch.Add "search" (dict "title" .Title "tags" .Params.tags "contents" .Plain "permalink" .Permalink) -}} + {{- $.Scratch.Add "search" (dict "title" .Title "tags" .Params.tags "permalink" .Permalink) -}} {{- end -}} {{- $.Scratch.Get "search" | jsonify -}} \ No newline at end of file diff --git a/layouts/_default/search.html b/layouts/_default/search.html index b92861a..f9c808c 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -1,20 +1,16 @@ {{ define "main" }} - +
-
+
- +
- +
- -
-

- Not Finished Yet -

-
- + +
{{ end }} \ No newline at end of file diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html index e5426ad..1cd0c62 100644 --- a/layouts/partials/scripts-end.html +++ b/layouts/partials/scripts-end.html @@ -1,13 +1,34 @@ + +{{ if eq .Section "search" }} + + + + +{{ else if eq .Section "archives" }} +{{ else }} - +{{ end }} + {{ with .Params.player }} +