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

fixed 样式bug

Browse Source
This commit is contained in:
Vaica committed 2026-02-01 17:00:25 +08:00
1 parent d65d6d94c7
commit 62e547b2ee
6 files changed
+588 -307
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/Ying/assets/js/modules/search.js
+164 -33
View File
@@ -3,17 +3,37 @@ window.initSearch = function() {
initInlineSearch();
};
var searchLoadingPromise = null;
function loadSearchIndex() {
if (!window.searchIndex) {
return fetch('/index.json')
.then(response => response.json())
.then(data => {
window.searchIndex = data;
return data;
})
.catch(err => console.error('Failed to load search index:', err));
if (window.searchIndex) {
return Promise.resolve(window.searchIndex);
}
return Promise.resolve(window.searchIndex);
if (searchLoadingPromise) {
return searchLoadingPromise;
}
window.isSearchingLoading = true;
searchLoadingPromise = fetch('/index.json')
.then(response => {
if (!response.ok) throw new Error(response.statusText);
return response.json();
})
.then(data => {
window.searchIndex = data;
window.isSearchingLoading = false;
searchLoadingPromise = null;
return data;
})
.catch(err => {
console.error('Failed to load search index:', err);
window.isSearchingLoading = false;
searchLoadingPromise = null;
return null; // Return null on error to handle gracefully
});
return searchLoadingPromise;
}
function initSearchModal() {
@@ -73,11 +93,24 @@ function initSearchModal() {
searchInput.addEventListener('input', function() {
var query = this.value.trim().toLowerCase();
if (!window.searchIndex || query.length === 0) {
if (query.length === 0) {
searchResults.innerHTML = '<p class="search-tip">输入关键词并回车进行搜索</p>';
return;
}
if (!window.searchIndex) {
searchResults.innerHTML = '<p class="search-tip">索引加载中...</p>';
loadSearchIndex().then(function(data) {
if (data && searchInput.value.trim().length > 0) {
searchInput.dispatchEvent(new Event('input'));
} else if (!data) {
searchResults.innerHTML = '<p class="search-tip">索引加载失败</p>';
}
});
return;
}
var results = window.searchIndex.filter(function(item) {
return (item.title && item.title.toLowerCase().includes(query)) ||
(item.summary && item.summary.toLowerCase().includes(query));
@@ -114,16 +147,25 @@ function initInlineSearch() {
var resultsContainer = document.getElementById('inline-search-results');
window.toggleSearchMode = function(show) {
if (!header || !searchContainer || !input || !resultsContainer) return;
if (!header || !searchContainer || !input || !resultsContainer) {
console.warn('Search elements missing, cannot toggle mode.');
return;
}
var searchHint = document.querySelector('.search-hint-wrapper');
if (show) {
if (searchHint) searchHint.style.display = 'none'; // Hide hint completely to avoid layout shifts
header.style.display = 'none';
searchContainer.style.display = 'block';
input.focus();
loadSearchIndex();
loadSearchIndex().then(() => {
console.log('Search index loaded via toggle');
}).catch(e => console.error('Search index load failed', e));
// Add Esc key listener
document.addEventListener('keydown', escListener);
} else {
if (searchHint) searchHint.style.display = ''; // Restore hint
header.style.display = 'inline-flex';
searchContainer.style.display = 'none';
input.value = '';
@@ -199,7 +241,20 @@ function initInlineSearch() {
return;
}
if (!window.searchIndex) return;
if (!window.searchIndex) {
resultsContainer.innerHTML = '<div class="search-result-item no-result">索引加载中...</div>';
resultsContainer.classList.add('show');
loadSearchIndex().then(function(data) {
// If data loaded successfully and user hasn't cleared input
if (data && input.value.trim().length > 0) {
input.dispatchEvent(new Event('input'));
} else if (!data) {
resultsContainer.innerHTML = '<div class="search-result-item no-result">索引加载失败</div>';
}
});
return;
}
var results = window.searchIndex.filter(function(item) {
return (item.title && item.title.toLowerCase().includes(query)) ||
@@ -207,26 +262,26 @@ function initInlineSearch() {
});
if (results.length > 0) {
var html = results.slice(0, 5).map(function(item) {
return `
<a href="${item.permalink}" class="search-result-item" onclick="window.toggleSearchMode(false)">
<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>
`;
}).join('');
resultsContainer.innerHTML = html;
resultsContainer.classList.add('show');
// PJAX Refresh
if (window.pjax) {
window.pjax.refresh(resultsContainer);
}
} else {
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>
`;
}).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');
}
@@ -247,4 +302,80 @@ function initInlineSearch() {
};
document.addEventListener('click', window.inlineSearchClickOutside);
}
// Manual PJAX 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 });
}
});
// Search Hint Typewriter Logic
var header = document.getElementById('essay-header');
var searchHintWrapper = header ? header.querySelector('.search-hint-wrapper') : null;
var searchHintText = searchHintWrapper ? searchHintWrapper.querySelector('.search-hint') : null;
if (searchHintWrapper && searchHintText) {
// --- Smart Greeting Logic ---
var text = window.searchHintText || "点击随笔 开始搜索";
var now = new Date();
var month = now.getMonth() + 1;
var day = now.getDate();
var dateStr = (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
var hour = now.getHours();
// 1. Check Holidays
if (window.searchHolidays && window.searchHolidays[dateStr]) {
text = window.searchHolidays[dateStr];
}
// 2. Check Time of Day (if greetings configured)
else if (window.searchGreetings) {
if (hour >= 6 && hour < 11 && window.searchGreetings.morning) {
text = window.searchGreetings.morning;
} else if (hour >= 11 && hour < 14 && window.searchGreetings.noon) {
text = window.searchGreetings.noon;
} else if (hour >= 14 && hour < 18 && window.searchGreetings.afternoon) {
text = window.searchGreetings.afternoon;
} else if (hour >= 18 && hour < 22 && window.searchGreetings.evening) {
text = window.searchGreetings.evening;
} else if ((hour >= 22 || hour < 6) && window.searchGreetings.night) {
text = window.searchGreetings.night;
}
}
// Reset text content initially but keep it ready
// Pre-fill first character to avoid empty bubble on mobile (where CSS forces visibility)
if (text.length > 0) {
searchHintText.textContent = text.charAt(0);
} else {
searchHintText.textContent = '';
}
// Show wrapper initially
setTimeout(function() {
// Add visible class (triggers fade in on desktop)
searchHintWrapper.classList.add('visible');
// Typewriter effect
var i = 1;
var typeInterval = setInterval(function() {
if (i >= text.length) {
clearInterval(typeInterval);
// Hide after 8 seconds (give more time to read greetings)
setTimeout(function() {
searchHintWrapper.classList.remove('visible');
}, 8000);
return;
}
searchHintText.textContent = text.substring(0, i + 1);
i++;
}, 100);
}, 500);
}
}