78 lines
4.4 KiB
HTML
78 lines
4.4 KiB
HTML
<!--
|
||
D-10（docs/20）搜索浮层 · 通用 fragment：theme.json 参数 searchStyle 控制门户搜索形态——
|
||
· inline（缺省）= 保留主题 header 自有内联搜索表单（现状外观，零变化）
|
||
· none = 不渲染任何搜索入口
|
||
· overlay = 隐藏内联表单，渲染右上「放大镜」按钮 + 全屏搜索浮层（本文件实现）
|
||
引用方式：主题 header.html 在其内联搜索表单位置——
|
||
<th:block th:if="${themeParams != null and themeParams['searchStyle'] == 'overlay'}"
|
||
th:replace="~{'themes/common/fragments/search' :: overlay(${url})}" />
|
||
<form class="…" th:unless="${themeParams != null and themeParams['searchStyle'] == 'overlay'}" …>（inline/缺省保留原表单）
|
||
样式/脚本自持（不引外部依赖）；颜色跟随主题变量缺省蓝。
|
||
-->
|
||
<th:block th:fragment="overlay(url)">
|
||
<div class="plb-search-widget">
|
||
<button type="button" class="plb-search-toggle" aria-label="打开站内搜索" aria-expanded="false">
|
||
<svg viewBox="0 0 24 24" width="19" height="19" focusable="false" aria-hidden="true">
|
||
<path d="M10.5 3a7.5 7.5 0 015.9 12.1l4.3 4.3-1.4 1.4-4.3-4.3A7.5 7.5 0 1110.5 3zm0 2a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
<span>搜索</span>
|
||
</button>
|
||
<div class="plb-search-layer" role="dialog" aria-modal="true" aria-label="站内搜索">
|
||
<button type="button" class="plb-search-close" aria-label="关闭搜索">✕</button>
|
||
<form class="plb-search-form" th:action="${url.search('', null)}" method="get" role="search">
|
||
<input type="text" name="q" placeholder="输入关键词，搜索本站内容…" aria-label="站内搜索" autocomplete="off">
|
||
<button type="submit">搜 索</button>
|
||
</form>
|
||
<p class="plb-search-tip">按 ESC 或点击空白处关闭</p>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.plb-search-widget{position:relative}
|
||
.plb-search-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border, #e5e6eb);
|
||
background:transparent;color:inherit;border-radius:18px;padding:5px 14px;font-size:13px;cursor:pointer;
|
||
transition:border-color .2s,color .2s}
|
||
.plb-search-toggle:hover{border-color:var(--primary, #2d8cf0);color:var(--primary, #2d8cf0)}
|
||
.plb-search-layer{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
|
||
flex-direction:column;background:rgba(10,20,40,.82);backdrop-filter:blur(6px)}
|
||
.plb-search-widget.open .plb-search-layer{display:flex}
|
||
.plb-search-close{position:absolute;top:26px;right:32px;background:none;border:0;color:#fff;font-size:22px;
|
||
cursor:pointer;opacity:.8;padding:6px}
|
||
.plb-search-close:hover{opacity:1}
|
||
.plb-search-form{display:flex;width:min(640px,86vw);border-radius:8px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.35)}
|
||
.plb-search-form input{flex:1;border:0;padding:16px 18px;font-size:16px;outline:none;min-width:0}
|
||
.plb-search-form button{border:0;padding:0 26px;font-size:15px;cursor:pointer;
|
||
background:var(--primary, #2d8cf0);color:#fff}
|
||
.plb-search-form button:hover{filter:brightness(1.08)}
|
||
.plb-search-tip{margin-top:16px;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.05em}
|
||
</style>
|
||
<script>
|
||
(function () {
|
||
var widget = document.currentScript && document.currentScript.previousElementSibling;
|
||
while (widget && !(widget.classList && widget.classList.contains('plb-search-widget'))) {
|
||
widget = widget && widget.previousElementSibling;
|
||
}
|
||
if (!widget || widget.__plbSearchBound) { return; }
|
||
widget.__plbSearchBound = true;
|
||
var toggle = widget.querySelector('.plb-search-toggle');
|
||
var layer = widget.querySelector('.plb-search-layer');
|
||
var input = widget.querySelector('.plb-search-form input');
|
||
function open() {
|
||
widget.classList.add('open');
|
||
toggle.setAttribute('aria-expanded', 'true');
|
||
if (input) { setTimeout(function () { input.focus(); }, 50); }
|
||
}
|
||
function close() {
|
||
widget.classList.remove('open');
|
||
toggle.setAttribute('aria-expanded', 'false');
|
||
}
|
||
toggle.addEventListener('click', open);
|
||
widget.querySelector('.plb-search-close').addEventListener('click', close);
|
||
layer.addEventListener('click', function (e) { if (e.target === layer) { close(); } });
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') { close(); }
|
||
});
|
||
})();
|
||
</script>
|
||
</th:block>
|