update search

layouts/blog/list.html

@@ -46,6 +46,15 @@
 
     <div style="border-top: 1px solid #969696;"></div>
 
+    <!-- <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: auto;justify-content: center;">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+      </svg>
+      <div>
+        找不到符合條件的文章
+      </div>
+    </div> -->
+
     <div class="article" id="articleList">
 
       {{ $paginator := .Paginate .Data.Pages }}
@@ -75,6 +84,8 @@
 
   <script>
     window.onload = function () {
+      document.getElementById('blog_search').value = '';
+
       // 取得 apiData
       let contentsData = [];
       let category = localStorage.getItem('category');
@@ -154,6 +165,17 @@
                     </a>
                   </div>
                 </div>`
+          } else {
+            matchContent = `
+            <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: 0 auto 25px;justify-content: center;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+              </svg>
+              <div>
+                找不到符合條件的文章
+              </div>
+            </div>
+            `;
           }
           //   }
           // }

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -1007,6 +1007,14 @@ img {
     font-size: 14.4px;
   }
 }
+input[type=search]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 10px;
+  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 43%, #fff 45%, #fff 55%, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0, 0) 100%), linear-gradient(135deg, transparent 0%, transparent 43%, #fff 45%, #fff 55%, transparent 57%, transparent 100%);
+}
 
 .bhouseweb_loc_search_box :-ms-input-placeholder {
   color: #bcbcbc;

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -1084,6 +1084,17 @@ img {
   }
 }
 
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 10px;
+  background:
+    linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
+    linear-gradient(135deg, transparent 0%,transparent 43%,#fff 45%,#fff 55%,transparent 57%,transparent 100%);
+}
+
 .bhouseweb_loc_search_box ::-webkit-input-placeholder {
   /* Chrome, Safari */
   color: #bcbcbc;