Update searching based on Fuse.js

3 files changed, 31 insertions, 16 deletions

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" }}
-<!-- page info section e.g. current tag & total archive pages -->
+<!-- search form -->
 <div class="page-info">
-    <form class="search-form" autocomplete="off">
+    <form class="search-form" method="GET">
         <div class="search-input">
-            <input type="text" name="search-input" maxlength="40" required />
+            <input name="search" type="text" autocapitalize="off" autocomplete="off" autocorrect="off"
+                   spellcheck="false" />
         </div>
         <div class="search-submit">
-            <button>搜索</button>
+            <button type="submit">SEARCH</button>
         </div>
     </form>
 </div>
-<!-- archives range in all posts -->
-<div class="post">
-    <h3 class="post-item post-title-archive">
-        Not Finished Yet
-    </h3>
-</div>
-
+<!-- search result and template -->
+<div id="search-result"></div>
 {{ 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 @@
 <script async type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.esm.js"></script>
 <script async nomodule src="https://cdn.jsdelivr.net/npm/ionicons@5.0.1/dist/ionicons/ionicons.js"></script>
+
+{{ if eq .Section "search" }}
+<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.1.0/dist/fuse.js"></script>
+<!-- Search result template -->
+<script src="https://cdn.jsdelivr.net/npm/art-template@4.13.2/lib/template-web.min.js"></script>
+<script id="search-result-template" type="text/fuse-template">
+    {{ "<% for(var i = 0; i < $data.length; i++){ %>" | safeHTML }}
+    <div class="post">
+        <h3 class="post-item post-title-archive">
+            <a href="<%= $data[i].item.permalink %>">{{ "<%= $data[i].item.title %>" | safeHTML }}</a>
+        </h3>
+        <div class="post-item post-meta-archive">
+            {{ "<%= $data[i].item.tags %>" | safeHTML }}
+        </div>
+    </div>
+    {{ "<% } %>" | safeHTML }}
+</script>
+{{ else if eq .Section "archives" }}
+{{ else }}
 <script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-core.min.js"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
-
 <script defer src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script>
+{{ end }}
+
 <script defer src="{{ "/assets/js/fuji.min.js" | relURL }}"></script>
 
 {{ with .Params.player }}
 <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
+<!-- prettier-ignore -->
 <script>
     // in-post aplayer
     var aPlayer = new APlayer({
@@ -15,8 +36,7 @@
         theme: '#8f82bc',
         volume: 0.1,
         listFolded: true,
-        audio: [
-            {{- range $.Params.player -}}
+        audio: [{{- range $.Params.player -}}
             {
                 name: '{{ .playerName }}',
                 artist: '{{ .playerArtist }}',
@@ -24,7 +44,6 @@
                 cover: '{{ .playerCover }}'
             },
             {{- end -}}
-        ]
     });
     // aplayer toc anchors fix
     // see https://github.com/MoePlayer/APlayer/issues/242#issuecomment-602471423