fix(template): four defects in the server-rendered pages

ui/template/header.html

@@ -170,7 +170,7 @@
           <div class="d-none d-xl-block flex-grow-1 me-auto">
             <div class="d-none d-xl-block ps-0 col-lg-8">
               <form action="/search" class="w-100 maxw-400">
-                <input placeholder="Search" name="q" type="search" class="placeholder-search form-control" value="">
+                <input placeholder="{{translator $.language "ui.header.search.placeholder"}}" name="q" type="search" class="placeholder-search form-control" value="">
               </form>
             </div>
             <!-- <div class="xl-none mt-3 pb-1 nav-item">

ui/template/question-detail.html

@@ -68,7 +68,7 @@ <h1 class="h3 mb-3 text-wrap text-break">
             {{range .detail.Tags}}
             <a href="{{$.baseURL}}/tags/{{.SlugName}}"
                 class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} m-1">
-              <span class="">{{.SlugName}}</span>
+              <span class="">{{.DisplayName}}</span>
             </a>
             {{end}}
           </div>

ui/template/question.html

@@ -36,7 +36,7 @@ <h5 class="fs-5 text-nowrap mb-3 mb-md-0">
               <div class="d-flex flex-wrap text-secondary small mb-12">
                 <div class="d-flex align-items-center  text-secondary me-1">
                   <a href="{{$.baseURL}}/users/{{.Operator.Username}}">
-                    <img src="{{$.baseURL}}/users/{{.Operator.Avatar}}" width="24px" height="24px" class="rounded-circle me-1" alt="shuai" data-processed="true">
+                    <img src="{{.Operator.Avatar}}" width="24" height="24" class="rounded-circle me-1" alt="{{.Operator.DisplayName}}" data-processed="true">
                     <span class="me-1 name-ellipsis" style="max-width: 300px;">{{.Operator.DisplayName}}</span>
                   </a>
                   <span class="fw-bold" title="Reputation">{{.Operator.Rank}}</span>
@@ -75,7 +75,7 @@ <h5 class="text-wrap text-break">
                 <a
                   href="{{$.baseURL}}/tags/{{.SlugName}}"
                   class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} me-1">
-                  <span class="">{{.SlugName}}</span>
+                  <span class="">{{.DisplayName}}</span>
                 </a>
                 {{end}}
               </div>

ui/template/sort-btns.html

@@ -35,19 +35,19 @@
   <a role="button" tabindex="0" href="?order=frequent" class="text-capitalize fit-content d-none d-md-block btn btn-outline-secondary" style="border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;">
     {{translator ($.language) "ui.question.frequent" }}
   </a>
-  <div role="group" class="show dropdown btn-group">
-    <button type="button" aria-expanded="true" class="dropdown-toggle show btn btn-outline-secondary btn-sm">
+  <div role="group" class="dropdown btn-group">
+    <button type="button" aria-expanded="false" class="dropdown-toggle btn btn-outline-secondary btn-sm">
       {{translator ($.language) "ui.btns.more" }}
     </button>
-    <div x-placement="bottom-start" class="dropdown-menu show" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; transform: translate(0px, 33px);">
+    <div class="dropdown-menu">
       <a href="?order=score" aria-selected="false" class="text-capitalize dropdown-item"> {{translator ($.language) "ui.question.score" }}</a>
     </div>
   </div>
 </div>
 
 <div class="dropdown">
-  <button type="button" id="react-aria8245013726-:r5:" aria-expanded="false" class="dropdown-toggle btn btn-outline-secondary btn-sm"><i class="br bi-view-stacked"></i></button>
-  <div x-placement="bottom-end" aria-labelledby="react-aria8245013726-:r5:" class="dropdown-menu dropdown-menu-end" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; transform: translate(0px, 33px);">
+  <button type="button" id="question-layout-toggle" aria-expanded="false" class="dropdown-toggle btn btn-outline-secondary btn-sm"><i class="br bi-view-stacked"></i></button>
+  <div aria-labelledby="question-layout-toggle" class="dropdown-menu dropdown-menu-end">
     <h6 class="dropdown-header" role="heading">
       {{translator ($.language) "ui.btns.view" }}
     </h6>

ui/template/tag-detail.html

@@ -25,7 +25,7 @@
       <div class="page-main flex-auto col">
         <div class="tag-box mb-5">
           <h3 class="mb-3">
-            <a class="link-dark" href="{{$.baseURL}}/tags/{{$.tag.SlugName}}">{{$.tag.SlugName}}</a>
+            <a class="link-dark" href="{{$.baseURL}}/tags/{{$.tag.SlugName}}">{{$.tag.DisplayName}}</a>
           </h3>
           <p class="text-break">{{formatLinkNofollow $.tag.ParsedText}}</p>
         </div>
@@ -80,7 +80,7 @@ <h5 class="text-wrap text-break">
                 {{range .Tags }}
                 <a href="{{$.baseURL}}/tags/{{.SlugName}}"
                   class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} m-1">
-                  <span class="">{{.SlugName}}</span>
+                  <span class="">{{.DisplayName}}</span>
                 </a>
                 {{end}}
               </div>

ui/template/tags.html

@@ -54,7 +54,7 @@ <h3 class="mb-4">
             <div class="h-100 card">
               <div class="d-flex flex-column align-items-start card-body">
                 <a href="{{$.baseURL}}/tags/{{.SlugName}}" class="badge-tag rounded-1 mb-3"><span
-                    class="">{{.SlugName}}</span></a>
+                    class="">{{.DisplayName}}</span></a>
                 <div class="small flex-fill text-break text-wrap text-truncate-3 reset-p mb-3">  {{formatLinkNofollow .ParsedText}}
                 </div>
                 <div class="d-flex align-items-center">