yii2 adminlte asset

ชุดสินทรัพย์ AdminLTE

UI แบ็กเอนด์สำหรับ Yii2 Framework อิงจาก AdminLTE

แพ็คเกจนี้ประกอบด้วย Asset Bundle สำหรับ Yii 2.0 Framework ซึ่งลงทะเบียนไฟล์ CSS สำหรับอินเทอร์เฟซผู้ใช้ AdminLTE

ไฟล์ CSS ได้รับการติดตั้งผ่านการใช้งานที่แนะนำของ Yii สำหรับ fxp/composer-asset-plugin v1.1.1 หรือใหม่กว่า

การติดตั้ง

วิธีที่แนะนำในการติดตั้งส่วนขยายนี้คือผ่านผู้แต่ง

ในการติดตั้ง AdminLTE v2 ให้รัน:

 composer require dmstr/yii2-adminlte-asset "^2.1"

ในการติดตั้ง AdminLTE v1 ให้รัน:

 composer require dmstr/yii2-adminlte-asset "^1"

คำถามที่พบบ่อย

การใช้แบบอักษรบนเว็บ

AdminLTE ยกเลิกการรวมแบบอักษรบนเว็บใน 2.4.0 ดังนั้นคุณต้องรวมแบบอักษรที่คุณต้องการด้วยตนเอง เช่น

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

ไม่แนะนำให้รวมผ่าน CDN สำหรับการผลิต โปรดปรับสิ่งนี้ให้เข้ากับเวิร์กโฟลว์การรวมกลุ่มสินทรัพย์ของโปรเจ็กต์ของคุณ

ดูรายละเอียด #140

กำลังอัปเกรด

เมื่ออัปเกรด โปรดดูคู่มือการอัปเกรด AdminLTE สำหรับการปรับเปลี่ยนที่คุณต้องทำในมุมมองของคุณ

การติดตั้งนักแต่งเพลง

• สำหรับปัญหาเกี่ยวกับ DmitryBaranovskiy/eve.git โปรดดู #128 และ #113

เมทริกซ์ความเข้ากันได้

yii2-adminlte-asset	ผู้ดูแลระบบLTE	แบบอักษรที่ยอดเยี่ยม
2.4	2.0 - 2.3	ที่จำเป็น
2.5	2.4	ที่จำเป็น
3.0	2.4	-

สำหรับปัญหาอื่นๆ โปรดค้นหา GitHub ก่อน

เริ่มต้นอย่างรวดเร็ว

เมื่อติดตั้งส่วนขยายแล้ว คุณสามารถ ดูตัวอย่าง ได้โดยกำหนดค่าการแมปเส้นทางขององค์ประกอบมุมมองใหม่:

สำหรับเทมเพลตแอปพลิเคชันขั้นสูง Yii 2 หรือเทมเพลตแอปพลิเคชันพื้นฐาน

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

สำหรับการสมัคร phd5

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

ชุดสินทรัพย์นี้มีไฟล์ตัวอย่างสำหรับเค้าโครงและมุมมอง (ดู examples/ ) ซึ่ง ไม่ได้ถูกกำหนดให้ปรับแต่งโดยตรงใน vendor/ โฟลเดอร์

ดังนั้นจึงขอแนะนำให้ คัดลอกมุมมองลงในแอปพลิเคชันของคุณ และปรับเปลี่ยนตามความต้องการของคุณ

การปรับแต่ง

• คัดลอกไฟล์จาก vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app (หรือธีมอื่น) ไปที่ @app/views
• ลบการกำหนดค่า view ที่กำหนดเองออกจากแอปพลิเคชันของคุณโดยการลบการแมปเส้นทาง หากคุณเคยสร้างมาก่อน
• แก้ไขมุมมองของคุณที่สอดคล้องกับ vendor/almasaeed2010/adminlte/pages

ปลั๊กอิน AdminLTE

เนื้อหาสำหรับปลั๊กอิน AdminLTE จะไม่รวมอยู่ใน AdminLteAsset ของเรา แต่คุณสามารถค้นหาไฟล์เหล่านี้ได้ในไดเรกทอรีผู้จำหน่ายของคุณภายใต้ vendor/almasaeed2010/adminlte/plugins ดังนั้น หากคุณต้องการใช้สิ่งใดสิ่งหนึ่ง เราขอแนะนำให้สร้างชุดแบบกำหนดเองที่คุณแสดงรายการไฟล์ปลั๊กอินที่คุณต้องการ:

 use yii  web  AssetBundle ;
class AdminLtePluginAsset extends AssetBundle
{
    public $ sourcePath = ' @vendor/almasaeed2010/adminlte/plugins ' ;
    public $ css = [
        ' chart.js/Chart.min.css ' ,
        // more plugin CSS here
    ];
    public $ js = [
        ' chart.js/Chart.bundle.min.js '
        // more plugin Js here
    ];
    public $ depends = [
        ' dmstradminltewebAdminLteAsset ' ,
    ];
}

เนื่องจากสินทรัพย์นี้ขึ้นอยู่กับ AdminLteAsset ของเรา จึงเป็นสินทรัพย์เดียวที่คุณต้องลงทะเบียน เช่น ในไฟล์เลย์เอาต์ main.php ของคุณ

ส่วนหัวของเนื้อหาที่กำหนดเอง

หากคุณต้องการใช้ DOM ดั้งเดิมของส่วนหัว AdminLTE

 < h1 >
    About < small > static page </ small >
</ h1 >

จากนั้นคุณสามารถทำตามรหัส:

 /* @var yiiwebView $this */

$ this -> params [ ' breadcrumbs ' ][] = ' About ' ;

$ this -> beginBlock ( ' content-header ' ); ?>
About <small>static page</small>
<?php $ this -> endBlock (); ?>

<div class="site-about">
    <p> This is the About page. You may modify the following file to customize its content: </p>
    <code> <?= __FILE__ ?> </code>
</div>

เมนูแถบด้านข้างซ้าย - เมนูวิดเจ็ต

หากคุณต้องการแยกส่วนของเมนู ให้เพิ่มตัวเลือก header ให้กับรายการใน items

    ' items ' => [
        [ ' label ' => ' Gii ' , ' iconType ' => ' far ' 'icon' => 'file-code', ' url ' => [ ' /gii ' ]],
        [ ' label ' => ' Debug ' , ' icon ' => ' dashboard-alt ' , ' url ' => [ ' /debug ' ]],
        [ ' label ' => ' MAIN NAVIGATION ' , ' header ' => true ], // here
        // ... a group items
        [ ' label ' => '' , ' header ' => true ],
        // ... a group items
        [ ' label ' => '' , ' header ' => true ],
        // ... a group items

หากต้องการเพิ่มป้ายสถานะให้กับรายการ:

 ' items ' => [
    [
        ' label ' => ' Mailbox ' ,
        ' iconType ' => ' far ' ,
        ' icon ' => ' envelope ' ,
        ' url ' => [ ' /mailbox ' ],
        ' badge ' => ' <span class="badge badge-info right">123</span> '
    ],
]

ตามค่าเริ่มต้นไอคอนจะถูกเพิ่มคำนำหน้าของ Font Awesome

เทมเพลตสำหรับตัวสร้าง Gii CRUD

บอก Gii เกี่ยวกับเทมเพลตของเรา การตั้งค่าทำในไฟล์ปรับแต่ง:

 if ( YII_ENV_DEV ) {
    $ config [ ' modules ' ][ ' gii ' ] = [
        ' class ' => ' yiigiiModule ' ,
        ' generators ' => [ // HERE
            ' crud ' => [
                ' class ' => ' yiigiigeneratorscrudGenerator ' ,
                ' templates ' => [
                    ' adminlte ' => ' @vendor/dmstr/yii2-adminlte-asset/gii/templates/crud/simple ' ,
                ]
            ]
        ],
    ];
}

การทดสอบ

ไปที่โฟลเดอร์การทดสอบและเริ่มสแต็กการทดสอบ

 cd tests
docker-compose up -d

ติดตั้ง yii2-adminlte-asset ในแอปพลิเคชันทดสอบ

 docker-compose exec php composer install

เปิด URL ทดสอบในเบราว์เซอร์ของคุณ

 http://docker.local:20580/test
http://docker.local:20580/test/login    

ข้อมูลเพิ่มเติม

สำหรับเอกสาร AdminLTE โปรดอ่าน https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html

กฎการเนมสเปซเป็นไปตามโครงสร้างกรอบงาน Yii 2.0 เช่น dmstradminlteweb สำหรับชุดสินทรัพย์