适配新版搜索

settings.yaml

@@ -1099,6 +1099,54 @@ spec:
               label:  开启
             - value: false
               label:  关闭
+        - $formkit: group
+          name: search
+          label: 搜索
+          help: 使用新版搜索需要 halo >= 2.17.0 & 搜索插件 >= 1.5.0。
+          value:
+            search_enable: false
+            search_title: '搜索'
+            search_placeholder: '输入搜索内容'
+            search_btn_title: '搜索'
+            search_target: '_self'
+          children:
+            - $formkit: radio
+              id: search_enable
+              name: search_enable
+              label: 搜索页面-开启新版搜索
+              options:
+                - value: true
+                  label: 新版
+                - value: false
+                  label: 经典
+            - $formkit: text
+              if: $get(search_enable).value
+              name: search_title
+              validation: required
+              label: 搜索页面-标题
+              placeholder: '输入新版搜索页面标题'
+            - $formkit: text
+              if: $get(search_enable).value
+              name: search_placeholder
+              validation: required
+              label: 搜索页面-输入框提示语
+              placeholder: '输入新版搜索页面输入框提示语'
+            - $formkit: text
+              if: $get(search_enable).value
+              name: search_btn_title
+              validation: required
+              placeholder: '输入新版搜索页面搜索按钮提示语'
+              label: 搜索页面-搜索按钮提示语
+            - $formkit: radio
+              if: $get(search_enable).value
+              name: search_target
+              validation: required
+              label: 搜索页面-搜索结果跳转方式
+              options:
+                - value: _blank
+                  label: 新标签页
+                - value: _self
+                  label: 当前窗口
     - group: enhance
       label: '增强功能'
       formSchema:

src/css/style.less

@@ -5214,4 +5214,57 @@ button.swiper-pagination-bullet {
       width: 1.5em;
     }
   }
+}
+
+/* 搜索界面 */
+.search {
+
+  .search-form-inner {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .text-input {
+      width: 100%;
+      font-size: 1.2rem;
+      padding: 0.6rem;;
+      border-radius: var(--radius-inner) 0 0 var(--radius-inner);
+      border: var(--theme) 1px solid;
+    }
+
+    .search-form-btn {
+      font-size: 1.2rem;
+      padding: 0.6rem;;
+      border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
+      border: var(--theme) 1px solid;
+      background: var(--theme);
+      min-width: 60px;
+
+      i {
+        color: #fff;
+        font-size: 1.2rem;
+      }
+    }
+
+  }
+
+  .meta {
+    font-size: 1em !important;
+
+    a {
+      line-height: 1.1em;
+      color: var(--dark-a);
+    }
+
+    img {
+      height: 1.5em;
+      width: 1.5em;
+    }
+  }
+
+  b {
+    color: var(--light-z);
+    background: var(--theme);
+  }
 }

templates/common/navbar.html

@@ -64,9 +64,11 @@
                 </th:block>
             </nav>
             <div th:if="${pluginFinder.available('PluginSearchWidget')}" class="navbar-search">
-                <button onclick="javascript:SearchWidget.open();" class="submit" aria-label="搜索按钮" style="border-radius: 17px;"><i class="ri-search-line"></i></button>
+                <button th:unless="${theme.config.page_config.search.search_enable}" onclick="javascript:SearchWidget.open();" class="submit" aria-label="搜索按钮" style="border-radius: 17px;"><i class="ri-search-line"></i></button>
+                <a th:if="${theme.config.page_config.search.search_enable}" target="_self" href="/search" class="submit" aria-label="搜索按钮" style="border-radius: 17px;display: flex;align-items: center;justify-content: center;"><i class="ri-search-line"></i></a>
             </div>
-            <i class="ri-search-line navbar-searchicon" onclick="javascript:SearchWidget.open();"></i>
+            <i th:unless="${theme.config.page_config.search.search_enable}" class="ri-search-line navbar-searchicon" onclick="javascript:SearchWidget.open();"></i>
+            <a th:if="${theme.config.page_config.search.search_enable}" class="navbar-searchicon" target="_self" href="/search"><i class="ri-search-line navbar-searchicon"></i></a>
             <a th:if="${theme.config.basic_style.console.show_console}" class="navbar-console" href="/console" target="_blank"
                th:title="${theme.config.basic_style.console.console_title}">
                 <i th:class="${#strings.defaultString(theme.config.basic_style.console.console_icon, 'ri-equalizer-line')}"></i>

templates/search.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<th:block
+  th:insert="~{common/layout :: layout (title = ${theme.config.page_config.search.search_title} + ' - ' + ${site.title}, canonical = @{/search}, content = ~{::content}, isPost = true)}"
+  th:with="isJournals = true, enableShare = false, baseEnableComment = false"
+  xmlns:th="https://www.thymeleaf.org">
+  <th:block th:fragment="content">
+    <div class="card card-content search">
+      <div class="card-tab">
+        <div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div>
+      </div>
+      <div class="search-box">
+        <form class="search-form-inner" method="get" action="/search" role="search" data-pjax>
+          <span class="iconify icon-search" data-icon="solar:magnifer-outline"> </span>
+          <input
+                  class="text-input"
+                  type="search"
+                  name="keyword"
+                  th:placeholder="${theme.config.page_config.search.search_placeholder}"
+                  th:value="${searchResult.keyword}"
+                  data-i18n="[placeholder]search.search_modal.placeholder"
+                  required
+          />
+          <button class="search-form-btn" th:title="${theme.config.page_config.search.search_btn_title}" type="submit">
+            <i class="ri-search-line"></i>
+          </button>
+        </form>
+      </div>
+    </div>
+    <div class="widget card search" th:each="hit : ${searchResult.hits}">
+      <a th:href="${hit.permalink}" th:target="${theme.config.page_config.search.search_target}" >
+        <div class="card-content main">
+          <h2 class="title" th:utext="${hit.title}"></h2>
+          <div class="main-content not-toc" th:utext="${hit.description}"></div>
+          <hr/>
+          <div class="meta">
+            <div></div>
+            <em th:text="'最后更新于 ' + ${#dates.format(hit.updateTimestamp,'yyyy年MM月dd日 HH:mm:ss')}"></em>
+          </div>
+        </div>
+      </a>
+    </div>
+  </th:block>
+</th:block>

theme.yaml

@@ -30,7 +30,7 @@ spec:
   settingName: theme-dream2-plus-setting
   configMapName: theme-dream2-plus-configMap
   # 版本号
-  version: 0.0.0.27
+  version: 0.0.0.40
   # 最低支持的 Halo 版本
   require: ">=2.15.0"
   # 许可

version

@@ -1 +1 @@
-1.2.5.2
+1.2.5.3