zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复动画掉帧的问题，增加昼夜切换的过渡动画

Browse Source
This commit is contained in:
zqlit committed 2026-05-24 14:43:34 +08:00
1 parent 624d0bda0f
commit ff228ae6f5
2 files changed
+187 -150
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/Ying/assets/js/modules/search.js
+47 -40
View File
@@ -94,16 +94,31 @@ function initSearchModal() {
searchResults.parentNode.replaceChild(newResults, searchResults);
searchResults = newResults;
// Close modal when a result is clicked
// Result click — use data-href to avoid pjax anchor conflicts
searchResults.addEventListener('click', function(e) {
if (e.target.closest('a')) {
searchModal.classList.remove('show');
var item = e.target.closest('.search-result-item');
if (!item) return;
var href = item.getAttribute('data-href');
if (!href) return;
e.preventDefault();
e.stopPropagation();
searchModal.classList.remove('show');
searchModal.style.transition = 'none';
requestAnimationFrame(function() {
requestAnimationFrame(function() {
searchModal.style.transition = '';
});
});
if (window.pjax) {
window.pjax.loadUrl(href, { triggerElement: item });
} else {
window.location.href = href;
}
});
searchInput.addEventListener('input', debounce(function() {
var query = this.value.trim().toLowerCase();
if (query.length === 0) {
searchResults.innerHTML = '<p class="search-tip">输入关键词并回车进行搜索</p>';
return;
@@ -122,26 +137,20 @@ function initSearchModal() {
}
var results = window.searchIndex.filter(function(item) {
return (item.title && item.title.toLowerCase().includes(query)) ||
return (item.title && item.title.toLowerCase().includes(query)) ||
(item.summary && item.summary.toLowerCase().includes(query));
});
if (results.length > 0) {
var html = results.map(function(item) {
return `
<div class="search-result-item">
<a href="${item.permalink}" class="search-result-title">${item.title}</a>
<span class="search-result-date">${item.date}</span>
<div class="search-result-summary">${item.summary || ''}</div>
</div>
`;
var path = item.permalink.replace(/^https?:\/\/[^\/]+/, '');
return '<div class="search-result-item" data-href="' + path + '" role="link" tabindex="0">' +
'<span class="search-result-title">' + item.title + '</span>' +
'<span class="search-result-date">' + item.date + '</span>' +
'<div class="search-result-summary">' + (item.summary || '') + '</div>' +
'</div>';
}).join('');
searchResults.innerHTML = html;
// Refresh PJAX to recognize new links
if (window.pjax) {
window.pjax.refresh(searchResults);
}
} else {
searchResults.innerHTML = '<p class="search-tip">未找到相关文章</p>';
}
@@ -273,24 +282,18 @@ function initInlineSearch() {
if (results.length > 0) {
var html = results.slice(0, 5).map(function(item) {
return `
<a href="${item.permalink}" class="search-result-item">
<span class="search-result-title">${item.title}</span>
<div class="search-result-meta">
<span class="search-result-date">${item.date}</span>
<span class="search-result-summary-text">${item.summary || ''}</span>
</div>
</a>
`;
var path = item.permalink.replace(/^https?:\/\/[^\/]+/, '');
return '<div class="search-result-item" data-href="' + path + '" role="link" tabindex="0">' +
'<span class="search-result-title">' + item.title + '</span>' +
'<div class="search-result-meta">' +
'<span class="search-result-date">' + item.date + '</span>' +
'<span class="search-result-summary-text">' + (item.summary || '') + '</span>' +
'</div>' +
'</div>';
}).join('');
resultsContainer.innerHTML = html;
resultsContainer.classList.add('show');
// PJAX Refresh
if (window.pjax) {
window.pjax.refresh(resultsContainer);
}
} else {
resultsContainer.innerHTML = '<div class="search-result-item no-result">暂无相关内容</div>';
resultsContainer.classList.add('show');
@@ -315,15 +318,19 @@ function initInlineSearch() {
document.addEventListener('click', window.inlineSearchClickOutside);
}
// Manual PJAX delegation for results
// Click delegation for results
resultsContainer.addEventListener('click', function(e) {
var link = e.target.closest('a');
if (link && window.pjax) {
e.preventDefault();
// Close search first
window.toggleSearchMode(false);
// Then navigate
window.pjax.loadUrl(link.href, { triggerElement: link });
var item = e.target.closest('.search-result-item');
if (!item) return;
var href = item.getAttribute('data-href');
if (!href) return;
e.preventDefault();
e.stopPropagation();
window.toggleSearchMode(false);
if (window.pjax) {
window.pjax.loadUrl(href, { triggerElement: item });
} else {
window.location.href = href;
}
});