diff options
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/_partials/components/global-search.html | 87 | ||||
| -rw-r--r-- | layouts/_partials/home/home-nav.html | 4 | ||||
| -rw-r--r-- | layouts/baseof.html | 1 | ||||
| -rw-r--r-- | layouts/taxonomy.html | 14 |
4 files changed, 12 insertions, 94 deletions
diff --git a/layouts/_partials/components/global-search.html b/layouts/_partials/components/global-search.html deleted file mode 100644 index 674ecdcc..00000000 --- a/layouts/_partials/components/global-search.html +++ /dev/null @@ -1,87 +0,0 @@ -<style> -#global-search-overlay.shown { - z-index: 10!important; - opacity: 1!important; -} - -#global-search #pagefind input { - outline: none -} - -#global-search.shown { - z-index: 15!important; - display: flex!important; -} -</style> - -<div id="global-search-container"> - <div id="global-search" - class="fixed -z-10 hidden top-0 left-0 right-0 bottom-0 items-center justify-center"> - <div id="global-search-close" class="absolute top-0 right-0 px-4 text-12 cursor-pointer">×</div> - <!-- Pagefind Search --> - <div id="pagefind" class="max-h-[90vh] overflow-y-auto w-full m-4 md:w-[600px]"></div> - <script> - window.addEventListener('DOMContentLoaded', () => { - new PagefindUI({ element: "#pagefind", showSubResults: true }); - }); - </script> - </div> - - <div id="global-search-overlay" - class="fixed top-0 left-0 w-full h-full bg-[rgba(250,250,250,0.75)] dark:bg-[rgba(30,30,30,0.75)] - backdrop-blur-md -z-10 opacity-0 transition-opacity duration-300"> - </div> - - <script> - (() => { - const search = document.getElementById("global-search"); - const overlay = document.getElementById("global-search-overlay"); - - const turnOn = () => { - search.classList.add("shown"); - search.classList.add("animation-fade-in"); - overlay.classList.add("shown"); - - umami.track('🔍 Open search panel') - }; - const turnOff = () => { - search.classList.remove("shown"); - search.classList.remove("animation-fade-in"); - overlay.classList.remove("shown"); - }; - - window.addEventListener("keydown", (event) => { - if (event.key === 'k' && (event.metaKey || event.ctrlKey)) { - event.preventDefault(); - // Open the popup window - if (search.classList.contains("shown")) { - turnOff() - } else { - turnOn(); - } - // Focus on the search input - const input = search.querySelector("input"); - input.focus(); - } - - if (event.key === 'Escape') { - turnOff(); - } - }); - - // trigger by clicking instruction text - // to allow mobile users to search - const searchInstruction = document.getElementById("search-instruction"); - if (searchInstruction) { - searchInstruction.addEventListener("click", turnOn); - } - - // double-click to turn off search - // in case esc and ctrl/cmd+k cannot be used - search.addEventListener("dblclick", turnOff); - - const closeButton = document.getElementById("global-search-close"); - closeButton.addEventListener("click", turnOff); - })(); - </script> -</div> diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html index cbeb034d..d6e8960e 100644 --- a/layouts/_partials/home/home-nav.html +++ b/layouts/_partials/home/home-nav.html @@ -20,9 +20,7 @@ (strings.HasPrefix $.Page.RelPermalink "/tags/")) ) }} {{ end }} - <li id="search-instruction" class="cursor-pointer text-size-sm text-secondary ml-2"> - <span>{{ T "searchInstruction" }}</span> - </li> + <li class="absolute right-0 dark:invert"> <a href="{{ .Site.LanguagePrefix }}/stats" data-tooltip="{{ T "statsTooltip" }}" diff --git a/layouts/baseof.html b/layouts/baseof.html index 21a6743e..f81300e2 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -8,6 +8,5 @@ {{ partial "components/shade-mask" . }} </main> {{ partial "scripts.html" . }} - {{ partial "components/global-search" . }} </body> </html> diff --git a/layouts/taxonomy.html b/layouts/taxonomy.html index 424f8071..150879f5 100644 --- a/layouts/taxonomy.html +++ b/layouts/taxonomy.html @@ -3,11 +3,19 @@ {{ partial "header" . }} {{ partial "home/home-nav" . }} + <div id="pagefind" class="py-3"></div> + + {{ partial "taxonomy/all-tags.html" . }} + <hr /> + <h2>文章系列</h2> {{ partial "taxonomy/all-categories.html" . }} - <hr /> - <h2>标签</h2> - {{ partial "taxonomy/all-tags.html" . }} </article> + +<script> + window.addEventListener('DOMContentLoaded', () => { + new PagefindUI({ element: "#pagefind", showSubResults: true }); + }); +</script> {{ partial "footer.html" . }} {{ end }} |