Phần 2: Cài Đặt Voyager Page Blocks

Đây là mô-đun được thiết kế để cung cấp cho các nhà phát triển khả năng dễ dàng thiết kế các khối trang, Người dùng quản trị để xây dựng trang frontend tuyệt đẹp.

1: Điều Kiện

• Đã cài đăt Laravel
• Đã cài đăt Voyager

2: Cài Đặt

# . đên project laravel,mở terminal và gõ các lệnh sau
composer require pvtl/voyager-page-blocks

# 2. Cài đặt voyager-pages
php artisan  voyager-pages:install 

# 3. Cài đặt voyager-page-blocks
php artisan voyager-page-blocks:install

#4 .Cấp quyền cho project để tránh lỗi Permission denied!
sudo chmod -R 777 html(thư mục html chứa project laravel)

Giao diện sau khi cài đặt xong, nhưng khi chúng ta edit thì sẽ bị lỗi thiếu Feild meta_keywords 

Vào database thêm vào 1 field:meta_keywords

Lưu lại  và có thể edit page and block content

Thêm các Layout và block

Layout

Thư mục Layout

/var/www/html/voyager/vendor/pvtl/voyager-frontend/resources/views/layouts

Các block có sẵn

Các block

/var/www/html/voyager/vendor/pvtl/voyager-page-blocks/resources/views/block

3/ Demo xây dựng hiển thị các block ra trang chủ

VD: Trang Home đang trống

3.1 /Tạo và sửa đổi block

Các khối trang được tạo và định cấu hình theo 2 bước:Xác định khối - trong

/config/page-blocks.php

$blocks['Create_html'] = [
    'name' => 'Html',
    'template' => 'voyager-page-blocks::blocks.create_html',
    'fields' => [
        'content' => [
            'field' => "content",
            'display_name' => "Nhúng html",
            'partial' => 'voyager::formfields.rich_text_box',
            'required' => 1,
            'placeholder' => '<p>bạn có thể nhúng html vào đây.</p>',
        ],
    ],
];

3.2/Xây dựng bố cục HTML của khối - tạo file create_html.blade.php

/var/www/html/voyager/vendor/pvtl/voyager-page-blocks/resources/views/block

<div class="page-block">
    <div class="grid-container column text-center">
        {!! $blockData->content or '' !!}
    </div>
</div>

Sau đó vào  trang quản trị  chọn Page

Đây là block html vừa thêm vào

ví dụ:nhúng game con chym vào web

<embed src="http://game.24h.com.vn/upload/2014/2014-1/game/2014-02-08/Game_FlappyBird.swf" width="400" height="555" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent"></embed>

Nhúng code vào

Giao diện sau khi nhúng

Developer Controller Blocks

 
Xây dựng blocks này dành cho nhà phát triển, bạn cũng có thể tùy biến giao diện dựa trên các controller viết sẵn hoặc tự viết 1 controller mới
vd: hiển thị blocks hiển thị các bài post ra trang chủ

Hiển thị các bài viết từ 1 controller có sẵn

Pvtl\VoyagerFrontend\Http\Controllers\PostController::recentBlogPosts(2)
#recentBlogPosts(2) : Hiển thị ra 2 bài post
#1 :Blocks này có hiệu lực bạn cần chạy lệnh cài blog tại project
php artisan  voyager-blog:install
2 blog post vừa tạo

F5 mở lại trang chủ
Trang chủ

Kết Luận vậy là chúng ta đã hiểu được cách sử dụng Voyager Page Blocks,
trong các bài sau chúng ta sẽ tìm hiểu sâu hơn vào các controller.