feat(search): i18n support

This commit is contained in:
Jimmy Cai 2020-11-06 11:49:30 +01:00
parent f5d45458fd
commit c018f4967a
5 changed files with 44 additions and 9 deletions

View file

@ -39,12 +39,14 @@ class Search {
private input: HTMLInputElement;
private list: HTMLDivElement;
private resultTitle: HTMLHeadElement;
private resultTitleTemplate: string;
constructor({ form, input, list, resultTitle }) {
constructor({ form, input, list, resultTitle, resultTitleTemplate }) {
this.form = form;
this.input = input;
this.list = list;
this.resultTitle = resultTitle;
this.resultTitleTemplate = resultTitleTemplate;
this.handleQueryString();
this.bindQueryStringChange();
@ -136,7 +138,11 @@ class Search {
const endTime = performance.now();
this.resultTitle.innerText = `${results.length} pages (${((endTime - startTime) / 1000).toPrecision(1)} seconds)`;
this.resultTitle.innerText = this.generateResultTitle(results.length, ((endTime - startTime) / 1000).toPrecision(1));
}
private generateResultTitle(resultLen, time) {
return this.resultTitleTemplate.replace("#PAGES_COUNT", resultLen).replace("#TIME_SECONDS", time);
}
public async getData() {
@ -231,6 +237,12 @@ class Search {
}
}
declare global {
interface Window {
searchResultTitleTemplate: string;
}
}
window.addEventListener('load', () => {
setTimeout(function () {
const searchForm = document.querySelector('.search-form') as HTMLFormElement,
@ -242,7 +254,8 @@ window.addEventListener('load', () => {
form: searchForm,
input: searchInput,
list: searchResultList,
resultTitle: searchResultTitle
resultTitle: searchResultTitle,
resultTitleTemplate: window.searchResultTitleTemplate
});
}, 0);
})

View file

@ -20,4 +20,13 @@
other = "Not Found"
[notFoundSubtitle]
other = "This page does not exist."
other = "This page does not exist."
[searchTitle]
other = "Search"
[searchPlaceholder]
other = "Type something..."
[searchResultTitle]
other = "#PAGES_COUNT pages (#TIME_SECONDS seconds)"

View file

@ -20,4 +20,13 @@
other = "404 错误"
[notFoundSubtitle]
other = "页面不存在"
other = "页面不存在"
[searchTitle]
other = "搜索"
[searchPlaceholder]
other = "输入关键词..."
[searchResultTitle]
other = "#PAGES_COUNT 个结果 (用时 #TIME_SECONDS 秒)"

View file

@ -7,8 +7,8 @@
{{ define "main" }}
<form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
<p>
<label>Keyword</label>
<input name="keyword" placeholder="Type something..." />
<label>{{ T "searchTitle" }}</label>
<input name="keyword" placeholder="{{ T `searchPlaceholder` }}" />
</p>
<button title="Search">
@ -19,6 +19,10 @@
<h3 class="search-result--title"></h3>
<div class="search-result--list article-list--compact"></div>
<script>
window.searchResultTitleTemplate = "{{ T `searchResultTitle` }}"
</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>

View file

@ -1,7 +1,7 @@
<form action="/search" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
<p>
<label>Search</label>
<input name="keyword" required placeholder="Type something..." />
<label>{{ T "searchTitle" }}</label>
<input name="keyword" required placeholder="{{ T `searchPlaceholder` }}" />
<button title="Search">
{{ partial "helper/icon" "search" }}