个人简介页面（Wren - Personal Blog Website Template）
「个人简介页面（Wren - Personal Blog Website Template）.rar」
/~808c3Lp9XK~:/
链接：https://pan.quark.cn/s/10fec8765fff
一个现代化、响应式的个人博客网站模板，采用纯 HTML、CSS 和 JavaScript 构建，无需依赖复杂的框架。✨ 特性🎨 现代化设计 - 简洁优雅的 UI 设计，注重视觉层次和用户体验📱 完全响应式 - 适配桌面、平板和移动设备⚡ 轻量级 - 纯原生 JavaScript，无框架依赖，加载速度快🎯 语义化 HTML - 结构清晰，易于维护和 SEO 优化🎭 平滑动画 - 精心设计的交互动画，提升用户体验📝 博客功能完整 - 包含文章列表、分类标签、评论、特色文章等模块🔍 搜索友好 - 优化的 HTML 结构，有利于搜索引擎收录🎨 可定制 - 清晰的代码结构，易于自定义和扩展📂 项目结构wren-blog/ │ ├── index.html # 主页面 ├── favicon.svg # 网站图标 ├── README.md # 项目说明文档 │ ├── assets/ │ ├── css/ │ │ └── style.css # 主样式文件 │ │ │ ├── js/ │ │ └── script.js # JavaScript 交互脚本 │ │ │ └── images/ # 图片资源目录 │ ├── logo.svg │ ├── hero-banner.png │ ├── author-1.png │ ├── featured-*.png │ ├── recent-post-*.jpg │ ├── popular-post-*.jpg │ ├── insta-post-*.png │ ├── tag*.png │ └── pattern-*.svg │ └── readme-images/ # README 文档使用的图片🚀 快速开始前置要求现代浏览器（Chrome、Firefox、Safari、Edge 等）本地服务器（可选，用于开发）安装与运行克隆或下载项目git clone <repository-url> cd wren-blog直接打开
双击index.html文件即可在浏览器中查看使用本地服务器（推荐）
使用 Python 启动简单服务器：# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000
或使用 VS Code 的 Live Server 插件，右键index.html选择 "Open with Live Server"访问网站
在浏览器中打开http://localhost:8000📖 功能模块1. 导航栏响应式导航菜单移动端汉堡菜单滚动时自动隐藏/显示用户信息展示2. 首屏展示（Hero Section）个性化欢迎语邮箱订阅功能动态背景效果3. 热门话题（Topics）可滑动的卡片轮播多种话题分类（运动、旅行、设计、电影、生活方式）文章数量统计4. 特色文章（Featured Posts）编辑精选文章展示标签分类系统阅读时间估算作者信息展示5. 流行标签（Popular Tags）搜索最多的关键词图标化标签设计快速分类导航6. 最新文章（Recent Posts）网格布局的文章列表分页功能文章摘要预览7. 侧边栏热门文章排行最新评论Instagram 图片展示8. 页脚网站简介分类导航邮件订阅社交媒体链接🎨 自定义修改颜色主题
编辑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 - 样式和动画CSS Grid & FlexboxCSS 变量响应式设计JavaScript (ES6+) - 交互功能移动端导航切换滚动动画轮播图功能IonIcons - 图标库📱 响应式断点/* 小型移动设备 */ @media (max-width: 375px) { ... } /* 大型移动设备 */ @media (min-width: 575px) { ... } /* 平板设备 */ @media (min-width: 768px) { ... } /* 小型笔记本 */ @media (min-width: 992px) { ... } /* 桌面设备 */ @media (min-width: 1200px) { ... }🌐 浏览器支持Chrome (最新版)Firefox (最新版)Safari (最新版)Edge (最新版)Opera (最新版)📄 许可证
本项目采用 MIT 许可证。可自由使用、修改和分发。👨💻 开发者设计者: xxx项目名称: Wren - Personal Blog Template发布年份: 2022🤝 贡献
欢迎提交 Issue 和 Pull Request！📞 联系方式
如有问题或建议，请通过以下方式联系：Email: [email protected]Website: your-website.com🙏 致谢图标库: IonIcons字体: Google Fonts (Noto Sans)图片占位符: Unsplash / Pexels
⭐ 如果这个项目对你有帮助，请给个 Star！
📢 分享这个项目，让更多人看到！
