거대한 웹 앱에서 작동하며 기본적으로 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에 대한 같은 곳이있다 {% 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] 정의 블록에 의해. 더 나은 렌더링은 말할 것도없고 코드를 훨씬 더 쉽게 관리 할 수 있습니다.
나는 이것이 컨트롤러를 통해 파일을 주입하는 것보다 훨씬 쉽고 깨끗하다고 믿습니다.
추신. 너무 많은 파일을 포함하는 것에 대해 유감스럽게 생각합니다. 가능한 한 명확하게하고 싶었습니다. 명확하지 않은 것이 있으면 큰 소리로 말하십시오.
행복한 깨끗한 코딩!
