🔧 🌱 Complete the local search feature.

layouts/partials/_thirdparty/search/algolia.html

@@ -0,0 +1,14 @@
+<div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container"></div>
+  <span class="popup-btn-close" role="button">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div class="search-result-container">
+  <div class="algolia-stats"><hr></div>
+  <div class="algolia-hits"></div>
+  <div class="algolia-pagination"></div>
+</div>

layouts/partials/_thirdparty/search/local.html

@@ -0,0 +1,18 @@
+<div class="search-header">
+  <span class="search-icon">
+    <i class="fa fa-search"></i>
+  </span>
+  <div class="search-input-container">
+    <input autocomplete="off" autocapitalize="off" maxlength="80"
+           placeholder="{{ T "SearchPh" }}" spellcheck="false"
+           type="search" class="search-input">
+  </div>
+  <span class="popup-btn-close" role="button">
+    <i class="fa fa-times-circle"></i>
+  </span>
+</div>
+<div class="search-result-container no-result">
+  <div class="search-result-icon">
+    <i class="fa fa-spinner fa-pulse fa-5x"></i>
+  </div>
+</div>

layouts/partials/header.html

@@ -1,2 +1,3 @@
 {{ partial "header/brand.html" . }}
-{{ partial "header/menus.html" . }}
+{{ partial "header/menus.html" . }}
+{{ partial "header/search.html" . }}

layouts/partials/header/search.html

@@ -0,0 +1,11 @@
+{{- if or .Site.Params.algoliaSearch.enable .Site.Params.localSearch.enable }}
+  <div class="search-pop-overlay">
+    <div class="popup search-popup">
+      {{- if .Site.Params.algoliaSearch.enable }}
+        {{ partial "_thirdparty/search/algolia.html" . }}
+      {{- else if .Site.Params.localSearch.enable }}
+        {{ partial "_thirdparty/search/local.html" . }}
+      {{- end }}
+    </div>
+  </div>
+{{- end }}

layouts/partials/init.html

@@ -23,18 +23,25 @@
 {{ $globalVars.Set "router" $router }}
 
 {{ $config := dict
-  "hostname" .Site.BaseURL
-  "root"     "/"
-  "lang"     .Site.LanguageCode
-  "vendor"   (dict "plugins" $vendor "router"  $router)
-  "darkmode" .Site.Params.darkmode
-  "version"  .Site.Data.config.version
-  "scheme"   .Site.Params.scheme
-  "sidebar"  .Site.Params.sidebar
-  "copybtn"  .Site.Params.codeblock.copyBtn
-  "bookmark" .Site.Params.bookmark
-  "lazyload" .Site.Params.lazyload
-  "motion"   .Site.Params.motion
+  "hostname"    .Site.BaseURL
+  "root"        "/"
+  "lang"        .Site.LanguageCode
+  "vendor"      (dict "plugins" $vendor "router" $router)
+  "darkmode"    .Site.Params.darkmode
+  "version"     .Site.Data.config.version
+  "scheme"      .Site.Params.scheme
+  "sidebar"     .Site.Params.sidebar
+  "copybtn"     .Site.Params.codeblock.copyBtn
+  "bookmark"    .Site.Params.bookmark
+  "lazyload"    .Site.Params.lazyload
+  "motion"      .Site.Params.motion
+  "localSearch" .Site.Params.localSearch
+  "i18n"        (dict 
+    "placeholder" (T "SearchPh")
+    "empty"       (T "SearchEmpty")
+    "hits_time"   (T "SearchHitsTime")
+    "hits"        (T "SearchHits")
+  )
 }}
 
 {{ with .Site.Params.waline }}

layouts/partials/scripts.html

@@ -68,4 +68,7 @@
 {{ if hugo.IsProduction }}
 {{- $nextjs = $nextjs | minify | fingerprint }}
 {{ end }}
-<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>
+<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>
+{{- $search := resources.Get "js/third-party/search/local-search.js" }}
+<script type="text/javascript" src="{{ $search.RelPermalink }}" defer></script>
+