From 8dce78ec6ab20779b777c87c2fb15ab53a41ff84 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Tue, 1 Apr 2025 10:52:52 +0800
Subject: feat: click search instruction to show search input

Former-commit-id: dce16efa1c07ce72da3f02e3ffb25a9205f50a07
---
 assets/css/components/_postlist.scss           |  2 +-
 layouts/partials/components/global-search.html | 27 +++++++++++++++-----------
 layouts/partials/components/postnav.html       |  2 +-
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
index f9d526ce..6b7b13d8 100644
--- a/assets/css/components/_postlist.scss
+++ b/assets/css/components/_postlist.scss
@@ -69,7 +69,7 @@
             }
         }
 
-        .search-instruction {
+        #search-instruction {
             font-size: 0.9rem;
             color: var(--secondary-text-color);
             margin-left: 0.5rem;
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">
-- 
cgit v1.2.3