项目简介link

Harry 是一套面向创意机构与个人作品集场景的多页面 HTML 模板，基于 Bootstrap 框架构建，提供十余种首页变体及完整的博客、作品集、电商等页面模板，配套可视化主题设置面板（颜色切换、RTL/LTR 切换），适合快速搭建专业级展示站点。

技术栈link

• HTML5 / CSS3（原生样式 + SCSS 源码参考）
• Bootstrap 5（栅格、组件、工具类）
• jQuery（交互逻辑）
• meanmenu（移动端导航）
• Google Fonts（Inter、Oswald、Poppins 等字体）

项目结构link

harryhtml-10/
├── documentation/          # 在线文档入口
│   ├── index.html
│   └── assets/
│       ├── css/            # 文档样式
│       ├── fonts/
│       └── images/
└── harry/                  # 模板主体
    ├── 404.html
    ├── about.html
    ├── blog-*.html          # 博客相关页面
    ├── cart.html / checkout.html
    ├── contact-*.html
    ├── elements-*.html     # UI 组件演示页（30+）
    ├── home-*.html          # 首页变体
    ├── coming-soon.html
    └── assets/
        ├── css/main.css
        ├── js/main.js
        └── sass.txt        # SCSS 编译参考命令

核心文件说明link

• harry/index.html — 模板默认首页入口
• harry/home-*.html — 各首页变体（agency、creative、freelancer 等）
• harry/elements-*.html — 30+ UI 组件页面，可直接复用
• harry/assets/js/main.js — 主题设置、移动菜单、预加载等交互逻辑
• harry/assets/css/main.css — 完整样式表（含暗色模式变量）
• documentation/index.html — 官方文档页面

快速开始link

1. 在本地 Web 服务器（如 Live Server、Nginx）打开 harry/index.html
2. 选择合适的首页变体（如 home-agency.html）进行修改
3. 组件页面位于 elements-*.html，可复制区块到目标页面

使用建议link

模板自带的主题设置面板可在浏览器中实时切换颜色与布局方向，开发阶段建议参考 sass.txt 中的命令将 SCSS 源码纳入构建流程，便于维护定制化样式。