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

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

View File

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

View File

@ -120,6 +120,17 @@ const commonContext = {
// 高亮移动端 // 高亮移动端
$nav_side_menus.eq(activeIndex).addClass('current') $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() { initDropMenu() {
$('.item-dropdown').each(function (index, item) { $('.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> </th:block>
</nav> </nav>
<div th:if="${pluginFinder.available('PluginSearchWidget')}" class="navbar-search"> <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> <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_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> <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> </div>
<i th:unless="${theme.config.page_config.search.search_enable}" class="ri-search-line navbar-searchicon" onclick="javascript:SearchWidget.open();"></i> <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> <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" th:with="isJournals = true, enableShare = false, baseEnableComment = false"
xmlns:th="https://www.thymeleaf.org"> xmlns:th="https://www.thymeleaf.org">
<th:block th:fragment="content"> <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 class="card-tab">
<div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div> <div>[[${#strings.replace(title, ' - ' + site.title, '')}]]</div>
</div> </div>
@ -134,6 +135,57 @@
</form> </form>
</div> </div>
</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 id="dream-search-result">
</div> </div>
<div id="dream-search-result-empty" class="widget card search-page"> <div id="dream-search-result-empty" class="widget card search-page">

View File

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