feat(search): i18n support

assets/ts/search.tsx

@@ -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);
 })

i18n/en.toml

@@ -21,3 +21,12 @@
 
 [notFoundSubtitle]
     other = "This page does not exist."
+
+[searchTitle]
+    other = "Search"
+
+[searchPlaceholder]
+    other = "Type something..."
+
+[searchResultTitle]
+    other = "#PAGES_COUNT pages (#TIME_SECONDS seconds)"

i18n/zh-CN.toml

@@ -21,3 +21,12 @@
 
 [notFoundSubtitle]
     other = "页面不存在"
+
+[searchTitle]
+    other = "搜索"
+
+[searchPlaceholder]
+    other = "输入关键词..."
+
+[searchResultTitle]
+    other = "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"

layouts/page/search.html

@@ -7,8 +7,8 @@
 {{ define "main" }}
 <form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
     <p>
-        <label>Keyword</label>
+        <label>{{ T "searchTitle" }}</label>
-        <input name="keyword" placeholder="Type something..." />
+        <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>

layouts/partials/widget/search.html

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