troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-23 10:21:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: search box in 404 page (#1081)

Browse source
This commit is contained in:
Jimmy Cai 2024-10-20 00:26:59 +02:00 committed by GitHub
parent f4eb5d3e99
commit 37f1541c20
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/ts/search.tsx
View file

@ -53,7 +53,14 @@ class Search {
this.resultTitle = resultTitle;
this.resultTitleTemplate = resultTitleTemplate;
/// Check if there's already value in the search input
if (this.input.value.trim() !== '') {
this.doSearch(this.input.value.split(' '));
}
else {
this.handleQueryString();
}
this.bindQueryStringChange();
this.bindSearchForm();
}

38
layouts/404.html
View file

@ -3,5 +3,43 @@
<h1 class="article-title">{{ T "notFound.title" }}</h1>
<h2 class="article-subtitle">{{ T "notFound.subtitle" }}</h2>
</div>
{{- $query := first 1 (where .Site.Pages "Layout" "==" "search") -}}
{{- $searchPage := index $query 0 -}}
{{- with $searchPage -}}
<form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
<p>
<label>{{ T "search.title" }}</label>
<input id="searchInput" name="keyword" required placeholder="{{ T `search.placeholder` }}" />
<button title="{{ T `search.title` }}">
{{ partial "helper/icon" "search" }}
</button>
</p>
</form>
<div class="search-result">
<h3 class="search-result--title section-title"></h3>
<div class="search-result--list article-list--compact"></div>
</div>
<script>
window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"
</script>
{{- $opts := dict "minify" hugo.IsProduction "JSXFactory" "createElement" -}}
{{- $searchScript := resources.Get "ts/search.tsx" | js.Build $opts -}}
<script type="text/javascript" src="{{ $searchScript.RelPermalink }}" defer></script>
<script>
const wrongUrl = new URL(window.location.href);
/// Get the search keyword from the wrong URL by removing all slashes and dashes
const searchKeyword = wrongUrl.pathname.split(/[/|-]/).join(' ').trim();
document.getElementById('searchInput').setAttribute('value', searchKeyword);
</script>
{{- end -}}
{{ partialCached "footer/footer" . }}
{{ end }}