「个人简介页面（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 class="recent-post-card">
<figure class="card-banner img-holder" style="–width: 271; –height: 258">
<img src="./assets/images/your-image.jpg" width="271" height="258" loading="lazy" alt="文章标题" class="img-cover" />
</figure>
<div class="card-content">
<a href="#" class="card-badge">分类标签</a>
<h3 class="headline headline-3 card-title">
<a href="#" class="link hover-2">你的文章标题</a>
</h3>
<p class="card-text">文章摘要…</p>
</div>
</div>
</li>
🔧 技术栈
-
HTML5 – 页面结构
-
CSS3 – 样式和动画
-
CSS Grid & Flexbox
-
CSS 变量
-
响应式设计
-
-
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: your-email@example.com
-
Website: your-website.com
🙏 致谢
-
图标库: IonIcons
-
字体: Google Fonts (Noto Sans)
-
图片占位符: Unsplash / Pexels
⭐ 如果这个项目对你有帮助，请给个 Star！
📢 分享这个项目，让更多人看到！
