← 返回项目库

绿脉气候行动中文公益站模板

中文气候公益行动网站模板，展示植树减碳成果、支持计划、行动伙伴、志愿者招募和项目故事。

绿脉气候行动是一套可独立运行的 React 中文环保公益网站学习模板。页面展示植树数量、碳排放抵消和活跃伙伴等行动指标，提供单次或持续支持表单、伙伴墙、志愿者申请工作流，以及可切换的雨林、风能和青年气候行动故事。

真实界面

项目截图

共 5 张

绿脉气候行动中文首页
气候项目支持成功状态
环保行动伙伴墙
志愿者申请成功状态
风能减碳行动故事

Capabilities

核心功能

✓植树与减碳行动指标
✓单次和每月支持方式
✓支持表单校验与成功反馈
✓十五位环保行动伙伴墙
✓志愿者申请与成功反馈
✓三类气候行动故事轮播
✓响应式桌面和移动导航

适用场景

学习 React 公益网站架构
制作环保组织行动展示页
研究表单校验和状态反馈
展示气候项目成果与社区故事

适合谁

环保公益组织、社会创新团队、社区行动者、前端学习者、社群教学用户和可持续发展项目设计者。

商业化思路

用于社群学习和研究公益项目展示、气候行动倡议、支持表单、志愿者招募与故事传播。

你会拿到什么

  • ✓完整中文源码包
  • ✓五张真实运行功能截图
  • ✓中文安装、构建与许可证披露说明
  • ✓构建、支持表单、志愿申请和浏览器验收记录

部署流程

  1. 1安装 Node.js 20 或更高版本并进入项目目录。
  2. 2执行 npm ci 安装锁定依赖。
  3. 3执行 npm run build 生成 dist 静态产物。
  4. 4执行 npm run preview -- --host 127.0.0.1 --port 23256 本地预览，或将 dist 部署到静态服务器。

真实验证结果

npm 干净安装与 Vite 生产构建通过，生产依赖漏洞为 0；固定运行探针确认自有监听进程返回 HTTP 200；浏览器验证主页、支持成功、伙伴墙、志愿申请成功和故事切换五个不同状态，控制台错误、坏图、404、登录页、横向溢出和重复截图均为 0。

部署前须知

支持和志愿申请为纯前端演示，不会收取真实款项或发送个人信息；上游未声明许可证，仅按社群学习研究用途收录。

部署难度

简单

最低配置

Node.js 20+、npm 10+；构建后可部署到任意静态 Web 服务器。

开源许可证

上游未声明许可证

最后验证

2026-08-20

技术栈

React 18JavaScriptVite 6Tailwind CSS 3Lucide React

授权说明

上游仓库未提供独立许可证文件；本项目仅按社群学习与研究用途收录并保留原始来源。如需再分发或商业使用，请先向原作者确认授权边界。

Release notes

版本记录

1 个已发布版本

v1.0.0-cn.1 当前推荐

首个中文社群学习版本，完成气候行动指标、支持工作流、伙伴墙、志愿申请和故事轮播中文化，并修复支持说明的无效嵌套标记。

部署要求：Node.js 20+、npm 10+；现代浏览器或静态 Web 服务器。

已知问题：支持和志愿者表单均为前端演示，不包含支付、邮件、数据库或组织后台。

登录后领取