adigital/critical-css

无需SSH访问即可生成关键CSS

维护者

详细信息

github.com/a-digital/critical-css

源代码

问题

文档

安装次数: 3,174

依赖项: 0

建议者: 0

安全: 0

星标: 7

关注者: 3

分叉: 1

开放问题: 1

类型:craft-plugin

1.0.6 2020-11-04 09:54 UTC

Requires

MIT 426dd1f1e6986a8191db98949bc2a5fe0267fd84

cmsCraftcraftcmscraft-plugincritical css

This package is auto-updated.

Last update: 2024-09-04 20:06:13 UTC

README

无需SSH访问即可生成关键CSS。

Logo

需求

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

安装

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

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

     cd /path/to/project

  2. 然后告诉Composer加载插件

     composer require adigital/critical-css

  3. 在控制面板中，转到设置→插件，并点击“安装”按钮安装Critical CSS。

关键CSS概述

此插件专为没有SSH访问权限的Craft 3用户或无法在服务器上安装Gulp的用户设计。如果您可以的话，我们仍然建议使用Gulp生成关键CSS，但此工具已被制作，以确保没有人被排除在外。

配置关键CSS

使用插件设置页面输入您的URL和模板。

使用关键CSS

转到CP部分生成您的关键CSS。然后您需要将以下内容添加到您的模板中

这将被放入模板中

{% block criticalCss %}
	<style>
		{{ source('folder/template_critical.min.css', ignore_missing = true) }}
	</style>
{% endblock %}

请确保将文件夹/模板替换为您在插件设置中使用的模板路径。例如，blog/entry将变为：blog/entry_critical.min.css

这将被放入布局中

{% set critical = block('criticalCss') %}
{% if critical is defined and critical is not empty %}
	{{ critical|raw }}
{% endif %}

此代码位于头部，在调用样式表之前。您还可以在样式表标签中添加 {% if critical is not empty %}rel="preload" as="style"{% else %}rel="stylesheet"{% endif %}，并在JS中执行以下操作

$("link[rel='preload']").each(function(){
	$(this).clone().attr("rel", "stylesheet").appendTo("head");
});

请注意：这只是获取关键CSS运行起来的一种示例。还有其他实现方式，您可以在各种博客文章中找到。我们只是为您提供文件生成方式，具体实现方式完全由您决定！

关键CSS路线图

一些要做的事情和潜在功能的想法

  • 修复生成所有功能并取消注释此按钮。

由A Digital提供