enovatedesign/craft-style-inliner

用于在twig模板中内联CSS标签的行内和关键CSS。

维护者

详细信息

github.com/enovatedesign/craft-style-inliner

源代码

问题

安装次数: 54,432

依赖项: 0

建议者: 0

安全性: 0

星标: 7

关注者: 6

分支: 4

开放性问题: 1

类型:craft-plugin

4.1.1 2024-08-01 13:52 UTC

Requires

MIT b4d0d1f0853889cc9863f0a08ad1e7e39f6f2987

This package is auto-updated.

Last update: 2024-09-07 12:40:55 UTC

README

用于模板内联样式的Twig标签。

要求

此插件需要Craft CMS 4.0.2或更高版本。

安装

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

  1. 打开您的终端并转到您的Craft项目
cd /path/to/project
  1. 告诉Composer需要插件
composer require enovatedesign/craft-style-inliner
  1. 在控制面板中，转到设置 → 插件，然后点击“安装”按钮以安装Style Inliner。

用法

内联CSS

在您的模板中使用{% inlinecss %}{% endinlinecss %}标签对。

输入

{% inlinecss %}
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            h1 { color: red }
        </style>
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>
{% endinlinecss %}

输出

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            h1 { color:red }
        </style>
    </head>
    <body>
        <h1 style="color: red;">Hello, world!</h1>
    </body>
</html>

关键CSS

您可以使用{% criticalcss %}twig标签将整个本地CSS文件内联到文档的<head>部分。

{% extends "_layout.twig" %}

{% criticalcss 'home' %}

会自动添加.css扩展名。默认情况下，插件为@webroot/别名添加前缀，但可以在配置文件中配置。您还可以为每个环境完全开启或关闭关键CSS。

/config/style-inliner.php

<?php

return [
    'criticalCss' => true,
    'criticalPrefix' => '@webroot/resources/',
];