简介
本指南面向DouPHP主题与站点资源的开发与维护,聚焦以下目标:
- 主题资源的目录结构与规范(images、js、inc、fonts等)
- 新增 主题设置的标准化处理机制(ViewVars::theme方法)
- 静态资源加载机制(CDN集成、本地缓存、版本控制)
- 资源优化技术(图片压缩、JS/CSS压缩、合并与按需加载)
- 动态资源处理(用户上传、临时文件、缓存文件的存储与管理)
- 资源路径管理(绝对路径、相对路径、URL生成最佳实践)
- 多主题下的资源隔离与共享机制
- 资源管理与工具链(构建、自动化、部署优化)
- 安全策略(文件类型校验、路径遍历防护等)
项目结构
DouPHP采用"前端主题 + 业务资源 + 统一存储"的分层组织方式:
- 主题资源位于 theme/{theme}/ 下,包含模板、样式、脚本与主题内图片。
- 新增 主题设置文件 inc/..setting.php 定义各模块图片的尺寸配置和提示文案。
- 业务运行期产生的图片与附件集中存放在 images/{module}/... 下,按模块与日期分片。
- 上传默认落盘位置为 images/upload/,由文件系统配置驱动。
- 小程序端资源在 miniprogram/ 下,通过路由与URL工具生成访问地址。
graph TB
A["主题目录<br/>theme/{theme}/"] --> A1["images/ 主题图片"]
A --> A2["js/ 主题脚本"]
A --> A3["css/ 主题样式"]
A --> A4["inc/ 模板片段"]
A --> A5["inc/..setting.php 主题设置"]
B["运行时资源<br/>images/{module}/..."] --> B1["业务图片/附件"]
C["上传根目录<br/>images/upload/"] --> C1["通用上传文件"]
D["小程序资源<br/>miniprogram/"] --> D1["页面/工具/路由"]
E["配置与门面<br/>config/*, core/*"] --> E1["文件系统/URL/缓存"]
E --> E2["ViewVars主题设置处理"]
F["主题设置读取器<br/>ThemeSettingsReader"] --> F1["新旧格式兼容解析"]
F --> F2["标准化配置输出"]
章节来源
- config/file.php:17-38
- config/file.php:43-60
- front/controller/user/UserController.php:160-179
- admin/service/theme/ThemeSettingsReader.php:25-36
核心组件
- 文件系统与磁盘配置:定义默认驱动、上传限制、允许扩展名、缩略图目录等,支持按模块动态构建磁盘路径。
- URL生成门面:提供统一的URL生成能力,便于模板与前端代码获取稳定、可缓存的资源地址。
- 资源版本与缓存世代:为lang_js/routes_js等提供内容指纹与缓存世代分离的刷新策略。
- 新增 ViewVars主题设置处理:提供标准化的主题图片配置处理,支持新旧格式兼容。
- 新增 ThemeSettingsReader服务:负责读取和标准化主题设置文件,支持数组格式和行文本格式。
- 主题资源组织:每个主题独立目录,包含images/js/css/inc等子目录,便于隔离与替换。
章节来源
- config/file.php:17-38
- config/file.php:43-60
- core/facade/Url.php:24-47
- core/web/manifest/ManifestCacheGeneration.php:21-44
- core/support/ViewVars.php:129-193
- admin/service/theme/ThemeSettingsReader.php:37-82
架构总览
下图展示从模板到静态资源、运行时资源与小程序端的整体调用关系,以及配置与门面在其中扮演的角色。
sequenceDiagram
participant T as "主题模板"
participant U as "URL门面"
participant V as "ViewVars"
participant R as "ThemeSettingsReader"
participant S as "文件系统配置"
participant FS as "磁盘(本地/OSS)"
participant CDN as "CDN/静态服务器"
participant MP as "小程序端"
T->>R : 读取主题设置文件
R-->>T : 返回标准化配置
T->>V : 处理主题设置
V-->>T : 返回{key}_size和{key}_crop
T->>U : 生成资源URL(主题图片/脚本/样式)
U-->>T : 返回带版本参数的URL
T->>CDN : 请求静态资源
Note over T,CDN : 浏览器缓存命中或回源
T->>S : 读取上传/缩略图配置
S-->>FS : 解析磁盘根与URL前缀
FS-->>T : 返回运行时资源URL(如用户头像/商品图)
MP->>U : 小程序侧生成API/页面URL
U-->>MP : 返回规范化路径
MP->>CDN : 拉取静态资源(可选)
图表来源
- core/facade/Url.php:24-47
- core/support/ViewVars.php:129-193
- admin/service/theme/ThemeSettingsReader.php:66-82
- config/file.php:43-60
- core/web/manifest/ManifestCacheGeneration.php:21-44
详细组件分析
主题资源目录结构规范
- images:存放主题专属图片(图标、背景、Logo等)。建议按功能域再分子目录,避免扁平化导致检索困难。
- js:主题脚本,优先使用模块化与按需引入;公共库尽量复用系统提供的版本。
- css:主题样式,建议拆分为基础样式与页面样式,减少重复规则。
- inc:模板片段,用于复用头部、底部、导航等区块,提升一致性。
- 新增 inc/..setting.php:主题图片尺寸配置文件,定义各模块图片的标准尺寸和提示文案。
- fonts:字体文件建议放入主题fonts目录或通过CDN引入,避免跨域与体积过大问题。
示例参考:
- 主题图片:theme/default/images/logo.png
- 主题脚本:theme/default/js/dou.js
- 新增 主题设置:theme/default/inc/..setting.php
章节来源
- theme/default/images/logo.png
- theme/default/js/dou.js
- theme/default/inc/..setting.php:1-18
主题设置标准化处理机制
新增 ViewVars::theme方法提供主题设置的标准化处理能力:
- 新标准格式支持:直接读取数组格式的width/height配置,自动生成提示文案
- 旧格式兼容:自动解析行文本格式,提取宽高信息并保留原始文案
- 智能文案生成:根据width/height自动生成推荐尺寸提示,支持note补充说明
- 裁剪预设派生:自动计算{key}_crop字段,格式为"宽/高"
- 默认值填充:确保所有必需键都存在,避免PHP 8+未定义下标错误
flowchart TD
Start(["主题设置文件"]) --> CheckFormat{"检查文件格式"}
CheckFormat --> |数组格式| NormalizeArray["标准化数组项"]
CheckFormat --> |行文本格式| ParseLegacy["解析行文本"]
NormalizeArray --> GenerateText["生成提示文案"]
ParseLegacy --> ExtractSize["提取宽高信息"]
ExtractSize --> GenerateText
GenerateText --> CreateCrop["创建裁剪预设"]
CreateCrop --> FillDefaults["填充默认值"]
FillDefaults --> Output["输出标准化结果"]
图表来源
- core/support/ViewVars.php:129-193
- admin/service/theme/ThemeSettingsReader.php:111-172
章节来源
- core/support/ViewVars.php:129-193
- admin/service/theme/ThemeSettingsReader.php:111-172
静态资源加载机制
- 版本控制:通过内容哈希与缓存世代组合参数注入URL,确保更新后强制刷新,同时保留长期缓存。
- 本地缓存:浏览器对静态资源启用强缓存(配合ETag/Last-Modified),在内容不变时零网络开销。
- CDN集成:将主题与公共静态资源托管至CDN,利用边缘节点加速;URL生成需指向CDN域名。
- 资源发现:模板中引用资源时,优先使用URL门面生成的地址,避免硬编码路径。
flowchart TD
Start(["页面渲染"]) --> GenURL["生成资源URL(含版本参数)"]
GenURL --> CacheCheck{"浏览器缓存命中?"}
CacheCheck --> |是| ReturnCached["直接返回缓存资源"]
CacheCheck --> |否| FetchCDN["向CDN/源站请求"]
FetchCDN --> Serve["服务端/CDN响应"]
Serve --> UpdateCache["更新本地缓存(设置过期/ETag)"]
ReturnCached --> End(["完成"])
UpdateCache --> End
图表来源
- core/web/manifest/ManifestCacheGeneration.php:21-44
- core/facade/Url.php:24-47
章节来源
- core/web/manifest/ManifestCacheGeneration.php:21-44
- core/facade/Url.php:24-47
资源优化技术
- 图片优化:
- 上传时进行格式转换与质量压缩(根据配置项image_quality)。
- 生成缩略图并指定目录(thumb_directory),减少首屏加载体积。
- 推荐WebP/AVIF格式,结合现代浏览器特性按需加载。
- 新增 基于主题配置的智能尺寸优化,根据{key}_crop预设自动调整图片尺寸。
- JS/CSS优化:
- 压缩与混淆(生产环境),减少传输体积。
- 合并关键CSS与异步加载非关键JS,降低阻塞。
- 使用Tree Shaking与按需引入,剔除未用代码。
- 缓存策略:
- 静态资源开启长缓存+内容指纹;HTML与接口保持短缓存或协商缓存。
- 通过缓存世代在管理员清空缓存时触发全局失效。
章节来源
- config/file.php:17-38
- config/file.php:43-60
- core/web/manifest/ManifestCacheGeneration.php:21-44
- core/support/ViewVars.php:175-177
动态资源处理(上传、临时、缓存)
- 上传入口:前端控制器接收上传请求,基于模块与目录构建磁盘路径,写入images/{module}/...。
- 草稿与归属:支持draft_token驱动的草稿模式,编辑场景绑定真实业务ID进行归属管理。
- 临时与缓存:临时文件应置于独立目录并定期清理;缓存文件可通过配置与任务清理。
- 小程序上传:小程序端通过API上传,后端统一处理校验与落盘,返回标准化URL供前端使用。
- 新增 主题配置集成:上传时根据主题设置的图片尺寸限制进行校验和优化。
sequenceDiagram
participant FE as "前端/小程序"
participant UC as "UserController"
participant TSR as "ThemeSettingsReader"
participant ST as "Storage/磁盘"
participant FS as "文件系统"
FE->>UC : 提交文件(module/folder/item_id/type/target)
UC->>TSR : 查询主题图片尺寸限制
TSR-->>UC : 返回最大宽度限制
UC->>ST : 构建磁盘(images/{module}/{folder})
ST->>FS : 校验扩展名/大小/质量/缩略图
FS-->>ST : 返回存储结果
ST-->>UC : 返回文件URL/元数据
UC-->>FE : 返回成功响应(含file_url/image)
图表来源
- front/controller/user/UserController.php:160-179
- admin/service/theme/ThemeSettingsReader.php:90-103
- miniprogram/company/pages/product/edit.ts:184-228
- config/file.php:43-60
章节来源
- front/controller/user/UserController.php:160-179
- admin/service/theme/ThemeSettingsReader.php:90-103
- miniprogram/company/pages/product/edit.ts:184-228
- config/file.php:43-60
资源路径管理(绝对/相对/URL生成)
- 模板与视图:
- 使用URL门面生成资源地址,避免硬编码相对路径导致的迁移成本。
- favicon与公共样式通过根路径引用,确保在不同子路径下仍可正确加载。
- 小程序端:
- 通过route工具与URL生成器构造页面与API路径,支持rewrite开关与查询参数拼接。
- 最佳实践:
- 所有对外可访问资源均通过URL门面生成,保证CDN切换与版本参数注入的一致性。
- 内部逻辑路径使用相对路径,外部暴露路径一律使用绝对URL。
章节来源
- core/facade/Url.php:24-47
- miniprogram/default/utils/url.ts:33-55
- miniprogram/company/utils/route.ts:1-29
多主题下的资源隔离与共享
- 隔离:每个主题拥有独立的images/js/css/inc目录,互不干扰,便于A/B测试与快速回滚。
- 新增 主题设置隔离:每个主题的inc/..setting.php文件独立配置,支持不同的图片尺寸要求。
- 共享:公共样式与脚本可提取至系统级目录,主题仅覆盖差异部分;通过URL门面统一接入。
- 切换:主题切换时,模板自动加载对应资源;运行时资源(images/{module})与主题解耦,避免误删。
- 新增 兼容性保障:系统自动检测主题设置格式,确保新旧主题都能正常工作。
章节来源
- theme/default/images/logo.png
- theme/default/js/dou.js
- theme/default/inc/..setting.php:1-18
- _'/theme/m145/inc/..setting.php:1-15
资源管理的工具与方法
- 构建工具:
- 使用打包工具对JS/CSS进行压缩、合并与Tree Shaking;输出产物命名带内容哈希。
- 图片预处理:自动转换为WebP/AVIF,生成多尺寸缩略图。
- 新增 主题设置验证:开发阶段验证主题设置文件的格式和完整性。
- 自动化:
- 在CI/CD流水线中执行资源检查与优化;发布前进行体积与性能审计。
- 新增 主题设置烟测:自动测试主题设置的兼容性和正确性。
- 部署优化:
- 将静态资源推送到CDN;配置HTTP缓存头与Gzip/Brotli压缩。
- 通过缓存世代在变更时触发全局失效,确保客户端拿到最新资源。
章节来源
- devtools/theme-setting-smoke.php:1-100
资源安全考虑
- 文件类型验证:
- 仅允许白名单扩展名(jpg/jpeg/gif/png/webp/ico),默认不含svg以降低XSS风险;确需时在磁盘配置显式开启。
- 路径遍历防护:
- 上传路径由模块与目录参数构建,并进行严格校验;禁止直接使用用户输入作为路径片段。
- 权限控制:
- 上传接口需鉴权;草稿模式与归属ID绑定,防止越权访问他人资源。
- 最小权限:
- 运行账户对上传目录仅有写权限;只读资源由Web服务器或CDN提供。
- 新增 主题设置安全:
- 主题设置文件路径固定为inc/..setting.php,防止路径遍历攻击。
- 主题设置内容经过严格验证,确保只有合法的配置项被接受。
章节来源
- config/file.php:17-38
- config/file.php:43-60
- front/controller/user/UserController.php:160-179
- admin/service/theme/ThemeSettingsReader.php:66-82
依赖关系分析
- 配置层:config/config.php与config/file.php提供系统常量与文件系统配置。
- 服务层:Config门面提供统一配置读取;Url门面提供URL生成;ManifestCacheGeneration提供缓存世代。
- 新增 主题设置层:ThemeSettingsReader负责读取和解析主题设置文件;ViewVars提供主题设置处理。
- 控制器层:UserController负责文件上传与存储路径构建。
- 前端层:小程序端通过route与url工具生成路径,并与后端保持一致。
graph LR
CFG["配置(config/*.php)"] --> FAC["门面(core/facade/*)"]
FAC --> CTL["控制器(front/controller/*)"]
FAC --> VUE["模板/小程序(miniprogram/*)"]
CTL --> DISK["文件系统(config/file.php)"]
VUE --> URL["URL门面(core/facade/Url.php)"]
VUE --> VIEWVARS["ViewVars主题处理"]
VIEWVARS --> TSR["ThemeSettingsReader"]
TSR --> THEME["主题设置文件"]
图表来源
- config/config.php:15-53
- config/file.php:43-60
- core/facade/Url.php:24-47
- core/support/ViewVars.php:129-193
- admin/service/theme/ThemeSettingsReader.php:66-82
- front/controller/user/UserController.php:160-179
章节来源
- config/config.php:15-53
- config/file.php:43-60
- core/facade/Url.php:24-47
- core/support/ViewVars.php:129-193
- admin/service/theme/ThemeSettingsReader.php:66-82
- front/controller/user/UserController.php:160-179
性能考虑
- 首屏优化:
- 关键CSS内联,非关键CSS异步加载;JS按需加载与延迟执行。
- 图片懒加载与占位图,减少初始负载。
- 新增 基于主题配置的预加载优化,根据{key}_crop预设提前准备合适尺寸的图片。
- 缓存策略:
- 静态资源长缓存+内容指纹;HTML短缓存或协商缓存。
- 通过缓存世代在发布时触发全局失效。
- 传输优化:
- 启用Gzip/Brotli压缩;HTTP/2或多路复用。
- 使用CDN就近分发,降低延迟。
- 监控与分析:
- 采集首屏时间、资源体积与命中率;定期审计与优化。
- 新增 主题设置性能监控,跟踪不同主题配置对资源加载的影响。
故障排查指南
- 上传失败:
- 检查允许的扩展名与单文件大小限制;确认磁盘根目录存在且可写。
- 核对模块与目录参数是否合法,避免路径穿越。
- 新增 检查主题设置文件是否存在且格式正确。
- 资源404:
- 确认URL门面生成的地址是否正确;检查CDN或Web服务器配置。
- 若修改了主题或资源路径,请同步更新引用。
- 缓存未生效:
- 检查版本号与缓存世代是否变化;确认浏览器缓存头设置。
- 管理员清空缓存后,观察资源URL是否更新。
- 新增 主题设置问题:
- 检查inc/..setting.php文件格式是否符合要求。
- 验证ViewVars::theme方法是否能正确解析主题设置。
- 确认主题切换后设置是否正确加载。
章节来源
- config/file.php:43-60
- core/web/manifest/ManifestCacheGeneration.php:21-44
- core/facade/Url.php:24-47
- admin/service/theme/ThemeSettingsReader.php:66-82
- core/support/ViewVars.php:129-193
结论
DouPHP的资源组织以"主题隔离 + 统一存储 + 门面抽象"为核心,结合严格的配置与安全策略,实现了可扩展、可维护与高性能的资源管理体系。新增的主题设置标准化处理机制进一步提升了多主题环境下的资源管理能力,通过ViewVars::theme方法和ThemeSettingsReader服务,实现了新旧主题格式的无缝兼容和智能配置处理。遵循本指南的目录规范、加载策略与优化手段,可在多主题与多端环境下保持一致性与稳定性。
附录
- 常用目录参考:
- 主题图片:theme/default/images/logo.png
- 主题脚本:theme/default/js/dou.js
- 新增 主题设置:theme/default/inc/..setting.php
- 新增 迁移主题设置:_'/theme/m145/inc/..setting.php
- 上传根目录:images/upload
- 相关配置与门面:
- 系统配置:config/config.php
- 文件系统配置:config/file.php
- 配置门面:core/foundation/configuration/Config.php
- URL门面:core/facade/Url.php
- 新增 主题设置处理:core/support/ViewVars.php
- 新增 主题设置读取器:admin/service/theme/ThemeSettingsReader.php
- 缓存世代:core/web/manifest/ManifestCacheGeneration.php
- 前端与小程序:
- 上传控制器:front/controller/user/UserController.php
- 小程序上传:miniprogram/company/pages/product/edit.ts
- 小程序URL工具:miniprogram/default/utils/url.ts
- 小程序路由工具:miniprogram/company/utils/route.ts
- 新增 开发工具:
- 主题设置烟测:devtools/theme-setting-smoke.php
- 后台初始化:admin/init/Init.php