AaronXu
127 lines
4.2 KiB
HTML
127 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>笔记小站 - 发现精彩内容</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
<a class="navbar-brand" href="index.html">
|
|
<span class="logo-icon">📝</span>
|
|
笔记小站
|
|
</a>
|
|
<div class="navbar-actions" id="navbarActions"></div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
|
|
<!-- Hero -->
|
|
<div class="hero">
|
|
<h1>📝 发现精彩内容</h1>
|
|
<p>分享技术、记录生活、沉淀思考——这里有你想看的一切</p>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
|
|
<!-- Sidebar: Categories -->
|
|
<aside class="sidebar">
|
|
<div class="category-panel">
|
|
<div class="category-panel-header">📂 笔记分类</div>
|
|
<ul class="category-list" id="categoryList"></ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Content: Notes Grid -->
|
|
<main class="content-area">
|
|
<div class="content-header">
|
|
<h2 id="sectionTitle">📋 全部笔记</h2>
|
|
<div class="search-box">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" id="searchInput" placeholder="搜索笔记..." value="">
|
|
</div>
|
|
</div>
|
|
<div class="notes-grid" id="notesGrid"></div>
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<script src="js/data.js"></script>
|
|
<script src="js/common.js"></script>
|
|
<script>
|
|
(function () {
|
|
|
|
var catId = getUrlParam('cat') ? parseInt(getUrlParam('cat')) : null;
|
|
|
|
function renderCategoryList() {
|
|
var counts = {};
|
|
DATA.notes.forEach(function (n) { counts[n.categoryId] = (counts[n.categoryId] || 0) + 1; });
|
|
|
|
function buildLink(id, icon, name, count) {
|
|
var active = catId === id ? ' active' : '';
|
|
return '<li class="category-item"><a class="' + active + '" href="index.html' + (id ? '?cat=' + id : '') + '">' +
|
|
'<span>' + icon + ' ' + name + '</span><span class="count">' + count + '</span></a></li>';
|
|
}
|
|
|
|
var html = buildLink(null, '📋', '全部笔记', DATA.notes.length);
|
|
DATA.categories.forEach(function (c) {
|
|
html += buildLink(c.id, c.icon, c.name, counts[c.id] || 0);
|
|
});
|
|
document.getElementById('categoryList').innerHTML = html;
|
|
}
|
|
|
|
function renderNotes() {
|
|
var cat = catId ? DATA.categories.find(function (c) { return c.id === catId; }) : null;
|
|
var q = (document.getElementById('searchInput').value || '').toLowerCase();
|
|
|
|
var notes = DATA.notes.filter(function (n) {
|
|
if (catId && n.categoryId !== catId) return false;
|
|
if (q && n.title.toLowerCase().indexOf(q) === -1 && n.excerpt.toLowerCase().indexOf(q) === -1 && n.content.toLowerCase().indexOf(q) === -1) return false;
|
|
return true;
|
|
});
|
|
|
|
document.getElementById('sectionTitle').textContent = cat ? cat.icon + ' ' + cat.name : '📋 全部笔记';
|
|
|
|
if (notes.length === 0) {
|
|
document.getElementById('notesGrid').innerHTML = emptyState('📭', '暂无笔记内容');
|
|
return;
|
|
}
|
|
|
|
var delays = ['anim-fade-up-d1', 'anim-fade-up-d2', 'anim-fade-up-d3', 'anim-fade-up-d4', 'anim-fade-up-d5', 'anim-fade-up-d6'];
|
|
document.getElementById('notesGrid').innerHTML = notes.map(function (n, i) {
|
|
var c = DATA.categories.find(function (x) { return x.id === n.categoryId; });
|
|
var cc = DATA.comments.filter(function (x) { return x.noteId === n.id; }).length;
|
|
return '<a href="note.html?id=' + n.id + '" class="note-card anim-fade-up ' + delays[i % 6] + '">' +
|
|
categoryBadge(c) +
|
|
'<h3 class="note-title">' + n.title + '</h3>' +
|
|
'<p class="note-excerpt">' + n.excerpt + '</p>' +
|
|
'<div class="note-meta"><span>👤 ' + n.authorName + '</span><span>👁️ ' + n.views + '</span><span>💬 ' + cc + '</span><span>❤️ ' + n.likes + '</span></div>' +
|
|
'</a>';
|
|
}).join('');
|
|
}
|
|
|
|
renderCategoryList();
|
|
renderNotes();
|
|
|
|
var searchInput = document.getElementById('searchInput');
|
|
if (searchInput) {
|
|
var timer;
|
|
searchInput.addEventListener('input', function () {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(renderNotes, 200);
|
|
});
|
|
searchInput.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') { this.value = ''; renderNotes(); }
|
|
});
|
|
}
|
|
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|