Cách sử dụng layout trong yii2 framework, thường thì các framework sẽ có một file layout chính sau đó các phần như header, content và footer sẽ được gọi vào layout
Trong Yii2 framework cũng vậy, Layout chính là file frontend\views\layouts\main.php trong file main.php ta sẽ đi từng phần một.
Ở đây mình sẽ chia các folder trong frontend\view theo cấu trúc như sau
- File layout/main.php sẽ là layout chính của toàn trang web
- Partials chứa file header.php và footer cố định của trang web
Mở file frontend\views\layouts\main.php lên ta sẽ thấy có các phần sau
1. Thư viện helper của yii2
Phần này chứa các helper của yii2 framework như là Html để tạo form, NavBar menu, Breadcrumbs...
2. Phần head chứa thẻ title, css và javascript
Thư viện Asset dùng để gọi css và javascript, nó sẽ load file css và javascript từ folder frontend\web
3. Phần body của layoutPhần này ta sẽ chia ra làm 3 phần nhỏ, tùy vào bố cục layout của bạn như thế nào bạn chia làm các phần khác nhau, còn theo layout ở bài này thì
- Phần header : phần đầu của trang web bao gồm các phần như là logo, menu, banner... phần này cố định
- Phần content : phần này sẽ chứa view theo từng controller, phần này động sẽ load theo từng controller
- Phần footer : phần footer là cố định
Trong thẻ <body> của file frontend\views\layouts\main.php sẽ có 3 phần chính
Bạn có thể xem hình vẽ này để hiểu rõ hơn
- Phần <?= $content ?> là phần động, khi bạn chạy một controller nào đó, view của controller này sẽ được load vào file main.php thông qua biến <?= $content ?>
- Khi ta chạy một controller nào đó thì tất cả các phần header, left menu, footer đều cố định, chỉ có phần content là thay đổi.
Ở đây mình sẽ chia các folder trong frontend\view theo cấu trúc như sau
- File layout/main.php sẽ là layout chính của toàn trang web
- Partials chứa file header.php và footer cố định của trang web
Mở file frontend\views\layouts\main.php lên ta sẽ thấy có các phần sau
1. Thư viện helper của yii2
Phần này chứa các helper của yii2 framework như là Html để tạo form, NavBar menu, Breadcrumbs...
1
2
3
4
5
6
7
8
9
10
11
| <?phpuse yii\helpers\Html;use yii\bootstrap\Nav;use yii\bootstrap\NavBar;use yii\widgets\Breadcrumbs;use frontend\assets\AppAsset;use common\widgets\Alert;AppAsset::register($this);?> |
2. Phần head chứa thẻ title, css và javascript
Thư viện Asset dùng để gọi css và javascript, nó sẽ load file css và javascript từ folder frontend\web
1
2
3
4
5
6
7
| <head> <meta charset="<?= Yii::$app->charset ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?= Html::csrfMetaTags() ?> <title><?= Html::encode($this->title) ?></title> <?php $this->head() ?></head> |
3. Phần body của layoutPhần này ta sẽ chia ra làm 3 phần nhỏ, tùy vào bố cục layout của bạn như thế nào bạn chia làm các phần khác nhau, còn theo layout ở bài này thì
- Phần header : phần đầu của trang web bao gồm các phần như là logo, menu, banner... phần này cố định
- Phần content : phần này sẽ chứa view theo từng controller, phần này động sẽ load theo từng controller
- Phần footer : phần footer là cố định
Trong thẻ <body> của file frontend\views\layouts\main.php sẽ có 3 phần chính
1
2
3
4
5
6
7
| <body> <?php echo $this->render('//partials/header'); ?> <?= $content ?> <?php echo $this->render('//partials/footer'); ?></body> |
Bạn có thể xem hình vẽ này để hiểu rõ hơn
- Phần <?= $content ?> là phần động, khi bạn chạy một controller nào đó, view của controller này sẽ được load vào file main.php thông qua biến <?= $content ?>
- Khi ta chạy một controller nào đó thì tất cả các phần header, left menu, footer đều cố định, chỉ có phần content là thay đổi.
EmoticonEmoticon