version 4.1.0

เปิดใช้งาน Theme บน Yii 2 Advanced

  จันทร์ที่ 10 สิงหาคม พ.ศ. 2558 เวลา 13:59:52 น.      4,923 ครั้ง


เปิดใช้งาน Theme บน Yii 2 Advanced

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 1 | รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

สร้างโฟล์เดอร์และไฟล์เกี่ยวกับ "themes" ของเรา

  • [skeleton]
  • --- themes | สร้างโฟล์เดอร์ "themes" ไว้สำหรับเก็บไฟล์ theme ทั้งหมด
  • ------- basic | ตั้งชื่อ Theme ใหม่ ชื่อว่า "basic" (สามารถตั้งชื่ออื่น ๆ ตามต้องการได้)
  • ----------- views | สร้างโฟล์เดอร์ "views" สำหรับเก็บไฟล์ layouts หรือ ไฟล์ views ทั้งหมด
  • --------------- layouts | สร้างโฟล์เดอร์ "views" สำหรับเก็บไฟล์ layouts หรือ ไฟล์ views ทั้งหมด
  • ------------------- frontend.php | สร้างไฟล์ layouts (เริ่มต้น) ชื่อว่า "frontend.php" สำหรับแสดงในส่วนของ Frontend
  • ------------------- backend.php | สร้างไฟล์ layouts (เริ่มต้น) ชื่อว่า "backend.php" สำหรับแสดงในส่วนของ Backend

ตัวอย่างคำสั่ง frontend.php

 
<?php
    use yii\helpers\Html;
    use frontend\assets\AppAsset;
    AppAsset::register($this);
?>
<?php $this->beginPage(); ?>
<!DOCTYPE html>
<html lang="<?php echo Yii::$app->language; ?>">
    <head>
        <meta charset="<?php echo Yii::$app->charset; ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php echo Html::csrfMetaTags(); ?>
        <title><?php echo Html::encode($this->title); ?></title>
        <?php $this->head(); ?>
    </head>
    <body>
        <?php $this->beginBody(); ?>
            <div class="container"><br />
                <h1>Theme Advanced <small>Frontend</small></h1><hr />
                <?php echo $content; ?>
            </div>
        <?php $this->endBody(); ?>
    </body>
</html>
<?php $this->endPage(); ?> 

ขั้นตอนที่ 1 เขียนคำสั่งดังตัวอย่างลงภายในไฟล์ "frontend.php" ซึ่งเป็นไฟล์ layouts ไว้สำหรับแสดงในส่วนของ frontend เท่านั้น ที่อยู่ในไดเรคทอรี่ [skeleton]\themes\basic\views\layouts\frontend.php

ตัวอย่างคำสั่ง backend.php

 
<?php
    use yii\helpers\Html;
    use frontend\assets\AppAsset;
    AppAsset::register($this);
?>
<?php $this->beginPage(); ?>
<!DOCTYPE html>
<html lang="<?php echo Yii::$app->language; ?>">
    <head>
        <meta charset="<?php echo Yii::$app->charset; ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php echo Html::csrfMetaTags(); ?>
        <title><?php echo Html::encode($this->title); ?></title>
        <?php $this->head(); ?>
    </head>
    <body>
        <?php $this->beginBody(); ?>
            <div class="container"><br />
                <h1>Theme Advanced <small>Backend</small></h1><hr />
                <?php echo $content; ?>
            </div>
        <?php $this->endBody(); ?>
    </body>
</html>
<?php $this->endPage(); ?> 

ขั้นตอนที่ 2 เขียนคำสั่งดังตัวอย่างลงภายในไฟล์ "backend.php" ซึ่งเป็นไฟล์ layouts ไว้สำหรับแสดงในส่วนของ backend เท่านั้น ที่อยู่ในไดเรคทอรี่ [skeleton]\themes\basic\views\layouts\backend.php

ตัวอย่างคำสั่ง main.php

 
return [

    'layout' => 'frontend',

    'components' => [

        /* ...... */

        'view' => [
            'theme' => [
                'pathMap' => [ '@app/views' => '@app/../themes/basic/views' ],
            ],
        ],
        
    ],
    'params' => $params,
];
                            

ขั้นตอนที่ 3 เพิ่มเติมคำสั่ง "layout" พร้อมด้วยชื่อ layout (เริ่มต้น) คือ "frontend" ตามตัวออย่างบรรทัดที่ 3 และ ส่วนของ "view" ตามตัวออย่างบรรทัดที่ 9 - 12 ลงในส่วนของ "component" ภายในไฟล์ "main.php" ที่อยู่ในไดเรคอรี่ [skeleton]\frontend\config\main.php

รูปภาพตัวอย่าง Frontend

รูปภาพตัวอย่าง Frontend

รูปภาพที่ 3 | รูปภาพตัวอย่าง Frontend

ตัวอย่างคำสั่ง main.php

 
return [

    'layout' => 'backend',

    'components' => [

        /* ...... */

        'view' => [
            'theme' => [
                'pathMap' => [ '@app/views' => '@app/../themes/basic/views' ],
            ],
        ],
    ],
    'params' => $params,
];
                            

ขั้นตอนที่ 4 เพิ่มเติมคำสั่ง "backend" พร้อมด้วยชื่อ layout (เริ่มต้น) คือ "backend" ตามตัวออย่างบรรทัดที่ 3 และ ส่วนของ "view" ตามตัวออย่างบรรทัดที่ 9 - 12 ลงในส่วนของ "component" ภายในไฟล์ "main.php" ที่อยู่ในไดเรคอรี่ [skeleton]\backend\config\main.php

รูปภาพตัวอย่าง Backend

รูปภาพตัวอย่าง Backend

รูปภาพที่ 4 | รูปภาพตัวอย่าง Backend



แท็ก


นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment