craftsnippets/static-file-manager

将静态文件列表保存在PHP配置文件中。

3.1.1 2024-06-16 17:19 UTC

This package is not auto-updated.

Last update: 2024-09-22 18:36:02 UTC


README

需求

此插件需要Craft CMS 3.0.0-beta.23或更高版本。

安装

要安装插件,请按照以下说明操作。

  1. 打开您的终端并转到您的Craft项目

     cd /path/to/project
    
  2. 然后告诉Composer加载插件

     composer require craftsnippets/static-file-manager
    
  3. 在控制面板中,转到设置 → 插件,并单击“安装”按钮以安装资源清单。

概览

  • 此插件允许您将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 提供