库存 - 个人作品集 HTML 模板 preview 1

库存 - 个人作品集 HTML 模板

bookmark

Stocked 是一款面向创作者/开发者的静态个人作品集/博客 HTML 模板，提供了完整的前台页面（包括首页、作者、作品、会员、联系等场景），适合快速搭建个人品牌站点。模板内置深色/浅色主题切换、响应式布局和 SVG 图标支持，无需构建工具即可直接部署。

HTML

项目简介

Stocked 是一款面向创作者/开发者的静态个人作品集/博客 HTML 模板，提供了完整的前台页面（包括首页、作者、作品、会员、联系等场景），适合快速搭建个人品牌站点。模板内置深色/浅色主题切换、响应式布局和 SVG 图标支持，无需构建工具即可直接部署。

技术栈

  • HTML5 / CSS3（原生样式，无预处理器）
  • jQuery（交互逻辑）
  • Google Fonts（Heebo / Kanit / Playfair Display 等字体）
  • SVG 图标

项目结构

text
stockedhtml-10/
├── mainpack/
│   ├── doc/                    # 模板使用文档
│   │   ├── index.html
│   │   ├── css/
│   │   │   ├── plugins.css
│   │   │   └── style.css
│   │   ├── js/
│   │   │   ├── ie8.js
│   │   │   ├── init.js
│   │   │   ├── jquery.js
│   │   │   └── plugins.js
│   │   └── img/
│   └── html/                   # 实际模板页面
│       ├── index.html
│       ├── 404.html / about.html / contact.html ...
│       ├── assets/
│       │   └── css/            # 主模板样式（base/plugins/style/responsive）
│       └── img/

核心文件说明

  • html/index.html — 站点首页入口，包含头部导航、主题切换、搜索弹窗等核心布局
  • html/assets/css/style.css — 主模板核心样式表，定义整体视觉风格
  • html/assets/css/base.css — 基础重置与全局变量（如颜色主题变量）
  • doc/index.html — 官方使用文档，含安装步骤、HTML 结构、定制建议等
  • doc/css/style.css — 文档页面自身的样式（sidebar 侧边栏 + content 主体布局）
  • doc/js/init.js — jQuery 锚点导航脚本（onePageNav）

快速开始

  1. 解压压缩包，进入 mainpack/html 目录
  2. 直接用浏览器打开 index.html，或通过本地服务器访问（如 XAMPP / VS Code Live Server）
  3. 如遇 SVG 图标颜色异常，请使用 localhost 方式打开而非直接双击文件
  4. 部署时将 html 目录内容上传至服务器根目录即可

使用建议

  • 模板包含 23 个 HTML 页面，涵盖博客、作者、作品、会员等场景，可按需裁剪或扩展
  • 定制主题色主要修改 assets/css/base.css 中的 CSS 变量（--mc 等），深浅主题逻辑由 JS 写入 data-site-skin 属性控制
  • 文档目录（doc/）可保留供后续参考，无需上传至生产环境
help_outline

常见问题