Hopeu – 慈善与捐赠 HTML 模板

# 项目简介 Hopeu 是一款专为非营利组织和慈善机构设计的响应式 HTML5 网站模板，包含多首页布局、捐赠收款、活动管理、志愿者招募及博客等功能，可用于快速搭建公益基金会或众筹活动的官方网站。模板采用深绿色（`#2a493d`）作为主色调，整体风格简洁专业。 ## 技术栈 - Bootstrap 5（响应式布局框架） - SCSS（样式预处理，源码在 `scss/` 目录） - Google Fonts（Outfit + Amita 字体） - Font Awesome 6（图标库） - 原生 JavaScript（`js/theme.js`） ## 项目结构 ``` Template/hopeu/ ├── index.html # 首页版本一 ├── index-2.html # 首页版本二 ├── index-3.html # 首页版本三 ├── index-4-dark.html # 深色首页 ├── about.html # 关于我们 ├── blog*.html # 博客列表/详情 ├── contact.html # 联系页面 ├── donations*.html # 捐赠相关页面 ├── event*.html # 活动管理页面 ├── volunteer*.html # 志愿者招募页面 ├── faq.html # 常见问题 ├── css/ │ ├── style.min.css # 主样式（压缩） │ ├── responsive.css # 响应式断点样式 │ └── bootstrap.min.css # Bootstrap 框架样式 ├── js/theme.js # 交互脚本 ├── scss/ # SCSS 源码 │ ├── _variables.scss # 全局变量 │ ├── _title.scss # 标题组件 │ └── style.scss # 入口文件 ├── images/ # 图片资源 └── inc/contact.php # 联系人表单后端 ``` ## 核心文件说明 - `index.html` — 主首页入口，含导航栏、幻灯片、捐赠入口等核心区块 - `css/style.min.css` — 编译合并后的主样式文件，由 `scss/style.scss` 生成 - `scss/_variables.scss` — 全局变量定义（品牌色 `#2a493d`、字体配置、间距等） - `js/theme.js` — 导航切换、预加载动画、表单交互等逻辑 - `inc/contact.php` — 联系表单后端处理脚本（需 PHP 环境） - `index-4-dark.html` — 深色主题首页，适合暗色场景参考 ## 快速开始 1. 解压压缩包，进入 `Template/hopeu/` 目录，将文件部署到 Web 服务器（Apache/Nginx），或用 VS Code Live Server 等本地服务器预览 2. 替换 `images/` 中的 Logo 与图片资源为实际内容 3. 联系表单需配合服务器端 PHP 环境，启用 `inc/contact.php` 接收提交数据 4. 如需修改样式，编辑 `scss/_variables.scss` 后重新编译 SCSS 生成 `css/style.min.css` ## 使用建议 直接修改 `_variables.scss` 中的颜色变量即可批量调整全站品牌色，建议保留多首页版本作为 A/B 测试或不同活动场景使用；由于采用 Bootstrap 5 网格系统，定制布局时应遵循其栅格规则以保持响应式效果。