生日祝福静态网站生成框架

小猪猪的18岁生日快到了，想着写一个静态网站，来表达对她的祝福。原先网上是有一个简单的静态网站源码，但是考虑到网站源码的维护与复用问题，我决定自己写一个静态网站生成框架。使用了Node.js和Plop.js来构建，配置文件采用YAML格式，模板引擎采用Handlebars。

项目地址：https://github.com/Aurorp1g/Happy_Birthday

项目介绍

生日祝福静态网站生成框架：这是一个专为创建个性化生日祝福网站而设计的静态站点生成工具，让你能够轻松为朋友、家人创建独特而有意义的生日礼物，无需复杂的前端开发技能。

项目特点

这个框架具有以下几个突出特点：

🎨 简单易用的配置系统

通过修改配置文件，你可以轻松自定义网站的各个方面，包括：

• 祝福语和文本内容
• 图片资源和布局
• 背景音乐
• 页面样式和动画效果

所有这些都可以在配置文件中完成，无需编写代码。

📁 自动化的文件生成

框架基于Plop.js构建，能够自动：

• 根据模板生成静态网站文件（HTML、CSS、JS）
• 复制和处理资源文件（图片、音乐等）
• 自动处理路径转换，确保网站部署后资源能正确加载

🎵 多媒体支持

支持添加背景音乐，让你的祝福网站更加生动：

• 可配置的音乐播放选项
• 多种音频格式支持
• 自动在用户浏览时播放

🎬 丰富的动画效果

网站包含多种动画效果，提升用户体验：

• 页面切换动画
• 文字动画效果
• 粒子动画背景
• 响应式设计，适配各种设备

技术栈

• Node.js: 运行环境
• Plop.js: 模板引擎和代码生成工具
• Handlebars: 前端源码模板系统
• YAML: 配置文件格式
• jQuery: 前端交互库
• FullPage.js: 全屏滚动效果
• CSS3: 样式和动画

快速开始

1. 环境准备

确保你的系统已安装Node.js，然后克隆项目仓库：

git clone https://github.com/Aurorp1g/Happy_Birthday.git
cd Happy_Birthday

2. 安装依赖

npm install

3. 自定义配置

编辑项目根目录下的config.yaml文件，根据提示修改相应配置：

# 基本信息
projectTitle: "生日快乐"
userName: "亲爱的朋友"

# 字体和动画配置
fontAnimation: "animate__fadeIn"
fontColor: "#000000"

# 音乐配置
music: "/templates/music/1.mp3"

# 各屏幕配置
screens:
  - id: "birthday_logo"
    image: "/templates/img/HappyBirthday.png"
    text: "生日快乐！"
  # 更多屏幕配置...

4. 生成网站

# 将构建配置文件重命名
mv plopfile.js.txt plopfile.js

# 生成静态网站文件
npx plop g

这将在dist目录下生成完整的静态网站文件。

5. 部署

你可以将dist目录中的内容部署到任何静态网站托管服务，如GitHub Pages、Netlify或Vercel。

使用场景

这个框架非常适合以下场景：

1. 为朋友创建个性化生日礼物
2. 制作有意义的电子贺卡
3. 创建纪念日网站
4. 分享照片和回忆的数字相册
5. 为特殊场合定制互动式网页

高级自定义

如果你有一定的前端开发经验，还可以通过以下方式进行高级自定义：

1. 修改模板文件：在templates目录下修改模板文件，以自定义网站的结构和内容。
2. 自定义CSS：编辑样式文件以更改网站外观
3. 添加新功能：扩展JavaScript代码添加新交互
4. 创建自定义动画：添加新的动画效果

总结

生日祝福静态网站生成框架是一个既实用又有趣的工具，它让创建个性化生日祝福网站变得简单而高效。无论是送给朋友还是家人，这样的礼物都充满了心意和创意。

如果你也喜欢这个项目，欢迎在GitHub上给它一个star，或者贡献你的代码和建议，让它变得更加完善！