Widex - 一页作品集模板 preview 1

Widex - 一页作品集模板

bookmark

Widex 是一款暗色风格的一页式作品集 HTML 模板，适合个人摄影师、设计师或创意工作室展示作品。内置多种首页变体（Hero 轮播、图片背景、视频背景等），支持作品集轮播与联系表单弹窗，开箱即用无需复杂配置。

HTML

项目简介

Widex 是一款暗色风格的一页式作品集 HTML 模板，适合个人摄影师、设计师或创意工作室展示作品。内置多种首页变体（Hero 轮播、图片背景、视频背景等），支持作品集轮播与联系表单弹窗，开箱即用无需复杂配置。

技术栈

  • HTML5 + CSS3（响应式布局）
  • JavaScript（jQuery）
  • Swiper 轮播插件
  • Magnific Popup / Lity（图片/视频灯箱）
  • PHP（仅用于联系表单发送）

项目结构

text
widexhtml-10/
├── Documentation/          # 模板使用文档
│   └── index.html
└── Template/                # 实际使用的模板文件
    ├── index-*.html         # 多种首页变体
    ├── contact.php          # 联系表单处理
    ├── css/
    │   ├── style.css        # 主样式
    │   └── plugins.css      # 插件样式
    ├── js/
    │   ├── widex.js         # 主脚本
    │   ├── widex-2.js       # 辅助脚本
    │   └── plugins.js       # 插件脚本
    ├── img/                 # 图片资源
    └── MIT-License/

核心文件说明

  • Template/index-*.html — 6 种首页模板变体，按需选择使用
  • Template/css/style.css — 全站主样式，包含暗色主题配置
  • Template/js/widex.js — 核心交互逻辑与动画
  • Template/contact.php — 联系表单后端处理脚本
  • Template/img/ — 背景图与作品图占位图

快速开始

  1. 下载并解压后，在 Template/ 目录中选择一个 index-*.html 文件作为入口
  2. 直接用浏览器打开该 HTML 文件即可预览
  3. 若需联系表单功能，将 contact.php 部署到支持 PHP 的服务器，并修改 $myemail 为目标邮箱

使用建议

  • 替换 img/ 目录下的背景图与作品图时，保持图片比例一致以获得最佳显示效果
  • 联系表单依赖服务器端 PHP 环境，若使用静态托管需另行接入第三方表单服务
help_outline

常见问题