halo-theme-dream2.0-plus
Version:
梦之城，童话梦境，动漫类型博客主题。
152 lines (145 loc) • 7.48 kB
HTML
<th:block
th:insert="~{common/layout :: layout (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-page">
<div class="card-tab">
<div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div>
</div>
<div class="search-box">
<script th:inline="javascript">
$(function () {
var boxSearchContentInput = $('#box-search-content-input')
if (boxSearchContentInput) {
boxSearchContentInput.val('')
}
let timer
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')
var searchResultLimit = $('#halo-search-form-limit').val()
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) {
clearTimeout(timer)
timer = setTimeout(function () {
findResult(searchInput.value)
}, 150)
})
function removeHTMLTags(str) {
const regex = /<(?!\/?B\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/-/search',
returnRaw: true,
method: 'POST',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify({
keyword,
limit: (searchResultLimit && searchResultLimit !== '') ? searchResultLimit : 10,
highlightPreTag: '<B>',
highlightPostTag: '</B>'
}),
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-page">\n' +
'<div class="card-content main">\n' +
`<a aria-label="${title}" title="${title}" 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.show()
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"
placeholder="搜索内容..."
th:value="${searchResult.keyword}"
/>
<button class="search-form-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-page">
<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>