在Symfony 3中自動包含動作專屬的JS/CSS

我經常有一些CSS規則和JavaScript函數僅用於單個控制器操作呈現的單個Twig文件中。我用單獨的文件的CSS規則和JavaScript的功能和它們的結構是這樣的：在Symfony 3中自動包含動作專屬的JS/CSS

我在這個軟件包包含frontAction和requestAction，渲染front.html.twig和request.html.twig有一個控制器Jd34TestController。這兩個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')來猜測css/js路徑似乎太冒險了。

來源

2016-10-09 jd34

我在巨大的網絡應用上工作，我基本上使用相同的結構，因爲我只在需要它們的樹枝文件中包含JS和CSS文件。有時你會發現某個JS插件只在某個頁面上需要，而不在其他插件上，因此只有在需要它的頁面上插入它纔有意義。這就是我所做的。

取決於功能和頁面的大小，應用程序是;我可以有一個base.html.twig文件和擴展base.html.twig文件的multilple 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在{% 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 %}

這裏的關鍵是使用[模板繼承（嫩枝繼承）] [1]通過定義塊。它會讓你的代碼更易於管理，更不用說更好的渲染了。

我相信這比通過控制器注入文件更簡單，更簡潔。

PS。對不起，包括這麼多的文件，我想盡可能更清楚，如果有什麼不清楚，給我一個留言。

快樂乾淨的編碼！

來源

2016-10-11 08:48:53 Medard

在Symfony 3中自動包含動作專屬的JS/CSS

回答

相關問題