郊区 - 响应式即将推出页面 preview 1

郊区 - 响应式即将推出页面

bookmark

The Outskirts 是一套响应式"即将上线"（Coming Soon）页面模板，包含倒计时、联系表单和邮件订阅功能。提供多种背景效果（视频、图片轮播、Ken Burns）和天气氛围（雨、雪、云、粒子），适合网站维护或产品发布前的占位页面。

HTML

项目简介

The Outskirts 是一套响应式"即将上线"（Coming Soon）页面模板，包含倒计时、联系表单和邮件订阅功能。提供多种背景效果（视频、图片轮播、Ken Burns）和天气氛围（雨、雪、云、粒子），适合网站维护或产品发布前的占位页面。

技术栈

  • Bootstrap 3.x（CSS 框架）
  • jQuery（DOM 操作与交互）
  • Supersized 3.2.7（背景幻灯片库）
  • PHP（联系表单与邮件订阅后端）
  • MailChimp API（邮件列表集成）

项目结构

text
The-Outskirts-v1-1-Template/
├── index-*.html              # 30种首页变体（背景+主题+氛围组合）
├── contact.php               # 联系表单处理
├── subscribe.php             # MailChimp 订阅处理
├── css/
│   ├── bootstrap.min.css     # Bootstrap 核心样式
│   ├── style-dark.css        # 暗色主题
│   ├── style-light.css       # 亮色主题
│   └── font-awesome-4.4.0/   # 图标字体
├── js/
│   ├── supersized.*.js       # 各背景效果的配置脚本
│   └── the-outskirts.js      # 主交互逻辑（旋转文字等）
└── img/                      # 背景图、云/雨/雪等素材

The-Outskirts-v1-1-Documentation/
└── index.html                # 官方文档

核心文件说明

  • index-*.html — 30种模板变体，按背景类型（video/ken-burns/single-image/slideshow/youtube-video）、主题色（dark/light）、氛围（clean/clouds/rain/snow/particles）组合
  • css/style-dark.css / style-light.css — 暗色/亮色主题样式表
  • js/the-outskirts.js — 主脚本，控制欢迎语轮播等交互
  • js/supersized.*.js — Supersized 背景引擎的配置，决定使用哪种背景效果
  • contact.php — 接收联系表单 POST 数据并发送邮件
  • subscribe.php — 对接 MailChimp API 实现邮件订阅

快速开始

  1. 根据需要选择合适的 index-*.html 作为 index.html
  2. 修改页面文字内容（欢迎语、倒计时目标日期等）
  3. 替换背景素材（视频、图片）或更新 YouTube 视频 ID
  4. 配置联系表单：在 contact.php 中设置 $myemail
  5. 配置订阅功能：在 subscribe.php 中填入 MailChimp API Key 和 List ID
  6. 将整个目录部署到支持 PHP 的 Web 服务器

如仅本地预览部分效果，可直接用浏览器打开 HTML 文件，但联系表单和订阅功能需服务器环境。

使用建议

  • 选择背景类型时考虑页面加载速度，HTML5 视频背景建议控制在 5MB 以内
  • 部署前记得将 contact.php 和 subscribe.php 中的占位符邮箱/密钥替换为真实值，避免表单功能失效
help_outline

常见问题