added 搜索功能

This commit is contained in:
Vaica committed 2026-01-28 23:20:39 +08:00
1 parent 53afae972b
commit 4baf51f4b1
7 files changed
+803 -2

No files matched your search

+16 -1
View File
@@ -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")
+11
View File
@@ -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 -}}
]
+23
View File
@@ -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" }}