2012-09-16 23 views
7

Tôi hiện đang phát triển một ứng dụng web bằng Symfony 2.1.0.Symfony2: Làm thế nào để bao gồm đúng tài sản kết hợp với thừa kế mẫu Twig?

Tôi đã đọc qua Templating chapter cuốn sách và tôi đang cố gắng bao gồm nội dung (ngay bây giờ, đó chỉ là một biểu định kiểu duy nhất) trong các trang web của tôi.

Tôi đang sử dụng Three-level inheritance system được đề cập trong cuốn sách, và cấu trúc ứng dụng của tôi hiện nay trông như thế này:

  • app/Resources/views/
    • base.html.twig : mẫu cơ sở, chứa tiêu đề, biểu định kiểunội dung khối.
  • src/My/PageBundle/Resources/views
    • layout.html.twig: layout template (mở rộng mẫu cơ sở), phụ stylesheet chính đến stylesheet khối, và ghi đè cơ thể khối, bao gồm navigation.html.twig và xác định một nội dung khối
    • bố trí admin.html.twig: điều tương tự như trên, nhưng trong đó có navigation-admin.html.twig
    • src/My/PageBundle/Resources/views/Main
      • mẫu tiêu chuẩn, mở rộng layout template và ghi đè lên nội dung của nó khối
    • src/My/PageBundle/Resources/views/Quản trị
      • mẫu quản trị. Tương tự như trên, nhưng mở rộng mẫu bố cục quản trị.
  • src// PageBundle/Resources/public/css
    • main.css của tôi: stylesheet chính

Như bạn thấy, tôi có đặt biểu định kiểu trong gói của tôi. Tôi không biết đây có phải là thực hành tốt hay không.

Bây giờ, có một điều, trong bố cục.html tôi thêm này:

{% block stylesheets %} 
    {{ parent() }} 

    <link rel="stylesheet" type="text/css" href="{{ asset('css/main.css)' }}" /> 
{% endblock %} 

Nhưng asset('css/main.css') chỉ được liên kết đến /css/main.css, trong khi ./app/console assets:install cài đặt các tài sản trong web/bundles/mypagebundle/. Tôi không thích thực tế theo cách này, tên gói của tôi sẽ hiển thị công khai (có thể khiến người dùng nghi ngờ tôi đang sử dụng Symfony và tôi thích giữ nội bộ trang web của tôi, tốt, nội bộ). Có thể thay đổi thư mục nơi assets:install sẽ cài đặt các tài sản không? Có vẻ tẻ nhạt với tôi khi cài đặt thủ công nội dung trong web /.

Tôi cũng đang nghĩ về việc sử dụng Assetic để quản lý nội dung, vì cá nhân tôi thích khả năng tự động rút ngắn tập lệnh/biểu định kiểu và lưu trữ tất cả chúng lại với nhau trong một tệp. Tuy nhiên, tôi nghe rằng điều này là không thể nếu bạn bao gồm bảng định kiểu ở các cấp khác nhau, tức là nó sẽ không hoạt động với hệ thống kế thừa ba cấp. Có thể làm việc xung quanh đó không? Ngoài ra, việc sử dụng Assetic có cho phép tôi ẩn tên nhóm của mình khỏi công chúng không?

Trả lời

4

Sử dụng assetic sẽ giải quyết tất cả các vấn đề của bạn.

tôi nghe rằng điều này không thể xảy ra nếu bạn bao gồm stylesheets ở các cấp khác nhau, tức là nó sẽ không hoạt động với ba cấp hệ thống thừa kế

Bạn có thể, nhưng nó sẽ tạo ra một file css cho mỗi cấp độ (giống như với nội dung(), thực sự).

Ví dụ:

bố trí:

{% block stylesheets %} 
    {{ parent() }} 
    {% stylesheets 'main.css' %} 
     <link rel="stylesheet" type="text/css" href="{{ asset_url }}" /> 
    {% endstylesheets %} 
{% endblock %} 

phụ mẫu:

{% block stylesheets %} 
    {{ parent() }} 
    {% stylesheets 'sub.css' %} 
     <link rel="stylesheet" type="text/css" href="{{ asset_url }}" /> 
    {% endstylesheets %} 
{% endblock %} 

kết quả:

<link rel="stylesheet" type="text/css" href="..." /> 
<link rel="stylesheet" type="text/css" href="..." /> 

Ngoài ra phụ mẫu hoàn toàn có thể ghi đè lên các stylesheets Blo ck, do đó chỉ có một kiểu được tạo ra (nhưng nó ít khô):

{% block stylesheets %} 
    {% stylesheets 'main.css' 'sub.css' %} 
     <link rel="stylesheet" type="text/css" href="{{ asset_url }}" /> 
    {% endstylesheets %} 
{% endblock %} 

kết quả (trong sản xuất/không debug):

<link rel="stylesheet" type="text/css" href="..." /> 
+0

Vì vậy, nó là không có cách nào có thể có keo Assetic tất cả stylesheets ở tất cả các cấp với nhau? Bởi vì với phương pháp thứ hai, tôi sẽ phải thay đổi TẤT CẢ các mẫu con nếu tôi quyết định thêm một biểu định kiểu khác ở cấp cao nhất, phải không? –

+0

Phải. Bạn cũng có thể xác định nội dung 'chính' trong config.yml (xem tài liệu) và tham chiếu tài sản này thay vì tham chiếu trực tiếp main.css. Bằng cách này, bạn có thể thay đổi nội dung chính mà không phải thay đổi tất cả các mẫu. – arnaud576875

+0

Cảm ơn bạn. Trên một mặt lưu ý, phần còn lại của cấu trúc ứng dụng của tôi trông giống như thực hành tốt cho bạn hay có cái gì đó tôi đang thiếu? –

Các vấn đề liên quan