易优EyouCMS程序中load标签加载资源文件的使用方法及示例
一、基础用法
- 标签名称：
{eyou:load} - 描述：用于在模板中加载外部资源文件，如 CSS、JS 或 PHP 文件，支持本地路径或远程 URL。
- 语法格式：
html
{eyou:load file='本地文件路径' href='远程文件URL' ver='版本号控制' /}
二、属性说明
| 属性名 | 必填 | 说明 |
|---|---|---|
file |
否 | 本地资源文件路径（相对于网站根目录），如 /static/js/common.js |
href |
否 | 远程资源文件地址，如 http://example.com/style.css |
ver |
否 | 是否启用版本号控制缓存，值为 on 时会自动附加当前时间戳，防止浏览器缓存旧文件 |
⚠️ 注意：file和href只能同时使用一个。
三、使用示例
示例1：加载本地CSS样式文件
html
{eyou:load file='/static/css/style.css' /}说明：引入项目中的本地CSS样式文件。
示例2：加载远程CSS样式文件
html
{eyou:load href='https://example.com/cdn/css/main.css' /}说明：从CDN或远程服务器加载CSS文件。
示例3：加载多个本地资源文件
html
{eyou:load file='/static/js/jquery.min.js,/static/js/common.js,/static/css/reset.css' /}说明：一次性加载多个 JS 和 CSS 文件，逗号分隔。
示例4：使用别名标签 js、css、import 加载资源
html
{eyou:js file='/static/js/app.js' /} {eyou:css file='/static/css/theme.css' /} {eyou:import file='/common/functions.php' /}说明：js、css、import是load的别名标签，功能一致，语义更清晰。
示例5：开启版本号控制防止缓存
html
{eyou:load file='/static/js/app.js' ver='on' /}输出效果类似：
html
<script src="/static/js/app.js?ver=20231023172941"></script>说明：自动添加时间戳防止浏览器缓存旧文件。
四、注意事项
- 资源路径需确保可访问，避免出现404错误；
- 使用
ver='on'可有效解决前端静态资源更新后浏览器缓存问题； - 推荐优先使用
file引入本地资源，提升加载速度； - 支持加载
.php等其他类型文件，但应确保其输出内容符合预期。
五、常见用途场景
| 场景 | 推荐写法 |
|---|---|
| 引入本地JS | {eyou:js file='/static/js/main.js' /} |
| 引入远程CDN样式 | {eyou:css href='https://cdn.example.com/bootstrap.min.css' /} |
| 多个JS/CSS合并加载 | {eyou:load file='/static/js/jquery.js,/static/js/custom.js' /} |
| 防止缓存 | {eyou:js file='/static/js/app.js' ver='on' /} |
| 引入PHP配置文件 | {eyou:import file='/config/setting.php' /} |
更新时间：2025-05-06 10:32:04