更改搜索功能

settings.yaml

@@ -1101,7 +1101,7 @@ spec:
               label:  关闭
         - $formkit: group
           name: search
-          label: 搜索
+          label: 搜索页面
           help: 使用新版搜索需要 halo >= 2.17.0 & 搜索插件 >= 1.5.0。
           value:
             search_enable: false

src/css/style.less

@@ -5227,6 +5227,7 @@ button.swiper-pagination-bullet {
 
 /* 搜索界面 */
 .search {
+  margin-top: 1.4rem !important;
 
   .search-form-inner {
     width: 100%;
@@ -5292,7 +5293,7 @@ button.swiper-pagination-bullet {
     display: inline-block;
   }
 
-  b {
+  b, mark {
     color: var(--light-z);
     background: var(--theme);
   }

src/js/search.js

@@ -0,0 +1,91 @@
+$(function () {
+  var searchForm = document.getElementById('dream-search-form')
+  var target = DreamConfig.search_target
+  var searchInput = document.getElementById('halo-search-form-text-input')
+  var searchResult = $('#dream-search-result')
+  var searchResultEmpty = $('#dream-search-result-empty')
+  searchForm.addEventListener('submit', function (event) {
+    event.preventDefault()
+    findResult(searchInput.value)
+  })
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Enter') {
+      if (searchForm.contains(document.activeElement)) {
+        event.preventDefault()
+        findResult(searchInput.value)
+      }
+    }
+  })
+  // 监听输入事件
+  searchInput.addEventListener('input', function (event) {
+    findResult(event.target.value)
+  })
+
+  function removeHTMLTags(str) {
+    // 保留 <mark> 和 </mark> 标签，移除其他所有标签
+    return str.replace(/<(?!(?:mark\b[^<>]*)<\/mark>|mark\b)[^<>]*>/gi, '')
+  }
+
+  function findResult(keyword) {
+    if (!keyword) {
+      searchResult.empty()
+      searchResultEmpty.show()
+      return
+    }
+    Utils.request({
+      url: '/apis/api.halo.run/v1alpha1/indices/post',
+      contentType: 'application/json;charset=UTF-8',
+      returnRaw: true,
+      data: {
+        keyword,
+        limit: $('#halo-search-form-limit').val(),
+        highlightPreTag: '<mark>',
+        highlightPostTag: '</mark>'
+      }
+    })
+      .then((_res) => {
+        console.log(_res)
+        if (_res.hits.length > 0) {
+          searchResultEmpty.hide()
+          searchResult.empty()
+          for (var i = 0; i < _res.hits.length; i++) {
+            var hit = _res.hits[i]
+            searchResult.append('<div class="widget card search">\n' +
+              '<div class="card-content main">\n' +
+              '<a href="' + hit.permalink + '" ' + ' target="' + target + '">\n' +
+              '<h2 class="title">' + removeHTMLTags(hit.title) + '</h2>\n' +
+              '</a>\n' +
+              '<div class="main-content not-toc description">\n' +
+              removeHTMLTags(hit.description) +
+              '\n</div>\n' +
+              '<hr/>\n' +
+              '<div class="meta">\n' +
+              '<div></div>\n' +
+              '<em text="最后更新于 ' + Utils.formatDate(hit.updateTimestamp, 'yyyy年MM月dd日 HH:mm:ss') + '"></em>\n' +
+              '</div>\n' +
+              '</div>\n')
+          }
+        } else {
+          searchResultEmpty.show()
+          searchResult.empty()
+        }
+      })
+      .catch((err) => {
+      })
+  }
+
+  function getParameterByName(name, url = window.location.href) {
+    name = name.replace(/[\[\]]/g, '\\$&')
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+      results = regex.exec(url)
+    if (!results) return null
+    if (!results[2]) return ''
+    return decodeURIComponent(results[2].replace(/\+/g, ' '))
+  }
+
+  var keyword = getParameterByName('keyword')
+  if (keyword) {
+    var event = new Event('input', {bubbles: true})
+    searchInput.dispatchEvent(event)
+  }
+})()

templates/assets/js/search.min.js

@@ -0,0 +1 @@
+$(function(){var e,t=document.getElementById("dream-search-form"),a=DreamConfig.search_target,n=document.getElementById("halo-search-form-text-input"),i=$("#dream-search-result"),r=$("#dream-search-result-empty");function s(e){return e.replace(/<(?!(?:mark\b[^<>]*)<\/mark>|mark\b)[^<>]*>/gi,"")}function c(e){if(!e)return i.empty(),r.show();Utils.request({url:"/apis/api.halo.run/v1alpha1/indices/post",contentType:"application/json;charset=UTF-8",returnRaw:!0,data:{keyword:e,limit:$("#halo-search-form-limit").val(),highlightPreTag:"<mark>",highlightPostTag:"</mark>"}}).then(e=>{if(console.log(e),0<e.hits.length){r.hide(),i.empty();for(var t=0;t<e.hits.length;t++){var n=e.hits[t];i.append('<div class="widget card search">\n<div class="card-content main">\n<a href="'+n.permalink+'"  target="'+a+'">\n<h2 class="title">'+s(n.title)+'</h2>\n</a>\n<div class="main-content not-toc description">\n'+s(n.description)+'\n</div>\n<hr/>\n<div class="meta">\n<div></div>\n<em text="最后更新于 '+Utils.formatDate(n.updateTimestamp,"yyyy年MM月dd日 HH:mm:ss")+'"></em>\n</div>\n</div>\n')}}else r.show(),i.empty()}).catch(e=>{})}t.addEventListener("submit",function(e){e.preventDefault(),c(n.value)}),document.addEventListener("keydown",function(e){"Enter"===e.key&&t.contains(document.activeElement)&&(e.preventDefault(),c(n.value))}),n.addEventListener("input",function(e){c(e.target.value)}),function(e,t=window.location.href){e="keyword".replace(/[\[\]]/g,"\\$&");e=new RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)").exec(t);return e&&e[2]&&decodeURIComponent(e[2].replace(/\+/g," "))}()&&(e=new Event("input",{bubbles:!0}),n.dispatchEvent(e))})();

templates/common/config.html

@@ -106,6 +106,7 @@
     DreamConfig["enable_security_link"] = [[${theme.config.security_link_config.enable_security_link}]];
     DreamConfig["security_link_url"] = [[${theme.config.security_link_config.security_link_url}]];
 
+    DreamConfig["search_target"] = [[${theme.config.page_config.search.search_target}]];
     DreamConfig["theme_version"] = [[${theme.spec.version}]];
     DreamConfig["theme_base"] = "[(${#theme.assets('/')})]";
     [(${!#strings.isEmpty(theme.config.post.code_fold_line)?'DreamConfig["code_fold_line"] = "' + theme.config.post.code_fold_line + '";': ''})]

templates/search.html

@@ -9,34 +9,10 @@
                 <div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div>
             </div>
             <div class="search-box">
-                <script th:inline="javascript">
+                <script th:src="@{/assets/js/search.min.js(mew=${theme.spec.version})}"></script>
-                  $(function () {
+                <form id="dream-search-form" class="search-form-inner" method="get" action="/search" role="search">
-                    var searchForm = document.getElementById('halo-search-form')
+                    <input id="halo-search-form-limit" type="hidden" name="limit"
-                    searchForm.addEventListener('submit', function (event) {
+                           th:value="${theme.config.page_config.search.search_limit}">
-                      var searchInput = document.getElementById('halo-search-form-text-input')
-                      var query = searchInput.value.trim()
-                      if (!query || query.startsWith('*')) {
-                        event.preventDefault()
-                        Qmsg.warning(!query ? '请输入内容' : '不能输入星号（*）作为内容开头')
-                        return
-                      }
-                      if (DreamConfig.pjax_state) {
-                        event.preventDefault()
-                        searchForm.setAttribute('data-pjax', '')
-                      }
-                    })
-                    document.addEventListener('keydown', function (event) {
-                      if (event.key === 'Enter') {
-                        if (!searchForm.contains(document.activeElement)) {
-                          event.preventDefault() // 阻止默认行为
-                          searchForm.dispatchEvent(new Event('submit')) // 触发submit事件
-                        }
-                      }
-                    })
-                  })
-                </script>
-                <form id="halo-search-form" class="search-form-inner" method="get" action="/search" role="search">
-                    <input type="hidden" name="limit" th:value="${theme.config.page_config.search.search_limit}">
                     <input
                             id="halo-search-form-text-input"
                             class="text-input"
@@ -53,21 +29,9 @@
                 </form>
             </div>
         </div>
-        <div th:if="${searchResult.hits.size() > 0}" class="widget card search" th:each="hit : ${searchResult.hits}">
+        <div id="dream-search-result">
-            <div class="card-content main">
-                <a th:href="${hit.permalink}" th:target="${theme.config.page_config.search.search_target}">
-                    <h2 class="title">[(${hit.title})]</h2>
-                </a>
-<!--                <div class="main-content not-toc description" 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>
+        <div id="dream-search-result-empty" class="widget card search">
-        </div>
-        <div th:unless="${searchResult.hits.size() > 0}" class="widget card search">
             <div class="result-empty">
                 <div class="result-empty-tips" th:utext="${theme.config.page_config.search.search_empty_tips}"></div>
             </div>

theme.yaml

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