项目简介link

Wokoya 是一款个人作品集（vCard）HTML 模板，提供多种导航布局（顶部栏、侧边栏、图标栏），适合开发者、设计师等展示个人简历与作品。模板为纯静态，无需构建工具即可使用。

技术栈link

• HTML5 + CSS3（原生）
• Google Fonts（Poppins + Hind）
• SCSS 源码（已编译为 CSS）
• PHP（仅 contact.php 用于表单后端）

项目结构link

wokoyahtml-10/main-file/
├── documentation/          # 模板文档页面
├── iconbar/                # 图标导航布局
│   ├── index.html
│   ├── style.css
│   └── img/
├── new-sidebar/            # 新版侧边栏布局
│   ├── index.html
│   └── style.css
├── sidebar/                # 经典侧边栏布局
│   ├── main/
│   ├── simple/
│   └── typing-text/
├── topbar/                 # 顶部导航布局
│   ├── main/
│   ├── simple/
│   └── typing-text/
└── php/contact.php

核心文件说明link

• iconbar/index.html — 图标导航布局入口
• new-sidebar/index.html — 新版侧边栏布局入口
• sidebar/*/index.html — 经典侧边栏三个子版本入口
• topbar/*/index.html — 顶部导航三个子版本入口
• php/contact.php — 联系表单后端处理
• scss/style.scss — SCSS 源码（需自行编译）

快速开始link

直接在浏览器打开选中的 index.html 文件即可预览。若需修改样式，推荐使用 VS Code + Live Server 实时预览；修改 SCSS 需安装 Sass 编译器。

使用建议link

模板提供 4 种主布局、8 个子版本，建议根据内容多少选择侧边栏（信息多）或顶部栏（简洁风格）。部署时确保 php/contact.php 在支持 PHP 的服务器上运行。