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

This commit is contained in:
mjsoftware 2024-12-24 13:33:51 +08:00
parent dc84685d41
commit 3ebd48ea01
10 changed files with 107 additions and 29 deletions

View File

@ -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:

View File

@ -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;

View File

@ -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) {

View File

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

View File

@ -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>

View File

@ -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">

View File

@ -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"
# 许可