新增 热门文章搜索风格 ，搜索风格改版

settings.yaml

@@ -1196,66 +1196,71 @@ spec:
           label: 搜索页面
           help: 使用新版搜索需要 halo >= 2.17.0 & 搜索插件 >= 1.5.0。
           value:
-            search_enable: false
+            search_style: 'box'
             search_title: '搜索'
-            search_placeholder: '输入搜索内容'
+            search_placeholder: '搜索内容...'
             search_btn_title: '搜索'
             search_target: '_self'
           children:
             - $formkit: radio
-              id: search_enable
-              name: search_enable
+              id: search_style
+              name: search_style
               label: 搜索按钮-搜索风格
               options:
-                - value: true
-                  label: 新版
-                - value: false
+                - value: 'box'
+                  label: 热门文章
+                - value: 'form'
+                  label: 搜索表单
+                - value: 'basic'
                   label: 经典
             - $formkit: text
-              if: $get(search_enable).value
+              if: $get(search_style).value != 'basic'
               name: search_title
               validation: required
               label: 搜索页面-标题
-              placeholder: '输入新版搜索页面标题'
+              placeholder: '输入页面标题，搜索表单、热门文章风格有效'
             - $formkit: text
-              if: $get(search_enable).value
+              if: $get(search_style).value != 'basic'
               name: search_placeholder
               validation: required
               label: 搜索页面-输入框提示语
-              placeholder: '输入新版搜索页面输入框提示语'
+              placeholder: '输入搜索页面输入框提示语'
+              help: '输入搜索页面输入框提示语，搜索表单、热门文章风格有效。'
             - $formkit: text
-              if: $get(search_enable).value
+              if: $get(search_style).value != 'basic'
               name: search_btn_title
               validation: required
-              placeholder: '输入新版搜索页面搜索按钮提示语'
+              placeholder: '输入搜索页面搜索按钮提示语'
               label: 搜索页面-搜索按钮提示语
+              help: '输入搜索页面搜索按钮提示语，支持 HTML 格式，搜索表单、热门文章风格有效。'
             - $formkit: radio
-              if: $get(search_enable).value
+              if: $get(search_style).value != 'basic'
               name: search_target
               validation: required
               label: 搜索页面-搜索结果跳转方式
+              help: '搜索页面-搜索结果跳转方式，搜索表单、热门文章风格有效。'
               options:
                 - value: _blank
                   label: 新标签页
                 - value: _self
                   label: 当前窗口
             - $formkit: code
-              if: $get(search_enable).value
+              if: $get(search_style).value != 'basic'
               name: search_empty_tips
               validation: required
               label: "搜索页面-无搜索结果提示语"
               language: html
               value: '没有搜索结果'
               height: 45px
-              help: '搜索页面-无搜索结果提示语，支持 HTML 格式。'
+              help: '搜索页面-无搜索结果提示语，支持 HTML 格式，搜索表单、热门文章风格有效。'
             - $formkit: number
-              if: $get(search_enable).value
+              if: $get(search_style).value != 'basic'
               name: search_limit
               validation: required
               label: "搜索页面-搜索结果最大显示数量"
               value: 10
               height: 45px
-              help: '搜索页面-搜索结果最大显示数量。'
+              help: '搜索页面-搜索结果最大显示数量，搜索表单、热门文章风格有效。'
     - group: enhance
       label: '增强功能'
       formSchema:

src/css/style.less

@@ -5320,7 +5320,7 @@ button.swiper-pagination-bullet {
 /* 搜索界面 */
 .search-page {
 
-  margin-top: 1.4rem !important;
+  margin-bottom: 1.4rem !important;
 
   .search-form-inner {
     width: 100%;
@@ -5392,10 +5392,6 @@ button.swiper-pagination-bullet {
   }
 }
 
-.search-page-title {
-  margin-top: 0 !important;
-}
-
 //登录组件
 .navbar-logon {
   margin-left: 5px;

src/js/common.js

@@ -120,6 +120,17 @@ const commonContext = {
     // 高亮移动端
     $nav_side_menus.eq(activeIndex).addClass('current')
   },
+  /* 搜索框弹窗 */
+  searchDialog() {
+    const $result = $('.navbar-search .result')
+    $('.navbar-search .input').on('click', function (e) {
+      e.stopPropagation()
+      $result.addClass('active')
+    })
+    $(document).on('click', function () {
+      $result.removeClass('active')
+    })
+  },
   /* 激活导航栏全局下拉框功能 */
   initDropMenu() {
     $('.item-dropdown').each(function (index, item) {

templates/common/navbar.html

@@ -65,8 +65,22 @@
                 </th:block>
             </nav>
             <div th:if="${pluginFinder.available('PluginSearchWidget')}" class="navbar-search">
-                <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>
+                <button th:if="${theme.config.page_config.search.search_style == 'basic'}" 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_style == 'form'}" 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>
+                <form data-pjax class="navbar-search" method="get" action="/search" th:if="${theme.config.page_config.search.search_style == 'box'}">
+                    <input autocomplete="off" th:placeholder="${theme.config.page_config.search.search_placeholder}" name="keyword" value="" class="input" type="text"/>
+                    <input id="halo-search-form-limit" type="hidden" name="limit" th:value="${theme.config.page_config.search.search_limit}"/>
+                    <button type="submit" class="submit" th:title="${theme.config.page_config.search.search_btn_title}" aria-label="搜索按钮"><i class="ri-search-line"></i></button>
+                    <span class="icon"></span>
+                    <nav class="result" th:with="searchPosts = ${postFinder.list({page: 1,size: 5,sort: {'stats.visit,desc'}})}">
+                        <a th:each="postData,pIndex : ${searchPosts}" th:href="@{${postData.status.permalink}}"
+                           th:title="${postData.spec.title}" th:target="${theme.config.page_config.search.search_target}"
+                           class="item">
+                            <span class="sort">[[${pIndex.count}]]</span>
+                            <span class="text">[[${postData.spec.title}]]</span>
+                        </a>
+                    </nav>
+                </form>
             </div>
             <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>

templates/search.html

@@ -4,7 +4,8 @@
         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-page search-page-title">
+        <div class="card card-content search-page"
+             th:if="${theme.config.page_config.search.search_style == 'form'}">
             <div class="card-tab">
                 <div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div>
             </div>
@@ -134,6 +135,57 @@
                 </form>
             </div>
         </div>
+        <div th:if="${theme.config.page_config.search.search_style == 'box'}">
+            <script th:inline="javascript">
+              $(function () {
+                var target = [[${theme.config.page_config.search.search_target}]]
+                var searchResult = $('#dream-search-result')
+                var searchResultEmpty = $('#dream-search-result-empty')
+
+                function removeHTMLTags(str) {
+                  const regex = /<(?!\/?B\b)[^>]*>/g
+                  return str.replace(regex, '')
+                }
+
+                function findResult() {
+                  var result = [[${searchResult}]]
+                  if (result.hits.length > 0) {
+                    searchResultEmpty.hide()
+                    searchResult.empty()
+                    for (var i = 0; i < result.hits.length; i++) {
+                      try {
+                        var hit = result.hits[i]
+                        var title = removeHTMLTags(hit.title)
+                        var description = hit.content ? removeHTMLTags(hit.content) : ''
+
+                        searchResult.append('<div class="widget card search-page">\n' +
+                          '<div class="card-content main">\n' +
+                          '<a href="' + hit.permalink + '" ' + ' target="' + target + '">\n' +
+                          '<h2 class="title">' + title + '</h2>\n' +
+                          '</a>\n' +
+                          (description ?
+                            ('<div class="main-content not-toc description">\n' + description +
+                              '\n</div>\n') : '') +
+                          '<hr/>\n' +
+                          '<div class="meta">\n' +
+                          '<div></div>\n' +
+                          '<em>' + '最后更新于 ' + Utils.formatDate(hit.updateTimestamp, 'yyyy年MM月dd日') + '</em>\n' +
+                          '</div>\n' +
+                          '</div>\n')
+                        // eslint-disable-next-line no-empty
+                      } catch (e) {
+                      }
+                    }
+                  } else {
+                    searchResultEmpty.show()
+                    searchResult.empty()
+                  }
+                }
+
+                findResult()
+              })
+            </script>
+        </div>
         <div id="dream-search-result">
         </div>
         <div id="dream-search-result-empty" class="widget card search-page">

theme.yaml

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