Wren 个人博客模板：纯原生构建的响应式设计

Wren 个人博客模板：纯原生构建的响应式设计

这是一个现代化、响应式的个人博客网站模板，采用纯 HTML、CSS 和 JavaScript 构建，无需依赖复杂的框架。设计注重视觉层次和用户体验，加载速度快且易于维护。

核心特性

• 现代化设计：简洁优雅的 UI，强调视觉层次。
• 完全响应式：完美适配桌面、平板和移动设备。
• 轻量级：纯原生 JavaScript，无框架依赖。
• 语义化 HTML：结构清晰，利于 SEO 优化。
• 平滑动画：精心设计的交互动画提升体验。
• 功能完整：包含文章列表、分类标签、评论模块等。

项目结构

wren-blog/
├── index.html          # 主页面
├── favicon.svg         # 网站图标
├── assets/
│   ├── css/
│   │   └── style.css   # 主样式文件
│   ├── js/
│   │   └── script.js   # 交互脚本
│   └── images/         # 图片资源目录
└── readme-images/      # 文档图片

快速开始

确保使用现代浏览器（Chrome、Firefox、Safari、Edge）。推荐通过本地服务器运行以获得最佳效果。

启动方式

1. 直接打开：双击 index.html 文件即可在浏览器中查看基础效果。
2. 本地服务器：
   • Python 3: python -m http.server 8000
   • VS Code Live Server：右键 index.html 选择 "Open with Live Server"。

访问 http://localhost:8000 即可查看。

功能模块详解

导航栏支持移动端汉堡菜单，滚动时自动隐藏或显示。首屏展示个性化欢迎语及邮箱订阅功能，背景可动态调整。热门话题区域提供可滑动的卡片轮播，涵盖运动、旅行等多种分类。特色文章模块展示编辑精选内容，包含阅读时间估算和作者信息。侧边栏集成热门文章排行、最新评论及社交媒体链接，页脚则提供分类导航与邮件订阅入口。

自定义修改

颜色主题可通过编辑 assets/css/style.css 中的 CSS 变量轻松调整：

:root {
  --primary-color: #ff6b6b;
  --text-color: #333;
  --bg-color: #fff;
}

内容方面，直接编辑 index.html 中的文本和图片链接即可。添加新文章时，复制 recent-post-card 结构并替换相应数据：