kevinandClaude Fable 5
2bdc368399
Features: - Tag system with multi-language support (Chinese/English) - Auto-create tags when associating with articles - Tag filtering on homepage with visual indicators - Full-text search across title, summary, and content - Tag cloud sidebar showing article counts - Search page with results display Technical Implementation: - Database models: Tag, ArticleTag (many-to-many) - Tag count caching for performance - Automatic tag slug generation - Responsive design with mobile support - I18n support for all new UI elements Bug Fix: - Fixed SQL column ambiguity error in tag filtering - Added table prefix to ORDER BY clause in publishedArticleOrder Routes: - GET /search - Search results page - GET /?tag=<slug> - Filter articles by tag - GET /api/articles?tag=<slug> - API with tag filter support Templates: - Added tag input field to article create/edit form - Added search box to homepage header - Added tag cloud sidebar on homepage and search page - Created new search results page template Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
242 lines
9.4 KiB
HTML
242 lines
9.4 KiB
HTML
{{define "search"}}
|
|
{{template "header" .}}
|
|
|
|
<!-- Search Box -->
|
|
<section class="max-w-5xl mx-auto px-4 py-6">
|
|
<div class="flex justify-center">
|
|
<form action="/search" method="get" class="w-full max-w-2xl">
|
|
<div class="relative">
|
|
<input type="text" name="q" value="{{.SearchKeyword}}" placeholder="{{index .Tr "search_placeholder"}}"
|
|
class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors">
|
|
<svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="max-w-7xl mx-auto px-4 py-8">
|
|
<div class="flex gap-8">
|
|
<!-- Main content (search results) -->
|
|
<div class="flex-1">
|
|
{{if .SearchKeyword}}
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-2">{{index .Tr "search_results_for"}}</h2>
|
|
<p class="text-gray-600 mb-8">"{{.SearchKeyword}}" - {{if eq .Lang "zh"}}找到{{else}}Found{{end}} {{len .Articles}} {{if eq .Lang "zh"}}篇文章{{else}}articles{{end}}</p>
|
|
{{else}}
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-8">{{index .Tr "search_title"}}</h2>
|
|
{{end}}
|
|
|
|
<!-- Articles Container -->
|
|
<div class="space-y-6">
|
|
{{range .Articles}}
|
|
<article class="article-card bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow" data-cover="{{.Cover}}">
|
|
<a href="/article/{{.Slug}}" class="block article-link">
|
|
<div class="article-content">
|
|
<!-- Cover will be positioned by JS -->
|
|
{{if .Cover}}
|
|
<div class="article-cover">
|
|
<img src="{{.Cover}}" alt="{{.Title}}" class="article-image" loading="lazy">
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="article-text p-6">
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">
|
|
{{.Title}}
|
|
{{if .IsTop}}<span class="align-middle text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded ml-1">{{index $.Tr "article_is_top"}}</span>{{end}}
|
|
</h3>
|
|
{{if .Summary}}
|
|
<p class="text-gray-500 text-sm line-clamp-3 mb-3">{{.Summary}}</p>
|
|
{{end}}
|
|
{{if .Tags}}
|
|
<div class="flex items-center gap-2 flex-wrap mb-3">
|
|
{{range .Tags}}
|
|
<a href="/?tag={{.Slug}}" class="text-xs px-2 py-1 bg-gray-100 hover:bg-blue-100 text-gray-600 hover:text-blue-600 rounded transition-colors">
|
|
{{if eq $.Lang "zh"}}{{.NameZh}}{{else}}{{.NameEn}}{{end}}
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-blue-600 font-medium">{{index $.Tr "home_read_more"}} →</span>
|
|
<div class="flex items-center gap-4 text-sm text-gray-500">
|
|
<span class="flex items-center gap-1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
{{.ViewCount}}
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
|
</svg>
|
|
<span class="comment-count">{{index $.CommentCounts .ID}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
{{else}}
|
|
<div class="text-center text-gray-500 py-12">
|
|
{{if .SearchKeyword}}
|
|
{{index .Tr "search_no_results"}}
|
|
{{else}}
|
|
{{index .Tr "home_no_posts"}}
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar (tags) -->
|
|
<aside class="w-72 flex-shrink-0 hidden lg:block">
|
|
<div class="sticky top-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-4">{{index .Tr "tags_title"}}</h3>
|
|
{{if .Tags}}
|
|
<div class="flex flex-wrap gap-2">
|
|
{{range .Tags}}
|
|
<a href="/?tag={{.Slug}}"
|
|
class="px-3 py-1 text-sm bg-gray-100 hover:bg-blue-100 text-gray-700 hover:text-blue-700 rounded-full transition-colors inline-flex items-center gap-1">
|
|
<span>{{if eq $.Lang "zh"}}{{.NameZh}}{{else}}{{.NameEn}}{{end}}</span>
|
|
<span class="text-xs text-gray-500">({{.Count}})</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
{{else}}
|
|
<p class="text-sm text-gray-500">{{if eq .Lang "zh"}}暂无标签{{else}}No tags yet{{end}}</p>
|
|
{{end}}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* Article card layouts */
|
|
.article-card {
|
|
position: relative;
|
|
}
|
|
|
|
.article-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.article-content {
|
|
display: flex;
|
|
}
|
|
|
|
/* Default: no cover or loading */
|
|
.article-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Horizontal layout (landscape image on top) */
|
|
.article-card.layout-horizontal .article-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.article-card.layout-horizontal .article-cover {
|
|
width: 100%;
|
|
height: 400px;
|
|
overflow: hidden;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.article-card.layout-horizontal .article-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Vertical layout (portrait/square image on left) */
|
|
.article-card.layout-vertical .article-content {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.article-card.layout-vertical .article-cover {
|
|
width: 280px;
|
|
min-width: 280px;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.article-card.layout-vertical .article-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.article-card.layout-vertical .article-text {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.article-card.layout-vertical .article-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.article-card.layout-vertical .article-cover {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
}
|
|
|
|
/* Line clamp utility */
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
// Determine layout based on image aspect ratio
|
|
function determineLayout(card) {
|
|
const cover = card.getAttribute('data-cover');
|
|
if (!cover) {
|
|
return; // No cover, default column layout
|
|
}
|
|
|
|
const img = card.querySelector('.article-image');
|
|
if (!img) return;
|
|
|
|
// Wait for image to load
|
|
if (!img.complete) {
|
|
img.addEventListener('load', function() {
|
|
applyLayout(card, img);
|
|
});
|
|
} else {
|
|
applyLayout(card, img);
|
|
}
|
|
}
|
|
|
|
function applyLayout(card, img) {
|
|
const width = img.naturalWidth;
|
|
const height = img.naturalHeight;
|
|
const aspectRatio = width / height;
|
|
|
|
// If aspect ratio > 1.2, use horizontal (landscape)
|
|
// Otherwise use vertical (portrait/square on left)
|
|
if (aspectRatio > 1.2) {
|
|
card.classList.add('layout-horizontal');
|
|
} else {
|
|
card.classList.add('layout-vertical');
|
|
}
|
|
}
|
|
|
|
// Initialize existing articles
|
|
document.querySelectorAll('.article-card').forEach(determineLayout);
|
|
})();
|
|
</script>
|
|
|
|
{{template "footer" .}}
|
|
{{end}}
|