Html 如何使用包装器将CSS文件应用于Catalyst webapp中的特定模板_Html_Css_Perl_Templates_Catalyst

Html 如何使用包装器将CSS文件应用于Catalyst webapp中的特定模板

html css perl templates

Html 如何使用包装器将CSS文件应用于Catalyst webapp中的特定模板,html,css,perl,templates,catalyst,Html,Css,Perl,Templates,Catalyst,我真的不明白包装器是怎么工作的。我理解catalyst教程的示例，但不知道如何将特定CSS文件应用于特定模板。我应该在wrapper.tt中使用[%IF%]语句来选择特定模板吗？我是否像调用控制器中的模板一样，使用stash调用CSS文件一些示例或提示将非常有用，谢谢您当然可以将CSS文件分配给控制器中的一个隐藏变量 sub frobnicate :Local { my ($self, $c) = @_; # ... # this would probably b

我真的不明白包装器是怎么工作的。我理解catalyst教程的示例，但不知道如何将特定CSS文件应用于特定模板。我应该在wrapper.tt中使用[%IF%]语句来选择特定模板吗？我是否像调用控制器中的模板一样，使用stash调用CSS文件

一些示例或提示将非常有用，谢谢

您当然可以将CSS文件分配给控制器中的一个隐藏变量

sub frobnicate :Local {
    my ($self, $c) = @_;

    # ...

    # this would probably be implied, i.e. in a properly configured Catalyst
    # you don't have to actually set this, it will just load the right thing
    $c->stash->{template} = 'frobnicate'; 

    # this one is for loading the right CSS
    $c->stash->{css_file} = 'frobnication.css';
}

然后在TT包装中，可能包装在

[%IF css_file%]…[%END%]

中：

<head>
    <link rel="stylesheet" href="[% css_file %]">
</head>

现在，您可以在模板文件中使用它。您可以在每个文件的最上面或最下面有一个块，将CSS文件添加到文件列表中，这些文件应该在逻辑上属于它们的地方加载

<h1>Order Confirmation</h1>
[% add_css_file('confirmation.css') %]

订单确认
[%add_css_文件（'confirmation.css'）%]

在包装器中，您可以迭代文件列表并加载每个文件。正如您所见，这种方法的好处是允许您拥有多个文件

<head>
  [% FOREACH file IN _css_files %]
    <link rel="stylesheet" href="[% file %]">
  [% END %]
</head>


[%FOREACH文件在[u css\u文件%]
[%END%]

它们将在隐藏中可用，因为包装器在页面的内部部分之后呈现，但您不能直接从模板执行，因为您无法在模板工具箱中更改隐藏。如果没有文件，这将不起任何作用，因为循环没有可迭代的内容

注意我如何调用隐藏键

\u css\u文件

。下划线

表示它是一个私有变量。Perl没有私有或公共的概念，但这是告诉其他开发人员不要搞砸这件事的惯例
现在最好在视图中添加第二个方法来读取列表并返回它。这将使文件列表存储方式的实现细节与模板完全分离。您可以完全更改它，而不必触摸模板文件
如果您有这个公开的方法，那么最好确保每个文件只包含一次，例如使用List:：Util:：uniq
，或者使用散列并访问键而不是数组
我最初将这种方法用于javascript文件，而不是CSS。对于应用程序中的CSS，我相信将所有样式压缩到一个文件中并缩小它会更明智。你的用户无论如何都会下载其中的大部分，那么为什么要增加加载多个文件的开销，使每个初始页面的加载速度变慢，并破坏他们的缓存呢，如果您只需将第一页的加载时间稍微延长一点，然后从缓存中读取所有内容？
您当然可以将CSS文件分配给控制器中的一个隐藏变量
sub frobnicate :Local {
    my ($self, $c) = @_;

    # ...

    # this would probably be implied, i.e. in a properly configured Catalyst
    # you don't have to actually set this, it will just load the right thing
    $c->stash->{template} = 'frobnicate'; 

    # this one is for loading the right CSS
    $c->stash->{css_file} = 'frobnication.css';
}

然后在TT包装中，可能包装在[%IF css_file%]…[%END%]
中：
<head>
    <link rel="stylesheet" href="[% css_file %]">
</head>

现在，您可以在模板文件中使用它。您可以在每个文件的最上面或最下面有一个块，将CSS文件添加到文件列表中，这些文件应该在逻辑上属于它们的地方加载
<h1>Order Confirmation</h1>
[% add_css_file('confirmation.css') %]

订单确认
[%add_css_文件（'confirmation.css'）%]

在包装器中，您可以迭代文件列表并加载每个文件。正如您所见，这种方法的好处是允许您拥有多个文件
<head>
  [% FOREACH file IN _css_files %]
    <link rel="stylesheet" href="[% file %]">
  [% END %]
</head>


[%FOREACH文件在[u css\u文件%]
[%END%]

它们将在隐藏中可用，因为包装器在页面的内部部分之后呈现，但您不能直接从模板执行，因为您无法在模板工具箱中更改隐藏。如果没有文件，这将不起任何作用，因为循环没有可迭代的内容
注意我如何调用隐藏键\u css\u文件
。下划线表示它是一个私有变量。Perl没有私有或公共的概念，但这是告诉其他开发人员不要搞砸这件事的惯例
现在最好在视图中添加第二个方法来读取列表并返回它。这将使文件列表存储方式的实现细节与模板完全分离。您可以完全更改它，而不必触摸模板文件
如果您有这个公开的方法，那么最好确保每个文件只包含一次，例如使用List:：Util:：uniq
，或者使用散列并访问键而不是数组
我最初将这种方法用于javascript文件，而不是CSS。对于应用程序中的CSS，我相信将所有样式压缩到一个文件中并缩小它会更明智。你的用户无论如何都会下载其中的大部分，那么为什么要增加加载多个文件的开销，使每个初始页面的加载速度变慢，并破坏他们的缓存呢，如果你能让第一页加载的时间稍微长一点，然后从缓存中读取所有内容？
通常你会在HTML中使用
标记来加载CSS文件，例如，看看大多数网站？是的，但是如果我有3个CSS文件用于3个不同的模板。我如何/在何处指定“x.css”应用于“x.tt”？Ping。我无意中删除了我过早发布的答案。现在已经完成了。通常你会在HTML中使用
标记来加载CSS文件，例如，看看大多数网站？是的，但是如果我有3个CSS文件用于3个不同的模板。我如何/在何处指定“x.css”应用于“x.tt”？Ping。我无意中删除了我过早发布的答案。现在已经完成了。谢谢你的回答。因此，如果我理解得很好，那么制作一个像catalyst教程中那样的主CSS文件并不是一个问题。无论显示的模板是什么，所有不同的样式都将正确应用于我的内容。@KSoze yes，of