added 搜索功能

themes/Ying/assets/css/main.css

@@ -3269,6 +3269,393 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
 
 .artalk.hidden { display: none; }
 
+/* Search Modal Styles */
+.search-modal {
+    display: none; /* Hidden by default */
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.search-modal.show {
+    display: flex;
+    opacity: 1;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    transform: translateY(-20px);
+    transition: transform 0.3s ease;
+}
+
+.search-modal.show .search-modal-content {
+    transform: translateY(0);
+}
+
+.search-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+}
+
+.search-header h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    color: #333;
+}
+
+.close-search {
+    color: #aaa;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.close-search:hover,
+.close-search:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.search-input-wrapper {
+    display: flex;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 5px 10px;
+    background: #f9f9f9;
+}
+
+.search-input-wrapper input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 10px;
+    font-size: 16px;
+    outline: none;
+}
+
+.search-input-wrapper button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #666;
+    padding: 0 10px;
+}
+
+.search-results {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.search-result-item {
+    padding: 15px;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background-color 0.2s;
+}
+
+.search-result-item:last-child {
+    border-bottom: none;
+}
+
+.search-result-item:hover {
+    background-color: #f5f5f5;
+}
+
+.search-result-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 5px;
+    display: block;
+    color: #333;
+    text-decoration: none;
+}
+
+.search-result-title:hover {
+    color: var(--text-highlight-color);
+}
+
+.search-result-date {
+    font-size: 12px;
+    color: #999;
+    margin-bottom: 5px;
+    display: block;
+}
+
+.search-result-summary {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.search-tip {
+    text-align: center;
+    color: #999;
+    padding: 20px;
+}
+
+/* Dark Mode Adaptation */
+[data-theme="dark"] .search-modal-content {
+    background-color: #2d2d2d;
+    border-color: #444;
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .search-header {
+    border-bottom-color: #444;
+}
+
+[data-theme="dark"] .search-header h3 {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .close-search {
+    color: #888;
+}
+
+[data-theme="dark"] .close-search:hover {
+    color: #fff;
+}
+
+[data-theme="dark"] .search-input-wrapper {
+    background: #333;
+    border-color: #555;
+}
+
+[data-theme="dark"] .search-input-wrapper input {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .search-input-wrapper button {
+    color: #aaa;
+}
+
+[data-theme="dark"] .search-result-item {
+    border-bottom-color: #444;
+}
+
+[data-theme="dark"] .search-result-item:hover {
+    background-color: #383838;
+}
+
+[data-theme="dark"] .search-result-title {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .search-result-summary {
+    color: #aaa;
+}
+
+/* Inline Search Styles */
+.searchable-header-container {
+    position: relative;
+    margin-top: 15px;
+    height: 13px; 
+    display: flex;
+    align-items: center;
+}
+
+.section-header.normal-mode {
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+    margin: 0;
+    user-select: none;
+    line-height: 1;
+}
+
+.section-header.normal-mode:hover {
+    opacity: 0.7;
+}
+
+.search-hint {
+    font-size: 12px;
+    font-weight: normal;
+    color: #999;
+    margin-left: 10px;
+    opacity: 0; /* Hidden by default */
+    transform: translateX(-5px);
+    transition: all 0.3s ease;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.section-header.normal-mode:hover .search-hint {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* Mobile: always show hint to ensure discoverability */
+@media (max-width: 768px) {
+    .search-hint {
+        opacity: 0.6;
+        transform: translateX(0);
+    }
+}
+
+.search-mode {
+    width: 100%;
+    animation: fadeIn 0.3s ease;
+}
+
+.search-input-group {
+    display: flex;
+    align-items: center;
+    background: transparent;
+    border-bottom: 1px solid #e5e7eb;
+    padding: 0 5px;
+    width: 100%;
+    max-width: 300px;
+    transition: all 0.3s ease;
+}
+
+.search-input-group:focus-within {
+    background: transparent;
+    border-bottom-color: var(--text-highlight-color);
+    box-shadow: none;
+}
+
+.search-input-group input {
+    border: none;
+    background: transparent;
+    flex: 1;
+    padding: 5px 10px;
+    font-size: 14px;
+    outline: none;
+    color: #333;
+}
+
+.search-input-group .search-icon {
+    color: #999;
+    font-size: 16px;
+}
+
+.search-input-group .close-icon {
+    color: #999;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 5px;
+}
+
+.search-input-group .close-icon:hover {
+    color: #333;
+}
+
+.search-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-width: 300px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    z-index: 100;
+    max-height: 300px;
+    overflow-y: auto;
+    display: none;
+    margin-top: 5px;
+    border: 1px solid #eee;
+}
+
+.search-dropdown .search-result-item {
+    padding: 10px 15px;
+    font-size: 14px;
+    display: block; /* Ensure it behaves like a block */
+    text-decoration: none; /* Remove underline */
+    color: inherit; /* Inherit text color */
+    cursor: pointer;
+}
+
+.search-dropdown .search-result-item:hover {
+    background-color: #f5f5f5;
+    text-decoration: none;
+}
+
+.search-dropdown .search-result-title {
+    font-size: 15px;
+    font-weight: 600;
+    display: block; /* Ensure title is block to break line */
+    color: #333;
+}
+
+.search-dropdown .search-result-summary {
+    font-size: 12px;
+    -webkit-line-clamp: 1;
+}
+
+/* Dark Mode for Inline Search */
+[data-theme="dark"] .search-input-group {
+    background: transparent;
+    border-bottom-color: #444;
+}
+
+[data-theme="dark"] .search-input-group:focus-within {
+    background: transparent;
+    border-bottom-color: var(--text-highlight-color);
+}
+
+[data-theme="dark"] .search-input-group input {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .search-input-group .search-icon,
+[data-theme="dark"] .search-input-group .close-icon {
+    color: #888;
+}
+
+[data-theme="dark"] .search-input-group .close-icon:hover {
+    color: #fff;
+}
+
+[data-theme="dark"] .search-dropdown {
+    background: #2d2d2d;
+    border-color: #444;
+}
+
+[data-theme="dark"] .search-dropdown .search-result-item {
+    color: #e0e0e0;
+}
+
+[data-theme="dark"] .search-dropdown .search-result-item:hover {
+    background-color: #383838;
+}
+
+[data-theme="dark"] .search-dropdown .search-result-title {
+    color: #e0e0e0;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateX(-10px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
 
 
 

themes/Ying/assets/js/main.js

@@ -461,3 +461,244 @@ function scrollToCommentsAndQuote(text) {
        }, 500);
    }
 }
+
+/* Search Functionality */
+function initSearchFunctionality() {
+    const searchBtn = document.getElementById('search-btn');
+    const searchModal = document.getElementById('search-modal');
+    const closeSearch = document.querySelector('.close-search');
+    const searchInput = document.getElementById('search-input');
+    const searchResults = document.getElementById('search-results');
+    const searchSubmit = document.getElementById('search-submit');
+    
+    // Global variables (window scope) to persist across re-inits if needed, 
+    // but better to keep them scoped if we re-fetch. 
+    // For simplicity, we keep index loading check.
+    if (!window.searchIndex) window.searchIndex = [];
+    if (!window.isIndexLoaded) window.isIndexLoaded = false;
+
+    if (!searchBtn || !searchModal) return;
+
+    // Open Modal
+    // Use named function to avoid duplicate listeners if we didn't clean up (though init is usually called once per page load/pjax)
+    function openModal() {
+        searchModal.classList.add('show');
+        if (!window.isIndexLoaded) {
+            loadSearchIndex();
+        }
+        setTimeout(() => searchInput.focus(), 100);
+    }
+    searchBtn.removeEventListener('click', openModal); // Prevent duplicates
+    searchBtn.addEventListener('click', openModal);
+
+    // Close Modal
+    function closeModal() {
+        searchModal.classList.remove('show');
+    }
+
+    if (closeSearch) {
+        closeSearch.onclick = closeModal;
+    }
+    
+    // Close when clicking outside
+    window.onclick = function(e) {
+        if (e.target === searchModal) {
+            closeModal();
+        }
+    };
+    
+    // Close on Escape key
+    document.onkeydown = function(e) {
+        if (e.key === 'Escape' && searchModal.classList.contains('show')) {
+            closeModal();
+        }
+    };
+
+    // Load Index
+    function loadSearchIndex() {
+        fetch('/index.json')
+            .then(response => response.json())
+            .then(data => {
+                window.searchIndex = data;
+                window.isIndexLoaded = true;
+            })
+            .catch(error => {
+                console.error('Error loading search index:', error);
+                if(searchResults) searchResults.innerHTML = '<p class="search-tip">搜索索引加载失败</p>';
+            });
+    }
+
+    // Perform Search
+    function performSearch() {
+        if(!searchInput) return;
+        const query = searchInput.value.trim().toLowerCase();
+        if (query === '') {
+            searchResults.innerHTML = '<p class="search-tip">输入关键词并回车进行搜索</p>';
+            return;
+        }
+        
+        if (!window.isIndexLoaded) {
+            searchResults.innerHTML = '<p class="search-tip">正在加载索引...</p>';
+            // Retry after a short delay if index is loading
+            setTimeout(performSearch, 500); 
+            return;
+        }
+
+        const results = window.searchIndex.filter(item => {
+            const title = item.title ? item.title.toLowerCase() : '';
+            const summary = item.summary ? item.summary.toLowerCase() : '';
+            return title.includes(query) || summary.includes(query);
+        });
+
+        displayResults(results);
+    }
+
+    // Display Results
+    function displayResults(results) {
+        if (results.length === 0) {
+            searchResults.innerHTML = '<p class="search-tip">未找到相关文章</p>';
+            return;
+        }
+
+        let html = '';
+        results.forEach(item => {
+            html += `
+                <a href="${item.permalink}" class="search-result-item" style="text-decoration:none; display:block; color:inherit;">
+                    <span class="search-result-title" style="display:block;font-weight:600;margin-bottom:5px;">${item.title}</span>
+                    <span class="search-result-date" style="font-size:12px;color:#999;display:block;margin-bottom:5px;">${item.date}</span>
+                    <div class="search-result-summary">${item.summary}</div>
+                </a>
+            `;
+        });
+        searchResults.innerHTML = html;
+        if (window.pjax) window.pjax.refresh(searchResults);
+
+        // Add click listener to close modal on result click
+        const resultLinks = searchResults.querySelectorAll('.search-result-item');
+        resultLinks.forEach(link => {
+            link.addEventListener('click', function() {
+                closeModal();
+            });
+        });
+    }
+
+    // Event Listeners for Search
+    if (searchSubmit) {
+        searchSubmit.onclick = performSearch;
+    }
+    
+    if (searchInput) {
+        searchInput.onkeypress = function(e) {
+            if (e.key === 'Enter') {
+                performSearch();
+            }
+        };
+        
+        // Optional: Live search with debounce
+        let debounceTimer;
+        searchInput.oninput = function() {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(performSearch, 300);
+        };
+    }
+
+    /* Inline Search Logic */
+    const essayHeader = document.getElementById('essay-header');
+    const searchContainer = document.getElementById('search-container');
+    const inlineSearchInput = document.getElementById('inline-search-input');
+    const inlineSearchResults = document.getElementById('inline-search-results');
+
+    if (essayHeader && searchContainer && inlineSearchInput) {
+        window.toggleSearchMode = function(show) {
+            if (show) {
+                essayHeader.style.display = 'none';
+                searchContainer.style.display = 'block';
+                inlineSearchInput.focus();
+                if (!window.isIndexLoaded) {
+                    loadSearchIndex();
+                }
+            } else {
+                essayHeader.style.display = 'block';
+                searchContainer.style.display = 'none';
+                inlineSearchInput.value = '';
+                inlineSearchResults.style.display = 'none';
+            }
+        };
+
+        // Close when clicking outside - delegated to document body to handle pjax updates
+        document.body.onclick = function(e) {
+             const isClickInside = essayHeader.contains(e.target) || 
+                                   searchContainer.contains(e.target) || 
+                                   inlineSearchResults.contains(e.target);
+             
+             if (!isClickInside && searchContainer.style.display === 'block') {
+                 window.toggleSearchMode(false);
+             }
+             // Also handle modal outside click here if needed, but window.onclick handles that
+             if (e.target === searchModal) {
+                closeModal();
+            }
+        };
+
+        // Inline Search Function
+        function performInlineSearch() {
+            const query = inlineSearchInput.value.trim().toLowerCase();
+            if (query === '') {
+                inlineSearchResults.style.display = 'none';
+                return;
+            }
+
+            if (!window.isIndexLoaded) {
+                 // Wait if loading
+                 setTimeout(performInlineSearch, 500);
+                 return;
+            }
+
+            const results = window.searchIndex.filter(item => {
+                const title = item.title ? item.title.toLowerCase() : '';
+                const summary = item.summary ? item.summary.toLowerCase() : '';
+                return title.includes(query) || summary.includes(query);
+            });
+
+            displayInlineResults(results);
+        }
+
+        function displayInlineResults(results) {
+            if (results.length === 0) {
+                inlineSearchResults.innerHTML = '<div class="search-result-item" style="text-align:center;color:#999;">未找到相关文章</div>';
+                inlineSearchResults.style.display = 'block';
+                return;
+            }
+
+            let html = '';
+            results.slice(0, 5).forEach(item => { // Limit to 5 inline results
+                html += `
+                    <a href="${item.permalink}" class="search-result-item">
+                        <span class="search-result-title">${item.title}</span>
+                        <div class="search-result-summary">${item.summary}</div>
+                    </a>
+                `;
+            });
+            inlineSearchResults.innerHTML = html;
+            inlineSearchResults.style.display = 'block';
+            if (window.pjax) window.pjax.refresh(inlineSearchResults);
+        }
+
+        let inlineDebounce;
+        inlineSearchInput.oninput = function() {
+            clearTimeout(inlineDebounce);
+            inlineDebounce = setTimeout(performInlineSearch, 300);
+        };
+        
+        // Handle Escape key
+        inlineSearchInput.onkeydown = function(e) {
+            if (e.key === 'Escape') {
+                window.toggleSearchMode(false);
+            }
+        };
+    }
+}
+
+document.addEventListener('DOMContentLoaded', initSearchFunctionality);
+// Re-init on Pjax complete
+document.addEventListener('pjax:complete', initSearchFunctionality);

themes/Ying/layouts/_default/home.html

@@ -2,7 +2,22 @@
 <div id="pjax-container">
     <article>
         <div class="recent-posts section">
-            <h2 class="section-header" uk-scrollspy="cls: uk-animation-slide-left-small; delay: 200">随笔<i class="ri-quill-pen-line"></i></h2>
+            <!-- Searchable Header Container -->
+            <div class="searchable-header-container">
+                <h2 class="section-header normal-mode" id="essay-header" onclick="toggleSearchMode(true)" uk-scrollspy="cls: uk-animation-slide-left-small; delay: 200">
+                    随笔<i class="ri-quill-pen-line"></i>
+                    <span class="search-hint">点击随笔，开始搜索</span>
+                </h2>
+                <div class="search-mode" id="search-container" style="display: none;">
+                    <div class="search-input-group">
+                        <i class="ri-search-line search-icon"></i>
+                        <input type="text" id="inline-search-input" placeholder="搜索文章..." autocomplete="off">
+                        <i class="ri-close-line close-icon" onclick="toggleSearchMode(false)"></i>
+                    </div>
+                </div>
+                <div id="inline-search-results" class="search-dropdown"></div>
+            </div>
+            
             <div class="posts" uk-scrollspy="target: > .post; cls: uk-animation-slide-bottom-small; delay: 150">
                 <!-- 使用 sort 对文章按 Weight 排序 -->
                 {{ $posts := sort (where (where .Site.RegularPages "Type" "post") "Params.status" "ne" "hidden")

themes/Ying/layouts/index.json

@@ -0,0 +1,11 @@
+[
+    {{- range $index, $e := where .Site.RegularPages "Type" "post" -}}
+    {{- if $index -}}, {{- end -}}
+    {
+        "title": {{ .Title | jsonify }},
+        "date": {{ .Date.Format "2006-01-02" | jsonify }},
+        "permalink": {{ .Permalink | jsonify }},
+        "summary": {{ .Summary | plainify | jsonify }}
+    }
+    {{- end -}}
+]

themes/Ying/layouts/partials/footer.html

@@ -14,6 +14,9 @@
 </div>
 </div>
 <div class="floating-tools">
+  <a href="javascript:;" id="search-btn" title="搜索文章">
+    <i class="ri-search-line"></i>
+  </a>
   <a href="javascript:;" id="theme-toggle" title="切换主题">
     <i class="ri-palette-line"></i>
   </a>
@@ -24,6 +27,26 @@
     <i class="ri-arrow-up-line"></i>
   </a>
 </div>
+
+<!-- Search Modal -->
+<div id="search-modal" class="search-modal">
+  <div class="search-modal-content">
+    <div class="search-header">
+      <h3>搜索文章</h3>
+      <span class="close-search">&times;</span>
+    </div>
+    <div class="search-body">
+      <div class="search-input-wrapper">
+        <input type="text" id="search-input" placeholder="输入关键词搜索..." autocomplete="off">
+        <button id="search-submit"><i class="ri-search-line"></i></button>
+      </div>
+      <div id="search-results" class="search-results">
+        <!-- Search results will appear here -->
+        <p class="search-tip">输入关键词并回车进行搜索</p>
+      </div>
+    </div>
+  </div>
+</div>
 {{ $iconfont := resources.Get "js/iconfont.js" }}
 {{ $lightgallery := resources.Get "js/lightgallery.umd.min.js" }}
 {{ $uikit := resources.Get "js/uikit.min.js" }}