feat: implement tag management and search functionality
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>
This commit is contained in:
@@ -1,5 +1,21 @@
|
||||
{{define "home"}}
|
||||
{{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" 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-5xl mx-auto px-4 py-20 text-center">
|
||||
<h1 class="text-5xl font-extrabold text-gray-900 mb-4 flex items-center justify-center gap-3">
|
||||
<svg class="w-12 h-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -15,11 +31,24 @@
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="max-w-4xl mx-auto px-4 py-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">{{index .Tr "home_latest"}}</h2>
|
||||
<section class="max-w-7xl mx-auto px-4 py-8">
|
||||
<div class="flex gap-8">
|
||||
<!-- Main content (articles) -->
|
||||
<div class="flex-1">
|
||||
{{if .FilterTag}}
|
||||
<div class="mb-6 flex items-center gap-2 text-sm">
|
||||
<span class="text-gray-600">{{index .Tr "tag_filter"}}:</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full">
|
||||
{{if eq .Lang "zh"}}{{.FilterTag.NameZh}}{{else}}{{.FilterTag.NameEn}}{{end}}
|
||||
</span>
|
||||
<a href="/" class="text-blue-600 hover:text-blue-800">{{index .Tr "tag_all"}}</a>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- Articles Container -->
|
||||
<div id="articlesContainer" class="space-y-6">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">{{index .Tr "home_latest"}}</h2>
|
||||
|
||||
<!-- Articles Container -->
|
||||
<div id="articlesContainer" 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">
|
||||
@@ -39,6 +68,15 @@
|
||||
{{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">
|
||||
@@ -76,6 +114,28 @@
|
||||
<div id="noMoreArticles" class="hidden text-center text-gray-500 py-8">
|
||||
{{if eq .Lang "zh"}}没有更多文章了{{else}}No more articles{{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>
|
||||
|
||||
Reference in New Issue
Block a user