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 结构并替换相应数据：

<li>
  <div>
    <figure>
      <img src="./assets/images/your-image.jpg" loading="lazy" alt="文章标题" />
    </figure>
    <div>
      <a href="#">分类标签</a>
      <h3><a href="#">你的文章标题</a></h3>
      <p>文章摘要...</p>
    </div>
  </div>
</li>

技术栈与兼容性

项目基于 HTML5 构建结构，CSS3 处理样式与动画（Grid & Flexbox），JavaScript (ES6+) 负责交互逻辑。图标库采用 IonIcons，字体选用 Google Fonts。

响应式断点覆盖从 375px 到 1200px 以上的各类设备。浏览器支持方面，建议最新版 Chrome、Firefox、Safari、Edge 及 Opera。本项目采用 MIT 许可证，可自由使用、修改和分发。