AdminLte เป็นธีมที่สวยงามน่าใช้งาน มีเลเอาท์ต่างๆ พร้อมใช้งาน และที่สำคัญฟรี ด้วย และตอนนี้ก็มีคนสร้าง AdminLTE Asset สำหรับใช้กับ yii2 เท่าที่ลองใช้งาน พบว่าสะดวกมากๆ ไปลองใช้กัน ^ ^

การติดตั้ง

ง่ายมากๆ ก่อนอื่นติดตั้งตัว Extension ก่อน

composer require dmstr/yii2-adminlte-asset "2.*"

ถ้าหากดูตามตัวอย่างใน https://github.com/dmstr/yii2-adminlte-asset จะให้ชี้ไปที่ path view @vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app

'components' => [
    'view' => [
         'theme' => [
             'pathMap' => [
                '@app/views' => '@vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app'
             ],
         ],
    ],
],

ข้อเสียของวิธีนี้คือเราจะไม่สามารถแกไข layout view ได้เลย หากเราไปแก้ไขไฟล์ที่ path @vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app โดยตรง จริงๆ ก็สามารถทำได้ แต่เมื่อมีการอัพเดท ก็จะทำให้ข้อมูลส่วนที่เราแก้ไขถูกทับด้วยไฟล์ใหม่ๆ เพราะฉะนั้นผมแนะนำว่าไม่ควรที่จะไปแก้ไฟล์ อะไรก็ตามที่ @vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app

แต่ถ้าหากมั่นใจว่าไม่แก้ไข view เลย ก็สามารถตั้งค่า ตาม path นี้ได้

ในส่วนตัวผมแนะนำให้ทำการ copy ไฟล์ view มาไว้ที่ application เพื่อให้สามารถแก้ไข view ได้ หรือปรับแต่งตามความต้องการได้

ให้ทำการสร้างโฟลเดอร์ ตามนี้

  • แบบ Basic สร้างโฟลเดอร์ตามนี้ /themes/adminlte
  • แบบ Advance
    • Backend สร้างโฟลเดอร์ตามนี่ /backend/themes/adminlte
    • Frontend สร้างโฟลเดอร์ตามนี่ /frontend/themes/adminlte

จากนั้นทำการ copy โฟลเดอร์ views,layouts จาก @vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app มาไว้ที่ themes/adminlte/ ทีเราสร้างขึ้น

หลังจากสร้างและ copy ไฟล์มาแล้วเราจะได้โครงสร้างโฟลเดอร์แบบนี้ ซึ่งก็แล้วแต่ว่าเราจะใช้แบบใหน ใช้เฉพาะ fontend ก็ตั้งค่า เฉพาะ fontend

หากคุณใช้ Basic

- basic
    - themes/adminlte
        - layouts
        - site

หากคุณใช้ที่ frontend

- advance
    - frontend
        - themes/adminlte
            - layouts
            - site

หากคุณใช้ที backend

- advance
    - backend
        - themes/adminlte
            - layouts
            - site

หลังจากนั้นให้ทำการตั้งค่าในส่วนของการตั้งค่า เพื่อทำการเรียกใช้งาน theme

App Basic

ตั้งค่า config ได้ที่ config/main.php

'components' => [
    'view' => [
         'theme' => [
             'pathMap' => [
                '@app/views' => '@app/themes/adminlte'
             ],
         ],
    ],
],

App Advance : Frontend

ตั้งค่า config ได้ที่ frontend/config/main.php

'components' => [
    'view' => [
         'theme' => [
             'pathMap' => [
                 '@frontend/views' => '@frontend/themes/adminlte'
             ],
         ],
    ],
],

App Advance : Backend

ตั้งค่า config ได้ที่ backend/config/main.php

'components' => [
    'view' => [
         'theme' => [
             'pathMap' => [
                 '@backend/views' => '@backend/themes/adminlte'
             ],
         ],
    ],
],

Advance ใช้ Adminlte ทั้ง frontend & backend โดยใช้ view ร่วมกัน

วิธีนี้คือการใช้งาน view ของ adminte ร่วมกันทั้ง fontend & backend

  • สร้่าง โฟลเดอร์ themes/adminlte ที่ /common จะได้ `/common/themes/adminlte
  • copy โฟลเดอร์จาก @vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app มีอยู่ 2 โฟลเดอร์ มี layouts กับ site
  • copy โฟลเดอร์มาไว้ที่ /common/themes/adminlte/
  • ทำการตั้งค่า config ดังนี้ ทั้ง frontend & backend

อย่าลืมว่า ทั้ง frontend และ backend ใช้ view adminlte ร่วมกัน เมื่อมีการแก้ไข ทั้ง frontend และ backend ก็จะถูกเปลี่ยนตามไปด้วย

'view' => [
             'theme' => [
                 'pathMap' => [
                    '@app/views' => '@common/themes/adminlte'
                 ],
             ],
        ],

จากนั้นก็ทดลองใช้งานได้เลยง่าย สะดวกมากๆ

เปลี่ยน skin AdminLTE

AdminLTE มี skin มาใช้ใช้หลายแบบมากๆ เราสามารถเปลี่ยน skin ได้ง่ายๆ โดยเปิดไฟล์ themes/adminlte/layouts/main.php และทำการค้นหาแท็ก body จะพบ skin default คือ skin-blue

 <body class="skin-blue sidebar-mini">

สามารถเปลี่ยนเป็นแบบต่างๆ ได้ดังนี้

"skin-blue",
"skin-black",
"skin-red",
"skin-yellow",
"skin-purple",
"skin-green",
"skin-blue-light",
"skin-black-light",
"skin-red-light",
"skin-yellow-light",
"skin-purple-light",
"skin-green-light"