Layout chung

Giới thiệu

  • Layout là 1 file khai báo khung của toàn bộ website của bạn, thường bao gồm: favicon, logo, các thư viện (CSS, javascript, font), header, footer, main body.

  • main body: là phần chính chứa nội dung html được tạo từ các trang cụ thể, VD như: Trang chủ, trang chi tiết sản phẩm, trang danh mục sản phẩm.

Header

Favicon

Là dạng giúp gọn của logo giúp người dùng nhận diện thương hiệu dễ hơn

<link href="{{ getFavicon() }}" rel="shortcut icon" type="image/vnd.microsoft.icon">

  • Những code mặc định nên có

<meta charset="utf-8">
{{ headMeta().appendName('viewport', 'width=device-width, initial-scale=1.0').appendHttpEquiv('X-UA-Compatible', 'IE=edge')|raw }}
{{ showMetaTag() | raw}}

{% block meta %}{% endblock %}

CSS

Những style mặc định có sẵn của hệ thống

   '/css/bootstrap/bootstrap-5.3.3.min.css',
   '/css/fancybox-3.5.7/fancybox3.5.7.css',
   '/css/slick-slider/slick-theme.css',
   '/css/slick-slider/slick.css',

Cách lấy đường link style

Di chuột vào style mình định lấy đường link xong click vào mũi tên xuống bấm và lưu đường dẫn

Những style mà mình tự thêm vào

{{ loadBootstrapCss() | raw }}
{{ loadCommonCss() | raw }}

Javascript

Những js mặc định có sẵn của hệ thống

'/js/jquery/jquery.min.js',
'/js/bootstrap/bootstrap-5.3.3.bundle.min.js',
'/js/jquery/fancybox-3.5.7/fancybox3.5.7.js',
'/js/jquery/jquery.number.min.js',
'/js/jquery/jquery-ui-1.10.3.custom.min.js',
'/js/slick-slider/slick.min.js',

Những js mà mình tự thêm vào

{{ loadBootstrapJs() | raw }}
{{ loadCommonJs() | raw }}
{{ loadScripts({'position':'head'}) | raw }}

Cách lấy đường link js

Lấy tương tự như css

Body

<body>

{% include 'layout_header' %} 
    <main>
    {% block body %}{% endblock %} 
    {% include 'layout_footer' %}
    
    </main>    
    {{ loadScripts({'position':'body'}) | raw }}
    {{ loadViewMarketingEvent() | raw }}
</body>
PreviousGiới thiệuNextHeader

Last updated