0

我经常有一些 CSS 规则和 JavaScript 函数，它们仅在由单个控制器操作呈现的单个 Twig 文件中使用。我为这些 CSS 规则和 JavaScript 函数使用单独的文件，并像这样构造它们：

捆绑文件结构

我Jd34TestController在这个捆绑包中有一个控制器，其中包含frontActionand requestAction，渲染front.html.twigand request.html.twig。两个 Twig 文件都包含一个常见的 Twig 文件，app/Resources/views/base.html.twig. 我正在寻找一种自动（神奇地）包含Jd34Test/front.js和Jd34Test/front.css何时Jd34Test/front.html.twig呈现的方法，并且对于请求操作和任何其他操作都是相同的。如果这些 css/js 文件中的任何一个不存在，它应该跳过包含并且不抛出异常。

自动化的最佳方法是什么？我尝试使用Twig_Extension函数和宏，但是根据$this->requestStack->getCurrentRequest()->get('_controller').

4

1 回答 1

0

我在大型网络应用程序上工作，我基本上使用与您相同的结构，我只在需要它们的 twig 文件中包含 JS 和 CSS 文件。有时你会发现某个 JS 插件只在某个页面上需要，而在其他页面上不需要，因此只在需要它的页面上插入它才有意义。这就是我所做的。

根据功能和页面的大小，应用程序的大小；我可以有一个 base.html.twig 文件和多个扩展 base.html.twig 文件的 layout.html.twig 文件。这样，base.html.twig 就只有所有 layout.html.twig 文件需要的 css 和 js 文件。然后每个 layout.html.twig 文件包含所有扩展它的文件所需的 JS 和 CSS 文件。假设您有三个页面扩展了某个 layout.html.twig 文件，它们都将具有该 layout.html.twig 文件的 JS 和 CSS，并且每个页面都可以添加所需的额外 JS 和 CSS。

这是我的做法：

base.html.twig 看起来像这样：

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8">
    {% block mainPageTitle %}
        <title>Snappic | Photobooth Software</title>
    {% endblock %}
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    {% stylesheets
    "bundles/snappicadmin/css/layout/components-md.css"
    "bundles/snappicadmin/plugins/bootstrap/css/bootstrap.css"
    "bundles/snappicadmin/plugins/web-icons/web-icons.min.css"
    "bundles/snappicadmin/css/layout/layout.css"%}

    <link rel="stylesheet" href="{{ asset_url }}" />

    {% endstylesheets %}

    <!-- END GLOBAL MANDATORY STYLES -->

    <!-- BEGIN PAGE SPECIFIC STYLES -->

    {% block pageCSS %}
    {% endblock %}

    <!-- END PAGE STYLES -->


    <link rel="icon" href="{{ asset('bundles/snappicadmin/images/icon/plain_logo-32x32.png') }}" sizes="32x32" />

</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->

<body class="page-md">

    <!-- GENERAL LAYOUT CONTENT HERE e.g Main menu -->


    {% block content %}
    {% endblock %}

<!-- BEGIN JAVASCRIPTS -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
{% javascripts
"@SnappicAdminBundle/Resources/public/plugins/respond.min.js"
"@SnappicAdminBundle/Resources/public/plugins/excanvas.min.js"%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<![endif]-->

{% javascripts
"@SnappicAdminBundle/Resources/public/plugins/fullcalendar/lib/moment.min.js"
"@SnappicAdminBundle/Resources/public/plugins/jquery.browser.min.js"
"@SnappicAdminBundle/Resources/public/js/utilities/utilities.js"
"@SnappicAdminBundle/Resources/public/plugins/jquery.min.js"%}

<script src="{{ asset_url }}"></script>

{% endjavascripts %}


{% block pagescript %}
{% endblock %}


<script>

    jQuery(document).ready(function() {
        App.init(); 
        Layout.init(); 

        initSlideOut();
    });
</script>
<!-- END JAVASCRIPT -->
</body>
<!-- END BODY -->
</html>

请注意{% block pageCSS %}，这是您的页面特定 CSS 的所在，对于 JS 中的 JS 也是如此{% block pagescript %}。

下面是扩展 base.html.twig 的页面的样子：

{% extends "@SnappicAdmin/Layout/base.html.twig" %}

{% block mainPageTitle %}<title>Snappic - Dashboard</title>{% endblock %}

{% block pageCSS %}
    {% stylesheets
    "bundles/snappicadmin/css/layout/plugins.min.css"
    "@SnappicAdminBundle/Resources/public/css/dashboard/dashboard.css"%}

    <link rel="stylesheet" href="{{ asset_url }}" />

    {% endstylesheets %}
{% endblock %}

 {% block content %}
     <!-- BEGIN PAGE CONTENT INNER -->
        This is where your page content goes
     <!-- END PAGE CONTENT INNER -->
{% endblock %}

 {% block pagescript %}
     {% javascripts
     "bundles/snappicadmin/plugins/fullcalendar/lib/moment.min.js"
     "@SnappicAdminBundle/Resources/public/js/dashboard/dashboard.js"
     %}

     <script src="{{ asset_url }}"></script>

     {% endjavascripts %}

 {% endblock %}

这里的关键是通过定义块来使用[模板继承（Twig继承）][1]。它将使您的代码更易于管理，更不用说更好的渲染了。

我相信这比通过控制器注入文件更容易和更干净。

PS。很抱歉包含这么多文件，我想让它尽可能清晰，如果有什么不清楚的地方，请大声疾呼。

快乐干净的编码！

于 2016-10-11T08:48:53.007 回答