From c42924047c6f654c4723746790e041f8907ed378 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Tue, 16 Jun 2020 14:00:53 +0800 Subject: Searching now works --- assets/js/fuji.js | 45 ++++++++++++++++++++++++++++------- assets/scss/_fuji-style/_content.scss | 42 +++++++++++++++++++++----------- assets/scss/_fuji-theme/_style.scss | 43 +++++++++++++++++++++++++++++++++ layouts/_default/index.json | 2 +- layouts/_default/search.html | 29 +++++++++++++++++++--- layouts/partials/post-meta.html | 2 +- layouts/partials/scripts-end.html | 27 ++++----------------- static/assets/css/fuji.min.css | 2 +- static/assets/js/fuji.min.js | 2 +- 9 files changed, 142 insertions(+), 52 deletions(-) diff --git a/assets/js/fuji.js b/assets/js/fuji.js index 55e93b5..bf9eabc 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -85,38 +85,65 @@ document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => }); // search by fuse.js -function searchAll(key, index) { +function searchAll(key, index, counter) { let fuse = new Fuse(index, { - keys: ['title', 'tags'], + shouldSort: true, + distance: 10000, + keys: [ + { + name: 'title', + weight: 2.0, + }, + { + name: 'tags', + weight: 1.5, + }, + { + name: 'content', + weight: 1.0, + }, + ], }); let result = fuse.search(key); console.log(result); if (result.length > 0) { document.getElementById('search-result').innerHTML = template('search-result-template', result); + return [new Date().getTime() - counter, result.length]; } else { - document.getElementById('search-result').innerHTML = 'NOT FOUND'; + return 'notFound'; } } let urlParams = new URLSearchParams(window.location.search); // get params from URL if (urlParams.has('s')) { - let key = urlParams.get('s'); // get search keyword + let counter = new Date().getTime(); + let infoElements = document.querySelectorAll('.search-result-info'); + let key = urlParams.get('s'); // get search keyword, divided by space 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.onerror = (e) => { + infoElements[2].removeAttribute('style'); }; - xhr.onload = function () { + xhr.onload = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { // use index json to search console.log(xhr.response); - searchAll(key, xhr.response); + counter = searchAll(key, xhr.response, counter); + console.log(counter); + if (counter === 'notFound') { + infoElements[1].removeAttribute('style'); + } else { + infoElements[0].innerHTML = infoElements[0].innerHTML.replace('[TIME]', counter[0]); + infoElements[0].innerHTML = infoElements[0].innerHTML.replace('[NUM]', counter[1]); + infoElements[0].removeAttribute('style'); + } } else { - console.error(`${xhr.status} ${xhr.statusText}`); + console.error(`Failed to get index.json, ${xhr.status} ${xhr.statusText}`); + infoElements[2].removeAttribute('style'); } } }; diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index df223e9..d1cba1d 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -85,20 +85,6 @@ .page-info { padding: 0 0.1rem 1.5rem 0.1rem; - - // search page part - .search-form { - display: flex; - } - - .search-input { - flex: 1 1 auto; - - input { - width: 100%; - max-width: 100%; - } - } } // single page part @@ -170,6 +156,34 @@ article { padding: 1.25rem 0; } +// search page part + #search-result .post:first-child { padding: 1.5rem 0; } + +.search-result-info { + padding: 1rem 0.1rem; +} + +.search-input { + display: flex; + height: 2.5rem; + align-items: center; + padding-left: 0.5rem; + width: 100%; + + input { + width: 100%; + min-width: 0; + flex: 1 1 auto; + height: 2rem; + } + + button { + flex: 0 1 auto; + padding: 0 0.75rem; + word-break: keep-all; + height: 2.5rem; + } +} diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss index 893a26c..f731fa2 100644 --- a/assets/scss/_fuji-theme/_style.scss +++ b/assets/scss/_fuji-theme/_style.scss @@ -312,3 +312,46 @@ code { color: var(--color-mute) !important; } } + +.search-result-info { + border-bottom: $divider; +} + +.search-input { + border-top: 2px solid; + border-left: 2px solid; + border-bottom: 2px solid; + border-right: none; + border-radius: 0.25rem; + border-color: var(--color-divider); + background-color: var(--color-bg); + + &:hover, + &:focus-within { + color: var(--color-primary); + border-color: var(--color-primary); + } + + input { + outline: none; + border: none; + color: inherit; + background-color: inherit; + } + + button { + outline: none; + border-top: 2px solid; + border-left: none; + border-right: 2px solid; + border-bottom: 2px solid; + border-radius: 0 0.25rem 0.25rem 0; + border-color: inherit; + color: inherit; + background-color: inherit; + + &:hover { + color: var(--color-secondary); + } + } +} diff --git a/layouts/_default/index.json b/layouts/_default/index.json index bf08b0f..e582dda 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 "permalink" .Permalink) -}} + {{- $.Scratch.Add "search" (dict "title" .Title "tags" .Params.tags "content" .Plain "permalink" .Permalink "date" (.Date.Format "2006-01-02")) -}} {{- end -}} {{- $.Scratch.Get "search" | jsonify -}} \ No newline at end of file diff --git a/layouts/_default/search.html b/layouts/_default/search.html index 0911f06..c37d6b9 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -3,14 +3,37 @@
- -
-
+ + +
+ {{ end }} \ No newline at end of file diff --git a/layouts/partials/post-meta.html b/layouts/partials/post-meta.html index 5176053..3e366e7 100644 --- a/layouts/partials/post-meta.html +++ b/layouts/partials/post-meta.html @@ -1 +1 @@ - {{ .Date.Format "2006-01-02" }}{{ if .Site.Params.showWordCounter }} {{ .WordCount }}{{ i18n "postMetaWordCount" }}{{ end }}{{ if .Site.Params.showReadTime }} {{ .ReadingTime }}{{ i18n "postMetaReadingTime" }}{{ end }} {{ if .Params.tags }}{{ range .Params.tags }}{{ . }} {{ end }}{{ else }}{{ i18n "postMetaNoTag" }}{{ end }} \ No newline at end of file + {{ .Date.Format "2006-01-02" }}{{ if .Site.Params.showWordCounter }} {{ .WordCount }}{{ i18n "postMetaWordCount" }}{{ end }}{{ if .Site.Params.showReadTime }} {{ .ReadingTime }}{{ i18n "postMetaReadingTime" }}{{ end }} {{ if .Params.tags }}{{ range .Params.tags }}{{ . }} {{ end }}{{ else }}{{ i18n "postMetaNoTag" }}{{ end }} \ No newline at end of file diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html index 69c5dca..2959beb 100644 --- a/layouts/partials/scripts-end.html +++ b/layouts/partials/scripts-end.html @@ -2,27 +2,8 @@ {{ if eq .Section "search" }} - - - - + + {{ else if eq .Section "archives" }} {{ else }} @@ -37,6 +18,7 @@