Merge pull request #67 from hmatsu47/feature-23-search-box

refs #23 検索仮実装
code-for-hamamatsu · Dec 21, 2021 · 0abd704 · 0abd704
2 parents 504d322 + b175ece
commit 0abd704
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 5 deletions.
diff --git a/content/search/_index.ja.md b/content/search/_index.ja.md
@@ -0,0 +1,36 @@
+---
+title: "全てのカテゴリから検索"
+draft: false
+---
+<input id = "query" onkeyup="search(this.value)" size="28" autocomplete="off" autofocus placeholder="検索キーワードを入れてください" />
+
+<script>
+    // 検索
+    function search(query) {
+        $(".card").each(function(i, elem) {
+            var question = $(elem).find("span").text().toLowerCase();
+            var answer = $(elem).find(".card-body").text().toLowerCase();
+            if (query == "" || (question.indexOf(query) == -1 && answer.indexOf(query) == -1)) {
+                $(elem).css("display", "none");
+            } else {
+                $(elem).css("display", "block");
+            }
+        })
+    }
+    // ハッシュフラグメントの値で検索を実行
+    function searchWithHash() {
+        const hash = decodeURI(location.hash.substring(1));
+        search(hash);
+        // 必要があれば input 要素の値を更新
+        const queryElem = document.getElementById('query');
+        if (queryElem.value !== hash) {
+        queryElem.value = hash;
+        }
+    }
+    // ハッシュフラグメント付きの URL でページを開いたときに検索
+    window.addEventListener('DOMContentLoaded', searchWithHash);
+    // ページ表示後にハッシュフラグメントが変化したら検索
+    window.addEventListener('hashchange', searchWithHash);
+</script>
+
+{{< result >}}
diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html
@@ -1,11 +1,33 @@
 {{ "<!-- banner -->" | safeHTML }}
-<div class="container section">
+<div class="container section" style="padding-bottom: 24px;">
 	<div class="row">
 		<div class="col-lg-8 text-center mx-auto">
 			<h1 class="text-white mb-3">{{ .Site.Params.banner.title | markdownify }}</h1>
 			<p class="text-white mb-4">{{ .Site.Params.banner.subtitle | markdownify }}</p>
-			<!-- <div class="position-relative">
-				<input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">
+			<div class="position-relative">
+				<form>
+					<input id="searchKeyword" class="form-control" style="margin-top: 16px;" placeholder="検索キーワードを入れてください">
+					<i class="ti-search search-icon"></i>
+					<input id="searchButton" type="submit" value="" style="color: transparent; background-color: transparent; border: transparent;">
+				</form>
+
+				<script>
+					const SEARCH_URL = '/search/';
+
+					window.addEventListener('DOMContentLoaded', () => {
+						const searchButton = document.getElementById('searchButton');
+						const searchKeyword = document.getElementById('searchKeyword');
+
+						// 検索ボタンのクリックで検索ページへジャンプ
+						searchButton.addEventListener('click', e => {
+							e.preventDefault();  // Prevent default form's behavior
+							const query = searchKeyword.value;
+							const url = query ? SEARCH_URL + '#' + query : SEARCH_URL;
+							location.href = url;
+						});
+					});
+				</script>
+				<!-- <input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">
 				<i class="ti-search search-icon"></i> -->
 				<!-- Javascript -->
 				<!-- {{ $currentNode := . }}
@@ -31,8 +53,8 @@ <h1 class="text-white mb-3">{{ .Site.Params.banner.title | markdownify }}</h1>
 						.appendTo( ul );
 					};
 					});
-				</script>
-			</div> -->
+				</script> -->
+			</div>
 		</div>
 	</div>
 </div>

diff --git a/layouts/shortcodes/result.html b/layouts/shortcodes/result.html
@@ -0,0 +1,22 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ range $faq := (where $.Site.Data.faq.faq "カテゴリ名" "!=" "") }}
+<div class="card mb-4 rounded-0 shadow border-0" style="display: none;">
+  <div class="card-header rounded-0 bg-white border p-0 border-0">
+    <a class="card-link h4 d-flex tex-dark mb-0 py-3 px-4 justify-content-between" data-toggle="collapse"
+      href="#{{ $faq.質問 | sha1 }}">
+      <span>{{ $faq.質問 }}</span> <i class="ti-plus text-primary text-right"></i>
+    </a>
+  </div>
+  <div id="{{ $faq.質問 | sha1 }}" class="collapse" data-parent="#accordion">
+    <div class="card-body font-secondary text-color pt-0" style="white-space:pre-wrap; margin-bottom: 0px;">{{ $faq.回答 | markdownify }}</div>
+    <div class="card-footer rounded-0 bg-white border p-0 border-0" style="text-align: right; margin-bottom: 0px; margin-right: 20px;">
+      {{ if eq (len $faq.更新日) 8 }}
+        最終更新日：{{ slicestr $faq.更新日 0 4 }}年{{ slicestr $faq.更新日 4 6 | strings.TrimLeft "0" }}月{{ slicestr $faq.更新日 6 | strings.TrimLeft "0" }}日&nbsp;
+      {{ end}}
+      <br/>
+      <br/>
+    </div>
+  </div>
+  {{ .Inner }}
+</div>
+{{ end }}