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>
393 lines
16 KiB
HTML
393 lines
16 KiB
HTML
{{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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
|
|
</svg>
|
|
<span>{{if .SiteHomeWelcome}}{{.SiteHomeWelcome}}{{else}}{{index .Tr "home_welcome"}}{{end}}</span>
|
|
</h1>
|
|
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto flex items-center justify-center gap-2">
|
|
<svg class="w-6 h-6 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
<span>{{if .SiteHomeSubtitle}}{{.SiteHomeSubtitle}}{{else}}{{index .Tr "home_subtitle"}}{{end}}</span>
|
|
</p>
|
|
</section>
|
|
|
|
<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}}
|
|
|
|
<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">
|
|
<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" data-article-id="{{.ID}}">
|
|
<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">{{index .Tr "home_no_posts"}}</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
<!-- Loading indicator -->
|
|
<div id="loadingIndicator" class="hidden text-center py-8">
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
<p class="text-gray-500 mt-2">{{if eq .Lang "zh"}}加载中...{{else}}Loading...{{end}}</p>
|
|
</div>
|
|
|
|
<!-- No more articles message -->
|
|
<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>
|
|
/* 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() {
|
|
let currentPage = 1;
|
|
let isLoading = false;
|
|
let hasMore = true;
|
|
|
|
const container = document.getElementById('articlesContainer');
|
|
const loadingIndicator = document.getElementById('loadingIndicator');
|
|
const noMoreArticles = document.getElementById('noMoreArticles');
|
|
|
|
// 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);
|
|
|
|
// Load more articles
|
|
function loadMoreArticles() {
|
|
if (isLoading || !hasMore) return;
|
|
|
|
isLoading = true;
|
|
loadingIndicator.classList.remove('hidden');
|
|
|
|
fetch('/api/articles?page=' + (currentPage + 1))
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.articles && data.articles.length > 0) {
|
|
currentPage++;
|
|
data.articles.forEach(article => {
|
|
const articleHTML = createArticleCard(article);
|
|
container.insertAdjacentHTML('beforeend', articleHTML);
|
|
});
|
|
|
|
// Determine layout for new cards
|
|
const newCards = container.querySelectorAll('.article-card:not(.layout-horizontal):not(.layout-vertical)');
|
|
newCards.forEach(determineLayout);
|
|
}
|
|
|
|
hasMore = data.hasMore;
|
|
|
|
if (!hasMore) {
|
|
noMoreArticles.classList.remove('hidden');
|
|
}
|
|
|
|
isLoading = false;
|
|
loadingIndicator.classList.add('hidden');
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading articles:', error);
|
|
isLoading = false;
|
|
loadingIndicator.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
// Create article card HTML
|
|
function createArticleCard(article) {
|
|
const topBadge = article.is_top ?
|
|
'<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>' : '';
|
|
|
|
const coverHTML = article.cover ?
|
|
`<div class="article-cover">
|
|
<img src="${article.cover}" alt="${escapeHtml(article.title)}" class="article-image" loading="lazy">
|
|
</div>` : '';
|
|
|
|
const summaryHTML = article.summary ?
|
|
`<p class="text-gray-500 text-sm line-clamp-3 mb-3">${escapeHtml(article.summary)}</p>` : '';
|
|
|
|
const commentCount = article.comment_count || 0;
|
|
const viewCount = article.view_count || 0;
|
|
|
|
return `
|
|
<article class="article-card bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow" data-cover="${article.cover || ''}">
|
|
<a href="/article/${article.slug}" class="block article-link">
|
|
<div class="article-content">
|
|
${coverHTML}
|
|
<div class="article-text p-6">
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">
|
|
${escapeHtml(article.title)}
|
|
${topBadge}
|
|
</h3>
|
|
${summaryHTML}
|
|
<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>
|
|
${commentCount}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Infinite scroll
|
|
function checkScroll() {
|
|
const scrollPosition = window.innerHeight + window.scrollY;
|
|
const threshold = document.documentElement.scrollHeight - 500;
|
|
|
|
if (scrollPosition >= threshold && !isLoading && hasMore) {
|
|
loadMoreArticles();
|
|
}
|
|
}
|
|
|
|
// Throttle scroll event
|
|
let scrollTimeout;
|
|
window.addEventListener('scroll', function() {
|
|
if (scrollTimeout) {
|
|
clearTimeout(scrollTimeout);
|
|
}
|
|
scrollTimeout = setTimeout(checkScroll, 100);
|
|
});
|
|
|
|
// Initial check in case content is short
|
|
setTimeout(checkScroll, 500);
|
|
})();
|
|
</script>
|
|
|
|
{{template "footer" .}}
|
|
{{end}}
|