สร้าง theme bulma ใน Yii Framework 2

Bulma เป็น CSS Framework อีกตัวหนึ่งที่มีความนิยมไม่แพ้ Bootstrap ซึ่งเราสามารถนำมาใส่ใน Yii Framework 2 เราได้เหมือนกัน

ติดตั้ง Bulma

ก่อนอื่นเนื่องจาก bulma เป็น package หนึ่งของ bower ดังนั้นเรามาติดตั้ง bulma ผ่าน bower package โดยเข้าไปที่ root ของ project แล้วพิมพ์คำสั่ง

bower install bulma

กดปุ่ม enter จากนั้นจะเห็น folder bulma ใน vendor/bower-asset/ เป็นอันเสร็จเรียบร้อย

สร้าง theme ใน Yii2

สร้าง folder เก็บ theme ใน frontend/themes/bulma/views/layouts

จากนั้นสร้างไฟล์ BulmaAsset.php ใน folder bulma และสร้างไฟล์ main.php ใน layouts

BulmaAsset.php

<?php
namespace frontend\themes\bulma;
use yii\web\AssetBundle;

/**
 * Created by HanumanIT Co., Ltd.
 * User: Manop Kongoon (kongoon@gmail.com)
 * Date: 18/7/2561
 * Time: 22:53
 */
class BulmaAsset extends AssetBundle
{
    public $sourcePath = '@bower/bulma';

    public $css = [
        'css/bulma.css'
    ];
}

main.php

<?php
/**
 * Created by HanumanIT Co., Ltd.
 * User: Manop Kongoon (kongoon@gmail.com)
 * Date: 18/7/2561
 * Time: 22:59
 */

use common\widgets\Alert;
use yii\widgets\Breadcrumbs;
use yii\widgets\Menu;
use yii\helpers\Html;
use frontend\themes\bulma\BulmaAsset;

BulmaAsset::register($this);
?>
<?php $this->beginPage() ?>
    <!doctype html>
    <html lang="<?= Yii::$app->language ?>">
    <head>
        <!-- Required meta tags -->
        <meta charset="<?= Yii::$app->charset ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <?= Html::csrfMetaTags() ?>
        <title><?= Html::encode($this->title) ?></title>
        <?php $this->head() ?>
    </head>
    <body>
    <?php $this->beginBody() ?>

    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
                <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox"
                     width="112" height="28">
            </a>

            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <?php

        $menuItems = [
            ['label' => 'Home', 'url' => ['/site/index']],
            ['label' => 'About', 'url' => ['/site/about']],
            ['label' => 'Contact', 'url' => ['/site/contact']],
        ];
        if (Yii::$app->user->isGuest) {
            $menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
            $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
        } else {
            $menuItems[] = '<li>'
                . Html::beginForm(['/site/logout'], 'post')
                . Html::submitButton(
                    'Logout (' . Yii::$app->user->identity->username . ')',
                    ['class' => 'btn btn-link logout']
                )
                . Html::endForm()
                . '</li>';
        }
        echo Menu::widget([
            'options' => ['class' => 'navbar-menu'],
            'itemOptions' => [
                'class' => 'navbar-item'
            ],
            'items' => $menuItems,
        ]);

        ?>
    </nav>
    <section class="section">
        <div class="container">
            <?= Breadcrumbs::widget([
                'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
            ]) ?>
            <?= Alert::widget() ?>
            <?= $content ?>
        </div>
    </section>


    <?php $this->endBody() ?>
    </body>
    </html>
<?php $this->endPage() ?>

แก้ไขไฟล์ config

แก้ไขไฟล์ frontend/config/main.php เพื่อเปลี่ยน theme เป็น theme bulma ในส่วนของ components

'components' => [
//...
        'view' => [
            'theme' => [
                'pathMap' => [
                    '@app/views' => '@frontend/themes/bulma/views'
                ]
            ]
        ],
//...
],

ทดสอบ refresh หน้า web application จะได้หน้า web application ที่เปลี่ยนเป็น bulma ดังนี้

class และการใช้งานต่างๆ สามารถดูรายละเอียดได้ที่นี่ https://bulma.io/documentation/overview/start/

สร้าง theme bulma ใน Yii Framework 2