用 Cursor 十分钟编写网页，很强大，请大佬们提提意见

我的博客是用 WordPress 制作的，使用的二级域名，一直以来，一级域名下的主页都是在网上找的其他人的源码，今天心血来潮，用 cursor 写一个，没想到，这么简单！

blog.httpsguo.cn

HttpsGuo的个人主页

一个简洁美观的个人主页模板，包含响应式设计、动态时钟、新年祝福生成器、文章展示等功能。

预览

• 演示地址：[www.httpsguo.cn](https://www.httpsguo.cn)
• 博客地址：[blog.httpsguo.cn](https://blog.httpsguo.cn)
  

功能特点

• 响应式设计，适配各种设备
• 桌面端（>768px）：双列布局
• 平板端（768px-480px）：单列布局
• 移动端（<480px）：紧凑单列布局
• 精美的动态时钟显示
• 新年祝福生成器
• 最新文章和热门文章展示
• 社交媒体链接和二维码展示
• 友情链接展示
• SEO优化
• 性能优化
  

目录结构
├── index.html # 主页面
├── style.css # 样式文件
├── script.js # JavaScript脚本
└── README.md # 说明文档

快速开始

1. 克隆仓库

2. 修改个人信息

• 打开 `index.html`，修改以下部分：
• 标题和描述
• 头像地址
• 个人简介
• 联系方式
• 社交媒体链接
• 导航栏链接
• 备案信息
  

3. 修改文章列表

• 在 `script.js` 中修改 `popularArticles` 数组来更新热门文章
• 配置 WordPress API 地址来获取最新文章
  

可自定义部分

1. 基础信息

• 网站标题和描述（SEO相关）
• 头像和个人简介
• 联系方式
• 社交媒体链接和二维码
• 导航栏链接
• 备案信息
  

2. 样式定制

• 背景颜色（修改 `style.css` 中的 `background-color`）
• 主题颜色（修改 `style.css` 中的颜色变量）
• 卡片样式
• 时钟样式
• 字体和文字大小
  

3. 功能模块

• 时钟显示（可在 `clock-card` 中修改）
• 新年祝福生成器（可在 `script.js` 中修改祝福语）
• 文章展示（可修改文章数量和来源）
• 友情链接（可添加或移除）
  

4. 性能优化

• 图片懒加载
• DNS预解析
• 资源预加载
• 字体图标按需加载
  

注意事项

• 修改社交媒体链接时，需同时更新图标和对应的二维码
• 添加友情链接时，建议保持图标大小一致（16x16px）
• 修改文章API时，需要确保返回数据格式正确
• 自定义样式时，建议保持响应式设计的兼容性
• 移动端适配时注意测试不同尺寸设备的显示效果
  

技术栈

• HTML5
• CSS3
• JavaScript（原生）
• Font Awesome（图标）
  

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge
• Opera
  

开源协议
本项目基于 MIT 协议开源，使用时请保留作者信息。


特别感谢
感谢 [前端嘛](https://www.fecoder.cn/) 提供的代码支持。

作者信息

• 作者：httpsguo
• 网站：https://www.httpsguo.cn
• 博客：https://blog.httpsguo.cn
• 邮箱：httpsguo@163.com
• Telegram：https://t.me/httpsguo
  

更新日志

• 2024-01-25：初始版本发布