README

这是一个适用于 Slim 3.x 的简单 Twig 资产扩展，帮助您在 Twig 模板组件中管理资源。当您想要更改公共资源时，使用传统方式，您必须逐个更改每个模板 .twig 中的每个资源 URL。使用 TwigAsset，您无需担心这一点，只需简单更改即可将所有资源更改为新的 URL。此外，它还能帮助您对抗浏览器缓存的资源，通过在资源 URL 末尾设置后缀来自动化这一过程。它还能做更多的事情。

安装

通过 Composer

$ composer require lovecoding/twig-asset

需要 Slim 框架 3.x 和 PHP 7.0.0 或更高版本。

使用方法

设置

在 PHP 中

// Create Slim app
$app = new \Slim\App();

// Fetch DI Container
$container = $app->getContainer();

// Register Twig View helper
$container['view'] = function ($c) {
    $view = new \Slim\Views\Twig('path/to/templates');

    // Instantiate and add Slim specific extension
    $router = $c->get('router');
    $uri = \Slim\Http\Uri::createFromEnvironment(new \Slim\Http\Environment($_SERVER));
    $view->addExtension(new \Slim\Views\TwigExtension($router, $uri));

    $assetManager = new LoveCoding\TwigAsset\TwigAssetManagement([
        'verion' => '1'
    ]);
    $assetManager->addPath('css', '/css');
    $assetManager->addPath('img', '/images');
    $assetManager->addPath('js', '/js');
    $view->addExtension($assetManager->getAssetExtension());

    return $view;
};

// Define named route
$app->get('/home', function ($request, $response, $args) {
    return $this->view->render($response, 'home.html');
});

// Run app
$app->run();

在 home.html 中

在此版本中，TwigAsset 仅向您的 Twig 模板提供一项功能

- `asset(path, namespace)` - returns the real URL resource from your `path`.
    - path - your static `path`.
    - namespace - group the resource to only one name, the url will be shorted.

<!DOCTYPE html>
<html>
<head>
    <!-- absolute path -->
    <!-- result: href="/path/to/css1.css?v=1" -->
    <link rel="stylesheet" type="text/css" href="{{ asset('/path/to/css1.css') }}">

    <!-- relative path with prefix -->
    <!-- result: href="/css/path/to/css2.css?v=1" -->
    <link rel="stylesheet" type="text/css" href="{{ asset('path/to/css3.css', 'css') }}">
</head>
<body>
    <div>
        <!-- absolute path -->
        <!-- result: href="/path/to/images.png?v=1" -->
        <img src="{{ asset('/path/to/images.png') }}">

        <!-- relative path with prefix -->
        <!-- result: href="/images/path/to/images.jpg?v=1" -->
        <img src="{{ asset('path/to/images.jpg', 'img') }}">
    </div>
</body>

<!-- absolute path -->
<!-- result: href="/path/to/js2.js?v=1" -->
<script type="text/javascript" src="{{ asset('/path/to/js1.js') }}"></script>

<!-- relative path with prefix -->
<!-- result: href="js/path/to/js2.js?v=1" -->
<script type="text/javascript" src="{{ asset('path/to/js2.js', 'js') }}"></script>
</html>

示例设置

示例 1

$settings = [
    'version' => '1', // version will be setting in the end of asset url `css.css?(version_format here)`
    'version_format' => '%s?v=%s',
];

// in the html if you call asset('/image.png')
// the result: /v1/image.png?v=1

示例 2

$settings = [
    'version' => 'v1',
    'version_format' => '%2$s/%1$s',
];

// in the html if you call asset('/image.png')
// the result: /v1/image.png

示例 3

// rev-manifest.json
{
    "css/app.css": "build/css/app.b916426ea1d10021f3f17ce8031f93c2.css",
    "js/app.js": "build/js/app.13630905267b809161e71d0f8a0c017b.js",
    "...": "..."
}

$settings = [
    'json_manifest' => __DIR__.'/rev-manifest.json'
];

// in the html if you call asset('css/app.css')
// the result: css/app.b916426ea1d10021f3f17ce8031f93c2.css

许可证

MIT 许可证 (MIT)。请参阅许可证文件以获取更多信息。

lovecoding / twig-asset

维护者

详细信息

README

安装

使用方法

设置

示例设置

许可证