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

How to install asset manager for UserFrosting login system?

我使用 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 本地主机页面无法正常工作。我怎样才能找出问题所在? 以及如何安装资产管理器,userfrosting 中的控制台在哪里安装资产管理器?

您需要将相对路径添加到 initialize.php 中的 CSS 文件。 UserFrosting 0.3.1 有一个基本的资产管理系统,可以让您根据资产将出现在什么类型的页面上对资产进行分组。

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

然后,您可以在initialize.php中为"analytics"组注册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 Developers.
  • 了解有关优化客户端资源的更多信息

请注意,所有这些都将在 UF4 中发生变化,我们将使用 new asset management library,以及 Node.js 和 Gulp 来执行资产compilation/optimization.