当前位置：首页 > news >正文

从零打造个人博客静态页面与TodoList应用：前端开发实战指南

news 来源：原创 2025/5/9 7:44:48

前言

在当今数字时代，拥有个人博客和高效的任务管理工具已成为开发者展示自我和提升生产力的标配。本文将带你从零开始，通过纯前端技术实现一个兼具个人博客静态页面和TodoList任务管理功能的综合应用。无论你是前端新手还是希望巩固基础的中级开发者，这个项目都将为你提供宝贵的实战经验。

一、项目概述与设计

1.1 为什么选择这个组合项目？

博客页面和TodoList看似是两个独立的功能，但它们的组合能带来以下优势：

展示与实用结合：博客展示你的技术思考，TodoList管理你的创作任务
技术覆盖面广：涵盖HTML结构设计、CSS布局美化、JavaScript交互逻辑
可扩展性强：为后续添加后端功能（如用户认证、数据持久化）奠定基础

1.2 技术选型

我们选择纯前端实现方案，确保项目轻量且易于部署：

核心三件套：HTML5 + CSS3 + JavaScript (ES6+)
CSS框架：使用Tailwind CSS实现快速样式开发（可选）
图标库：Font Awesome或Remix Icon
部署方案：GitHub Pages/Vercel/Netlify

二、博客静态页面开发

2.1 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="styles.css">
</head>
<body><header class="blog-header"><nav><div class="logo">我的技术博客</div><ul class="nav-links"><li><a href="#home">首页</a></li><li><a href="#articles">文章</a></li><li><a href="#projects">项目</a></li><li><a href="#about">关于我</a></li><li><a href="#todo">TodoList</a></li></ul></nav></header><main class="blog-container"><section id="home" class="hero-section"><h1>欢迎来到我的技术博客</h1><p>分享前端开发、算法设计与技术思考</p></section><section id="articles" class="articles-section"><h2>最新文章</h2><div class="article-card"><h3>React Hooks深度解析</h3><p class="meta">发布于2023年5月15日 · 8分钟阅读</p><p>本文将深入探讨React Hooks的工作原理和最佳实践...</p><a href="#" class="read-more">阅读全文</a></div><!-- 更多文章卡片 --></section><section id="projects" class="projects-section"><!-- 项目展示区 --></section></main><footer class="blog-footer"><p>© 2023 我的技术博客. 保留所有权利.</p></footer><script src="script.js"></script>
</body>
</html>

2.2 CSS样式美化

/* 基础样式 */
:root {--primary-color: #3498db;--secondary-color: #2ecc71;--dark-color: #2c3e50;--light-color: #ecf0f1;--danger-color: #e74c3c;
}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;margin: 0;padding: 0;
}.blog-header {background-color: var(--dark-color);color: white;padding: 1rem 2rem;position: sticky;top: 0;z-index: 100;
}nav {display: flex;justify-content: space-between;align-items: center;
}.logo {font-size: 1.5rem;font-weight: bold;
}.nav-links {display: flex;list-style: none;gap: 2rem;
}.nav-links a {color: white;text-decoration: none;transition: color 0.3s;
}.nav-links a:hover {color: var(--primary-color);
}/* 响应式设计 */
@media (max-width: 768px) {nav {flex-direction: column;}.nav-links {margin-top: 1rem;gap: 1rem;}
}/* 文章卡片样式 */
.article-card {background: white;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);padding: 1.5rem;margin-bottom: 1.5rem;transition: transform 0.3s, box-shadow 0.3s;
}.article-card:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}.meta {color: #7f8c8d;font-size: 0.9rem;
}.read-more {display: inline-block;color: var(--primary-color);text-decoration: none;font-weight: bold;margin-top: 0.5rem;
}.read-more:hover {text-decoration: underline;
}

三、TodoList应用实现

3.1 HTML结构

在博客页面中添加TodoList部分：

<section id="todo" class="todo-section"><h2>任务管理</h2><div class="todo-container"><div class="todo-input"><input type="text" id="todoInput" placeholder="添加新任务..."><button id="addTodoBtn">添加</button></div><div class="todo-filters"><button class="filter-btn active" data-filter="all">全部</button><button class="filter-btn" data-filter="active">待完成</button><button class="filter-btn" data-filter="completed">已完成</button></div><ul id="todoList" class="todo-list"><!-- 任务将通过JavaScript动态添加 --></ul><div class="todo-stats"><span id="remainingCount">0</span> 个任务待完成<button id="clearCompleted" class="clear-btn">清除已完成</button></div></div>
</section>

3.2 JavaScript功能实现

document.addEventListener('DOMContentLoaded', function() {// DOM元素const todoInput = document.getElementById('todoInput');const addTodoBtn = document.getElementById('addTodoBtn');const todoList = document.getElementById('todoList');const filterBtns = document.querySelectorAll('.filter-btn');const remainingCount = document.getElementById('remainingCount');const clearCompletedBtn = document.getElementById('clearCompleted');// 状态管理let todos = JSON.parse(localStorage.getItem('todos')) || [];let currentFilter = 'all';// 初始化renderTodoList();updateRemainingCount();// 事件监听addTodoBtn.addEventListener('click', addTodo);todoInput.addEventListener('keypress', function(e) {if (e.key === 'Enter') addTodo();});clearCompletedBtn.addEventListener('click', clearCompleted);filterBtns.forEach(btn => {btn.addEventListener('click', function() {filterBtns.forEach(b => b.classList.remove('active'));this.classList.add('active');currentFilter = this.dataset.filter;renderTodoList();});});// 功能函数function addTodo() {const text = todoInput.value.trim();if (text) {const newTodo = {id: Date.now(),text,completed: false,createdAt: new Date().toISOString()};todos.unshift(newTodo);saveTodos();renderTodoList();updateRemainingCount();todoInput.value = '';}}function renderTodoList() {todoList.innerHTML = '';const filteredTodos = todos.filter(todo => {if (currentFilter === 'all') return true;if (currentFilter === 'active') return !todo.completed;if (currentFilter === 'completed') return todo.completed;return true;});if (filteredTodos.length === 0) {todoList.innerHTML = '<li class="empty-message">暂无任务</li>';return;}filteredTodos.forEach(todo => {const li = document.createElement('li');li.className = `todo-item ${todo.completed ? 'completed' : ''}`;li.dataset.id = todo.id;li.innerHTML = `<input type="checkbox" ${todo.completed ? 'checked' : ''}><span class="todo-text">${todo.text}</span><button class="delete-btn">×</button><small class="todo-date">${formatDate(todo.createdAt)}</small>`;const checkbox = li.querySelector('input[type="checkbox"]');const deleteBtn = li.querySelector('.delete-btn');checkbox.addEventListener('change', function() {toggleTodoComplete(todo.id);});deleteBtn.addEventListener('click', function() {deleteTodo(todo.id);});todoList.appendChild(li);});}function toggleTodoComplete(id) {todos = todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed} : todo);saveTodos();renderTodoList();updateRemainingCount();}function deleteTodo(id) {todos = todos.filter(todo => todo.id !== id);saveTodos();renderTodoList();updateRemainingCount();}function clearCompleted() {todos = todos.filter(todo => !todo.completed);saveTodos();renderTodoList();}function updateRemainingCount() {const count = todos.filter(todo => !todo.completed).length;remainingCount.textContent = count;}function saveTodos() {localStorage.setItem('todos', JSON.stringify(todos));}function formatDate(dateString) {const options = { year: 'numeric', month: 'short', day: 'numeric' };return new Date(dateString).toLocaleDateString('zh-CN', options);}
});

3.3 TodoList样式补充

/* TodoList 样式 */
.todo-section {background-color: #f8f9fa;padding: 2rem;border-radius: 8px;margin-top: 2rem;
}.todo-container {max-width: 600px;margin: 0 auto;background: white;padding: 1.5rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}.todo-input {display: flex;margin-bottom: 1rem;gap: 0.5rem;
}.todo-input input {flex: 1;padding: 0.75rem;border: 1px solid #ddd;border-radius: 4px;font-size: 1rem;
}.todo-input button {padding: 0.75rem 1.5rem;background-color: var(--primary-color);color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;
}.todo-input button:hover {background-color: #2980b9;
}.todo-filters {display: flex;gap: 0.5rem;margin-bottom: 1rem;
}.filter-btn {padding: 0.5rem 1rem;background: none;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: all 0.3s;
}.filter-btn.active {background-color: var(--primary-color);color: white;border-color: var(--primary-color);
}.todo-list {list-style: none;padding: 0;margin: 0;
}.todo-item {display: flex;align-items: center;padding: 0.75rem;border-bottom: 1px solid #eee;gap: 0.75rem;
}.todo-item.completed .todo-text {text-decoration: line-through;color: #95a5a6;
}.todo-item input[type="checkbox"] {cursor: pointer;
}.todo-text {flex: 1;
}.delete-btn {background: none;border: none;color: var(--danger-color);font-size: 1.25rem;cursor: pointer;opacity: 0.7;transition: opacity 0.3s;
}.delete-btn:hover {opacity: 1;
}.todo-date {color: #95a5a6;font-size: 0.8rem;
}.empty-message {text-align: center;color: #95a5a6;padding: 1rem;
}.todo-stats {display: flex;justify-content: space-between;align-items: center;margin-top: 1rem;color: #7f8c8d;font-size: 0.9rem;
}.clear-btn {background: none;border: none;color: var(--danger-color);cursor: pointer;font-size: 0.9rem;
}.clear-btn:hover {text-decoration: underline;
}

四、项目优化与高级功能

4.1 性能优化建议

图片懒加载：对博客中的图片实现懒加载

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy-load">

// 实现懒加载
const lazyImages = document.querySelectorAll('.lazy-load');const imageObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;img.classList.remove('lazy-load');observer.unobserve(img);}});
});lazyImages.forEach(img => imageObserver.observe(img));

2. 防抖处理：对搜索功能或频繁触发的事件添加防抖

function debounce(func, delay) {let timeoutId;return function(...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(this, args);}, delay);};
}// 使用示例
searchInput.addEventListener('input', debounce(function() {// 搜索逻辑
}, 300));

4.2 可添加的高级功能

Markdown支持：让博客支持Markdown格式

// 使用marked.js库
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>// 转换Markdown为HTML
document.getElementById('markdown-content').innerHTML = marked.parse(markdownText);

2. 主题切换：实现暗黑/明亮模式切换

/* 在:root中添加CSS变量 */
:root {--bg-color: #ffffff;--text-color: #333333;/* 其他变量 */
}/* 暗黑模式 */
[data-theme="dark"] {--bg-color: #1a1a1a;--text-color: #f0f0f0;/* 其他变量 */
}

// 切换主题
function toggleTheme() {const currentTheme = document.documentElement.getAttribute('data-theme');const newTheme = currentTheme === 'dark' ? 'light' : 'dark';document.documentElement.setAttribute('data-theme', newTheme);localStorage.setItem('theme', newTheme);
}// 初始化主题
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

3. PWA支持：让应用可离线使用