feat: click search instruction to show search input

2 files changed, 17 insertions, 12 deletions

diff --git a/layouts/partials/components/global-search.html b/layouts/partials/components/global-search.html
index c12a6d79..0b929b0a 100644
--- a/layouts/partials/components/global-search.html
+++ b/layouts/partials/components/global-search.html
@@ -76,19 +76,19 @@
 
 <script>
   (() => {
-    window.addEventListener("keydown", (event) => {
-      const search = document.getElementById("global-search");
-      const overlay = document.getElementById("global-search-overlay");
+    const search = document.getElementById("global-search");
+    const overlay = document.getElementById("global-search-overlay");
 
-      const turnOn = () => {
-        search.classList.add("shown");
-        overlay.classList.add("shown");
-      };
-      const turnOff = () => {
-        search.classList.remove("shown");
-        overlay.classList.remove("shown");
-      };
+    const turnOn = () => {
+      search.classList.add("shown");
+      overlay.classList.add("shown");
+    };
+    const turnOff = () => {
+      search.classList.remove("shown");
+      overlay.classList.remove("shown");
+    };
 
+    window.addEventListener("keydown", (event) => {
       if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
         // Open the popup window
         if (search.classList.contains("shown")) {
@@ -105,5 +105,10 @@
         turnOff();
       }
     });
+
+    const searchInstruction = document.getElementById("search-instruction");
+    window.addEventListener("click", (event) => {
+      turnOn();
+    });
   })();
 </script>
diff --git a/layouts/partials/components/postnav.html b/layouts/partials/components/postnav.html
index d7d21cc6..207ea99c 100644
--- a/layouts/partials/components/postnav.html
+++ b/layouts/partials/components/postnav.html
@@ -6,7 +6,7 @@
         <li class="{{ if eq "/categories/" $.Page.RelPermalink }}active{{ end }}">
             <a href="/categories">分类</a>
         </li>
-        <li class="search-instruction">
+        <li id="search-instruction">
             <span>{{ T "searchInstruction" }}</span>
         </li>
         <li class="list-decoration invert-if-dark">