craftsnippets / static-file-manager
将静态文件列表保存在PHP配置文件中。
Requires
- craftcms/cms: ^5.0.0
This package is not auto-updated.
Last update: 2024-09-22 18:36:02 UTC
README
需求
此插件需要Craft CMS 3.0.0-beta.23或更高版本。
安装
要安装插件,请按照以下说明操作。
-
打开您的终端并转到您的Craft项目
cd /path/to/project
-
然后告诉Composer加载插件
composer require craftsnippets/static-file-manager
-
在控制面板中,转到设置 → 插件,并单击“安装”按钮以安装资源清单。
概览
- 此插件允许您将CSS、JS和Favicon文件的列表保存在PHP配置文件中,而不是在Twig模板中。
- 您可以将配置文件中的文件注入到前端站点和控制面板中。CSS文件将被注入到
<head>
的末尾,JS文件将被注入到<body>
的末尾。 - 您还可以包含指向Google字体CSS文件的链接,如
https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap
- 它将以其他CSS文件相同的方式包含。 - 插件还允许通过将包含修改日期的URL参数附加到文件路径上来进行文件缓存破坏。这意味着只有在文件被修改时才会进行缓存破坏。来自外部服务器的文件不会被缓存破坏。
- 插件公开一个端点,以JSON格式列出所有静态文件,因此列表可以被前端构建工具消耗。这不包括Google字体文件。
使用方法
为了使用插件,将此代码放置到您项目的基模板中。请记住,如果没有在模板中包含<body>
或<head>
标签,则不会插入静态文件。
{% do craft.staticFileManager.outputFiles() %}
您可以将此函数的变量传递为false
以取消将资产注入到模板中
{% do craft.staticFileManager.outputFiles(false) %}
要注入的文件列表设置在config/static-file-manager.php
设置文件中的filesList
设置下。要将文件注入到控制面板中,将它们放置在cpFileList
设置下。所有文件路径都是相对于网站根目录的。以下是一个示例配置文件
<?php
return [
'filesList' => [
'some-file.css',
'other-file.js',
],
'cpFileList' => [
'some-control-panel-styles.css',
],
'faviconPath' => 'some-favicon.png',
'cpFaviconPath' => 'some-control-panel-favicon.png',
];
您可以使用内联PHP函数动态定义注入的文件名
<?php
return [
'filesList' => [
function(){
$language = Craft::$app->getSites()->currentSite->language;
if($language == 'en'){
return 'english-file.js';
}else{
return 'non-english-file.js';
}
}
]
];
Twig过滤器
您可以使用version
过滤器手动在Twig模板中破坏文件的缓存
<script src="{{'some_script.js'|version}}"></script>
JSON端点
插件公开一个端点,返回以JSON格式表示的资产列表。该列表由两个数组组成 - 键为css
的数组包含CSS文件,键为js
的数组包含JavaScript文件。只有存在于文件系统中的文件会被列出,因此来自外部服务器的文件被省略在此列表中。该列表在[网站URL]/actions/static-file-manager
URL下可用,但您首先需要使用exposeJsonList
配置设置启用它。
以下是一个示例gulp任务,它从端点加载JavaScript文件列表并将其压缩成一个文件。此配置假设您使用Xampp,并且您的项目位于htdocs
目录中。
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
const https = require('http');
gulp.task('production', ['sass:production', 'uglify:production']);
gulp.task('uglify:production', function() {
// set endpoint url
let file_path = __dirname;
let explode = file_path.split('htdocs');
let url = 'https://'+explode[1]+'/web/actions/static-file-manager';
// load data
https.get(url,(res) => {
let body = "";
res.on("data", (chunk) => {
body += chunk;
});
res.on("end", () => {
let json = JSON.parse(body);
let js = json['js'];
// gulp task
return gulp.src(js)
.pipe(concat('main.min.js'))
.pipe(uglify())
.on('error', swallowError)
.pipe(gulp.dest('web/static'));
});
});
});
设置
将这些设置放置在config/static-file-manager.php
文件中。
filesList
- 包含在网站根目录(通常为web
目录)中的静态文件路径的数组。这些文件将被注入到前端站点。cpFileList
- 包含将在控制面板中注入的静态文件列表的数组。faviconPath
- Favicon文件的路径。cpFaviconPath
- 控制面板Favicon文件的路径。bustCache
- 是否应该缓存破坏文件。默认:true
。exposeJsonList
- 插件是否应该公开以JSON格式表示的文件列表。默认:false
。
由 Piotr Pogorzelski 提供