如何为UserFrosting登录系统安装资产管理器？

Question

我使用userFrosting作为我的登录系统，我有问题，包括css文件。我用了这个代码

{% block stylesheets %}
{{ parent() }}

<link href="{{ asset('css/style.css') }}" rel="stylesheet">
{% endblock %}

或者这个；

{% block stylesheets %}
{{ parent() }}

{{ asset('css/style.css') }}
{% endblock %}

或者这个；

{% block stylesheets %}
{{ parent() }}

<link href="css/style.css" rel="stylesheet">
{% endblock %}

但是我不能包括css，页面显示Error500本地主页不能工作。我怎么才能弄清楚问题出在哪里？以及如何安装资产管理器，控制台在何处安装资产管理器？

Answer 1

您需要将相对路径添加到initialize.php中的CSS文件中。UserFrosting 0.3.1有一个基本的资产管理系统，它允许您根据资产将出现在哪些类型的页面对资产进行分组。

例如，假设您希望加载一些CSS和Javascript库，以便在所有“分析”页面上呈现图表。要将页面分配给“分析”组，您可以将{% set page_group = "analytics" %}添加到页面Twig模板的顶部。

然后，您可以在initialize.php中为“分析”组注册CSS和JS资产。

$app->hook('includes.css.register', function () use ($app){

    ...

    $app->schema->registerCSS("analytics", "supercharts/supercharts.css");
    $app->schema->registerCSS("analytics", "supercharts-custom.css");
});

$app->hook('includes.js.register', function () use ($app){

    ...

    $app->schema->registerJS("analytics", "supercharts/supercharts.js");
});

有几件事值得注意：

• 所有CSS资产必须放在public/css中，所有JS资产必须放在public/js中。
• common组中的资产将与每个页面一起加载。
• 您可以在站点设置中使用生成工具来缩小和连接每个页面组中的资产。这将帮助您的网站加载更快，并产生更好的用户体验。您可以在Google开发人员上了解有关优化客户端资源的更多信息。

请注意，在UF4中，所有这些都将发生变化，在这里，我们将使用https://github.com/userfrosting/assets以及Node.js和Gulp来执行资产编译/优化。