Hopeu – 慈善与捐赠 HTML 模板 preview 1

Hopeu – 慈善与捐赠 HTML 模板

bookmark

Hopeu 是一款专为非营利组织和慈善机构设计的响应式 HTML5 网站模板，包含多首页布局、捐赠收款、活动管理、志愿者招募及博客等功能，可用于快速搭建公益基金会或众筹活动的官方网站。模板采用深绿色（#2a493d）作为主色调，整体风格简洁专业。

HTMLcharitablecharitychurchcrowdfundingdonatedonationfoundation

项目简介

Hopeu 是一款专为非营利组织和慈善机构设计的响应式 HTML5 网站模板，包含多首页布局、捐赠收款、活动管理、志愿者招募及博客等功能，可用于快速搭建公益基金会或众筹活动的官方网站。模板采用深绿色（#2a493d）作为主色调，整体风格简洁专业。

技术栈

  • Bootstrap 5（响应式布局框架）
  • SCSS（样式预处理，源码在 scss/ 目录）
  • Google Fonts（Outfit + Amita 字体）
  • Font Awesome 6（图标库）
  • 原生 JavaScript（js/theme.js）

项目结构

text
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 网格系统，定制布局时应遵循其栅格规则以保持响应式效果。

help_outline

常见问题