kevinandClaude Fable 5
d9bb91af00
Features: - Custom navigation links management in admin settings - Multi-language support for navigation links (Chinese/English) - Control link behavior (open in new window) - Sort order and enable/disable toggle for nav links - User registration system with validation - Admin can enable/disable user registration - Registration form with username, display name, email, password - Link to registration from login page Navigation Links: - Admin interface to add/edit/delete custom nav links - Support for both internal and external URLs - Display links in header navigation bar - Respects language preference User Registration: - Username validation (3-32 characters, alphanumeric + underscore/dash) - Password validation (minimum 6 characters) - Password confirmation matching - Optional display name and email fields - Can be toggled on/off by admin in site settings Templates: - Added navigation links settings page - Added user registration page - Updated login page with registration link - Updated base layout to render custom nav links Documentation: - NAV_LINKS_FEATURE.md - Navigation links feature documentation - REGISTRATION_FEATURE.md - User registration documentation - IMPLEMENTATION_SUMMARY.md - Overall implementation summary Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
214 lines
12 KiB
HTML
214 lines
12 KiB
HTML
{{define "header"}}
|
|
<!DOCTYPE html>
|
|
<html lang="{{.Lang}}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.Title}} - {{index .Tr "site_title"}}</title>
|
|
{{if .SiteFavicon}}
|
|
{{if .SiteFaviconIsURL}}
|
|
<link rel="icon" href="{{.SiteFavicon}}">
|
|
{{else}}
|
|
<link rel="icon" href="/uploads/logos/{{.SiteFavicon}}">
|
|
{{end}}
|
|
{{end}}
|
|
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen flex flex-col">
|
|
<!-- Navigation -->
|
|
<nav class="bg-white shadow-sm border-b border-gray-200">
|
|
<div class="max-w-5xl mx-auto px-4 py-2.5 flex items-center justify-between">
|
|
<a href="/" class="text-xl font-bold text-gray-800 hover:text-blue-600 transition-colors flex items-center gap-2">
|
|
{{if .SiteLogo}}
|
|
{{if .SiteLogoIsURL}}
|
|
<img src="{{.SiteLogo}}" alt="logo" class="h-7 w-auto">
|
|
{{else}}
|
|
<img src="/uploads/logos/{{.SiteLogo}}" alt="logo" class="h-7 w-auto">
|
|
{{end}}
|
|
{{end}}
|
|
{{if .SiteLogoText}}{{.SiteLogoText}}{{else}}{{index .Tr "site_title"}}{{end}}
|
|
</a>
|
|
<div class="flex items-center gap-4">
|
|
<a href="/" class="text-gray-600 hover:text-blue-600 transition-colors text-sm flex items-center gap-1.5">
|
|
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
|
</svg>
|
|
<span>{{index .Tr "home"}}</span>
|
|
</a>
|
|
{{range .NavLinks}}
|
|
<a href="{{.URL}}" {{if .OpenNew}}target="_blank" rel="noopener noreferrer"{{end}} class="text-gray-600 hover:text-blue-600 transition-colors text-sm flex items-center gap-1.5">
|
|
<span>{{.Title $.Lang}}</span>
|
|
{{if .OpenNew}}
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
{{end}}
|
|
</a>
|
|
{{end}}
|
|
{{if .IsLoggedIn}}
|
|
<!-- Avatar Dropdown (click to toggle) -->
|
|
<div class="relative" id="avatarDropdown">
|
|
<button type="button" id="avatarBtn" class="flex items-center gap-2 hover:opacity-80 transition-opacity cursor-pointer" onclick="toggleDropdown()">
|
|
<div class="w-8 h-8 rounded-full overflow-hidden border-2 border-gray-300 hover:border-blue-500 transition-colors flex items-center justify-center bg-gray-200 text-gray-600 font-bold text-sm">
|
|
{{if .Avatar}}
|
|
<img src="/uploads/avatars/{{.Avatar}}" alt="avatar" class="w-full h-full object-cover">
|
|
{{else}}
|
|
<svg class="w-4 h-4 text-gray-500 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v1.2c0 .66.54 1.2 1.2 1.2h16.8c.66 0 1.2-.54 1.2-1.2v-1.2c0-3.2-6.4-4.8-9.6-4.8z"/>
|
|
</svg>
|
|
{{end}}
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{if .DisplayName}}{{.DisplayName}}{{else}}{{.Username}}{{end}}</span>
|
|
</button>
|
|
<div id="dropdownMenu" class="absolute right-0 mt-2 w-44 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50 hidden">
|
|
<a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
|
|
{{index .Tr "profile"}}
|
|
</a>
|
|
<a href="/my/articles" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
|
|
{{index .Tr "my_articles"}}
|
|
</a>
|
|
{{if eq .Role "admin"}}
|
|
<div class="border-t border-gray-100 my-1"></div>
|
|
<a href="/admin" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
|
|
{{index .Tr "admin_panel"}}
|
|
</a>
|
|
{{end}}
|
|
<div class="border-t border-gray-100 my-1"></div>
|
|
<form action="/logout" method="post" class="m-0">
|
|
<button type="submit" class="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors cursor-pointer bg-transparent border-none">
|
|
{{index .Tr "logout"}}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<a href="/login" class="text-gray-600 hover:text-blue-600 transition-colors text-sm flex items-center gap-1.5">
|
|
<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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
|
|
</svg>
|
|
<span>{{index .Tr "login"}}</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1">
|
|
{{if .SiteHeaderText}}
|
|
<!-- Header banner -->
|
|
<div class="bg-blue-50 border-b border-blue-100 text-blue-800 text-sm text-center py-2 px-4">
|
|
{{.SiteHeaderText}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "footer"}}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white border-t border-gray-200 py-4 mt-auto">
|
|
<div class="max-w-5xl mx-auto px-4">
|
|
<!-- Footer Actions Row -->
|
|
<div class="flex justify-center items-center gap-3 mb-2">
|
|
<!-- RSS Subscribe Button -->
|
|
<div class="relative inline-block">
|
|
<button onclick="toggleRSSMenu()" class="flex items-center gap-2 px-3 py-1.5 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition-colors text-sm font-medium">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20 5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"/>
|
|
</svg>
|
|
<span>{{if eq .Lang "zh"}}RSS 订阅{{else}}RSS Feed{{end}}</span>
|
|
</button>
|
|
<!-- RSS Dropdown Menu -->
|
|
<div id="rssMenu" class="hidden absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
|
|
<a href="/rss" target="_blank" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
|
|
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
<span>{{if eq .Lang "zh"}}打开 RSS 链接{{else}}Open RSS Link{{end}}</span>
|
|
</a>
|
|
<button onclick="copyRSSLink()" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors text-left">
|
|
<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 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
<span id="copyText">{{if eq .Lang "zh"}}复制订阅链接{{else}}Copy Feed URL{{end}}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Language Switcher -->
|
|
<a href="?lang={{.SwitchLang}}" class="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-blue-600 hover:bg-gray-50 transition-colors border border-gray-300 rounded-lg">
|
|
<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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
|
|
</svg>
|
|
<span>{{index .Tr "lang_switch"}}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Footer Text -->
|
|
<div class="text-center text-gray-500 text-xs">
|
|
{{if .SiteFooterText}}{{.SiteFooterText}}{{else}}{{index .Tr "footer_text"}}{{end}}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
function toggleDropdown() {
|
|
var menu = document.getElementById('dropdownMenu');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
var dropdown = document.getElementById('avatarDropdown');
|
|
var menu = document.getElementById('dropdownMenu');
|
|
if (dropdown && !dropdown.contains(e.target)) {
|
|
menu.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// RSS Menu Functions
|
|
function toggleRSSMenu() {
|
|
var menu = document.getElementById('rssMenu');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
|
|
function copyRSSLink() {
|
|
var rssURL = window.location.origin + '/rss';
|
|
var copyText = document.getElementById('copyText');
|
|
var originalText = copyText.textContent;
|
|
var lang = '{{.Lang}}';
|
|
|
|
// Copy to clipboard
|
|
navigator.clipboard.writeText(rssURL).then(function() {
|
|
// Show success feedback
|
|
copyText.textContent = lang === 'zh' ? '✓ 已复制！' : '✓ Copied!';
|
|
copyText.parentElement.classList.add('text-green-600');
|
|
|
|
// Reset after 2 seconds
|
|
setTimeout(function() {
|
|
copyText.textContent = originalText;
|
|
copyText.parentElement.classList.remove('text-green-600');
|
|
}, 2000);
|
|
}).catch(function(err) {
|
|
console.error('Failed to copy:', err);
|
|
copyText.textContent = lang === 'zh' ? '✗ 复制失败' : '✗ Copy failed';
|
|
});
|
|
}
|
|
|
|
// Close RSS menu when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
var rssButton = document.querySelector('[onclick="toggleRSSMenu()"]');
|
|
var rssMenu = document.getElementById('rssMenu');
|
|
if (rssButton && rssMenu && !rssButton.contains(e.target) && !rssMenu.contains(e.target)) {
|
|
rssMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|