# assetbox **Repository Path**: archiguru/assetbox ## Basic Information - **Project Name**: assetbox - **Description**: No description available - **Primary Language**: Unknown - **License**: ISC - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-05 - **Last Updated**: 2026-01-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # AssetBox - 纯静态CDN 一个极简的纯静态CDN服务，支持通过Gitee管理内容，使用帽子云自动部署。无后端依赖，真正的静态文件托管方案。 ![Version](https://img.shields.io/badge/version-3.0.0-blue) ![Static](https://img.shields.io/badge/type-static-green) ![License](https://img.shields.io/badge/license-ISC-orange) ## ✨ 特性 - 🚀 **纯静态部署** - 无需后端服务，真正的静态托管 - 📦 **智能分类** - 自动按文件类型分类（图片、图标、脚本、配置、文档等） - 🌐 **CDN加速** - 支持CDN访问，智能缓存策略 - 📱 **完美适配** - 响应式设计，完美支持移动端 - 🎨 **暗黑模式** - 标准暗黑主题，保护视力 - 👁️ **文件预览** - 支持图片在线预览 - 📋 **多种格式** - 复制链接支持直接链接、HTML、Markdown、CSS等格式 - ⚡ **自动部署** - 集成Gitee + 帽子云，代码推送自动部署 - 🔄 **Git管理** - 通过Git管理所有文件，版本控制 ## 📁 文件分类 | 分类 | 图标 | 目录 | 说明 | 支持格式 | |------|------|------|------|----------| | 图片 | 🖼️ | `cdn/images/` | 所有图片文件 | PNG, JPG, GIF, SVG, WebP, ICO | | ICO图标 | 🎨 | `cdn/icons/ico/` | ICO格式图标 | ICO | | PNG图标 | 🎨 | `cdn/icons/png/` | PNG格式图标 | PNG | | SVG图标 | 🎨 | `cdn/icons/svg/` | SVG格式图标 | SVG | | JavaScript | ⚡ | `cdn/scripts/js/` | JS脚本文件 | JS, TS | | Python | 🐍 | `cdn/scripts/python/` | Python脚本文件 | PY | | Shell | 💻 | `cdn/scripts/shell/` | Shell脚本文件 | SH, BASH | | 模块 | 📦 | `cdn/modules/` | .module模块文件 | MODULE | | 配置 | ⚙️ | `cdn/configs/` | 配置文件 | JSON, YAML, XML, INI | | 规则 | 📋 | `cdn/rules/` | .list规则文件 | LIST | | 头像 | 👤 | `cdn/avatar/` | 头像文件 | PNG, JPG, JPEG, GIF | ### 添加文件后的更新步骤 添加新文件后，**不需要手动更新** `assets.json` 文件。系统会在构建时自动生成： ```bash # 添加文件到对应目录 cp logo.png public/cdn/images/ git add public/cdn/images/logo.png git commit -m "Add logo image" git push # assets.json 会自动生成，无需手动操作 ``` **自动构建流程**： 1. 推送代码到 Gitee 2. GitHub Actions 或帽子云自动触发构建 3. 执行 `build-assets.sh` 脚本 4. 自动扫描 `public/cdn/` 目录 5. 生成 `assets.json` 文件 6. 部署到静态托管平台 **本地测试构建**： ```bash # 运行构建脚本生成 assets.json npm run build # 或 bash build-assets.sh ``` ## 🚀 快速开始 ### 本地开发 ```bash # 克隆项目 git clone git@gitee.com:archiguru/assetbox.git cd assetbox # 启动本地服务器（需要Python或Node.js） # 方式1：使用Python（推荐） python -m http.server 3000 # 方式2：使用Node.js npm run dev ``` 服务将在 `http://localhost:3000` 启动 ### 添加文件 通过Git管理添加文件到对应分类目录： ```bash # 添加图片到图片分类 cp logo.png public/cdn/images/ git add public/cdn/images/logo.png git commit -m "Add logo image" # 添加脚本到脚本分类 cp app.js public/cdn/scripts/js/ git add public/cdn/scripts/js/app.js git commit -m "Add app script" # 添加PNG图标 cp icon.png public/cdn/icons/png/ git add public/cdn/icons/png/icon.png git commit -m "Add icon" # 更新文件列表 node update-assets.js git add public/assets.json git commit -m "Update assets.json" # 推送到远程仓库 git push ``` ### 访问地址 - 🌐 **管理界面**: 部署域名 - 📦 **CDN访问**: `部署域名/cdn/分类/文件名` ### 使用示例 ```bash # 访问CDN资源 https://your-domain.com/cdn/images/logo.png https://your-domain.com/cdn/scripts/app.js https://your-domain.com/cdn/configs/settings.yaml ``` ## 📦 项目结构 ``` assetbox/ ├── package.json # 项目配置 ├── .maoziyun.yml # 帽子云部署配置 ├── .github/ │ └── workflows/ │ └── deploy.yml # GitHub Actions部署流程 ├── public/ │ ├── index.html # Web管理界面 │ ├── assets.json # 分类配置文件（包含所有文件列表） │ └── cdn/ # 静态文件存储目录 │ ├── images/ # 所有图片文件（PNG, JPG, SVG等） │ ├── icons/ # 图标文件 │ │ ├── ico/ # ICO格式图标 │ │ ├── png/ # PNG格式图标 │ │ └── svg/ # SVG格式图标 │ ├── scripts/ # 脚本文件 │ │ ├── js/ # JavaScript脚本 │ │ ├── python/ # Python脚本 │ │ └── shell/ # Shell脚本 │ ├── modules/ # .module模块文件 │ ├── configs/ # 配置文件（YAML, JSON, XML等） │ ├── rules/ # .list规则文件 │ └── avatar/ # 头像文件 ├── update-assets.js # 更新assets.json的脚本 └── test-website.js # 测试网站功能的脚本 └── README.md # 项目说明 ``` ## 🌐 部署到帽子云 ### 帽子云配置参数 在帽子云控制台创建项目时，需要填写以下配置： | 配置项 | 值 | 说明 | |--------|-----|------| | **部署类型** | 静态网站 | 纯静态部署 | | **构建命令** | `bash build-assets.sh` | 自动生成 assets.json | | **输出目录** | `public` | 静态文件输出目录 | | **索引文件** | `index.html` | 默认首页 | ### 部署步骤 1. 将代码推送到Gitee仓库 2. 登录 [帽子云控制台](https://www.maoziyun.com/) 3. 创建新项目，选择"静态网站" 4. 输入Gitee仓库地址：`git@gitee.com:archiguru/assetbox.git` 5. 填写上述配置参数 6. 配置自动部署，推送到main分支自动触发部署 ### 其他静态托管平台 本项目是纯静态网站，可以部署到任何静态托管平台： - **Vercel**: 直接导入Gitee仓库即可 - **Netlify**: 连接Gitee仓库，设置发布目录为 `public` - **GitHub Pages**: 使用 `gh-pages` 分支 - **Cloudflare Pages**: 连接Gitee仓库 - **任何静态托管服务**: 只需支持静态文件即可 ## 🎨 界面功能 ### 文件浏览 - 📂 **分类浏览** - 点击分类卡片快速筛选文件 - 👁️ **文件预览** - 图片文件在线预览 - 📋 **复制链接** - 支持多种格式（直接链接、HTML img、Markdown、CSS background） - 📊 **文件统计** - 显示每个分类的文件数量 ### 响应式设计 - 桌面端：多列网格布局 - 平板端：双列布局 - 移动端：单列布局，优化触摸体验 ## 🔧 技术栈 - **前端**: 原生 HTML5 + CSS3 + JavaScript - **部署**: Gitee + 帽子云（或任何静态托管平台） - **依赖**: 无（纯静态，零依赖） ## 🧪 测试和验证 ### 本地测试 ```bash # 启动本地服务器 python -m http.server 3000 # 运行测试脚本 node test-website.js ``` 测试脚本会验证： - ✅ 所有分类的文件数量 - ✅ 文件路径是否有效 - ✅ 总文件数统计 ### 功能检查 访问 `http://localhost:3000/index.html` 后，检查以下功能： - ✅ 11个分类卡片是否正常显示 - ✅ 每个分类的文件数量是否正确 - ✅ 点击分类是否能正常筛选文件 - ✅ 文件列表是否正常显示 - ✅ 点击"预览"按钮是否能预览图片 - ✅ 点击"复制"按钮是否能复制链接 - ✅ 预览模态框中的复制选项是否都能正常工作 ## 📝 使用指南 ### 添加新文件 1. 将文件放到对应的分类目录 2. 使用Git提交并推送 3. 自动部署后即可通过CDN访问 ### 修改分类配置 编辑 `public/assets.json` 文件，可以自定义分类： ```json { "custom": { "name": "自定义分类", "icon": "🎯", "description": "自定义说明", "files": [] } } ``` ### 自定义样式 修改 `public/index.html` 中的 `