<!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"> <script th:inline="javascript"> $(function () { var searchForm = document.getElementById('dream-search-form') var target = [[${theme.config.page_config.search.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) { const regex = /<(?!\/?mark\b)[^>]*>/g return str.replace(regex, '') } 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>' }, noErrorTip: true }) .then((_res) => { if (_res.hits.length > 0) { searchResultEmpty.hide() searchResult.empty() for (var i = 0; i < _res.hits.length; i++) { try { var hit = _res.hits[i] var title = removeHTMLTags(hit.title) var description = hit.content ? removeHTMLTags(hit.content) : '' searchResult.append('<div class="widget card search">\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() } }) .catch((err) => { searchResultEmpty.hide() searchResult.empty() }) } 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) } }) </script> <form id="dream-search-form" class="search-form-inner" method="get" action="/search" role="search"> <input id="halo-search-form-limit" type="hidden" name="limit" th:value="${theme.config.page_config.search.search_limit}"> <input id="halo-search-form-text-input" class="text-input" type="search" name="keyword" th:title="${theme.config.page_config.search.search_placeholder}" th:placeholder="${theme.config.page_config.search.search_placeholder}" th:value="${searchResult.keyword}" /> <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 id="dream-search-result"> </div> <div id="dream-search-result-empty" 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> </div> </th:block> </th:block>