0

単一のコントローラー アクションによってレンダリングされる単一の Twig ファイルでのみ使用される CSS ルールと JavaScript 関数がいくつかあることがよくあります。これらの CSS ルールと JavaScript 関数に別のファイルを使用し、次のように構造化します。

バンドル ファイルの構造

Jd34TestControllerこのバンドルには、frontActionとrequestAction、レンダリング、 を含むコントローラーが 1 つfront.html.twigありrequest.html.twigます。両方の Twig ファイルには、共通の Twig ファイルapp/Resources/views/base.html.twig. 私は自動的に (魔法のように) を含める方法を探していJd34Test/front.jsます。これらの css/js ファイルのいずれかが存在しない場合は、それを含めてスキップし、例外をスローしないようにする必要があります。Jd34Test/front.cssJd34Test/front.html.twig

これを自動化するための最良のアプローチは何ですか? Twig_Extension関数やマクロを使ってみたのですが、 の戻り値からcss/jsのパスを推測するのはリスクが高そうです$this->requestStack->getCurrentRequest()->get('_controller')。

4

1 に答える 1

0

私は巨大な Web アプリに取り組んでおり、基本的にあなたと同じ構造を使用しており、必要な小枝ファイルに 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 ファイルを拡張する 3 つのページがあるとします。それらはすべてその 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 %}

ここでポイントとなるのが、ブロック定義による【テンプレート継承（Twig継承）】【1】の使い方です。レンダリングの改善は言うまでもなく、コードをより管理しやすくします。

これは、コントローラーを介してファイルを挿入するよりもはるかに簡単でクリーンだと思います。

PS。非常に多くのファイルを含めて申し訳ありません。できるだけ明確にしたかったのですが、不明な点があれば、声をかけてください。

ハッピークリーンコーディング！

于 2016-10-11T08:48:53.007 に答える