zoukankan      html  css  js  c++  java
  • [Yii Framework] How to embed the css and images in a module

    Maybe there is not a good introduction about how to embed css and images in a module in the forum (or cookbook) of Yii framework, but thanks to Qiang, who builds the great framework, that I found the way in the kernal code in framework/gii (In fact that gii is a module!)

    Here is the structure of my module "admin"

    代码
    | | |~modules/
    | | | `~admin/
    | | | |~assets/
    | | | | |+css/
    | | | | |+images/
    | | | |+components/
    | | | |+controllers/
    | | | |+messages/
    | | | |+models/
    | | | |+views/
    | | | `-AdminModule.php*

    1. Modify the AdminModule.php, add the code as below:

    代码
    private $_assetsUrl;

    /**
    * @return string the base URL that contains all published asset files of this module.
    */
    public function getAssetsUrl()
    {
    if($this->_assetsUrl===null)
    $this->_assetsUrl=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('admin.assets'));
    return $this->_assetsUrl;
    }

    /**
    * @param string the base URL that contains all published asset files of this module.
    */
    public function setAssetsUrl($value)
    {
    $this->_assetsUrl=$value;
    }

    public function registerCss($file, $media='all')
    {
    $href = $this->getAssetsUrl().'/css/'.$file;
    return '<link rel="stylesheet" type="text/css" href="'.$href.'" media="'.$media.'" />';
    }

    public function registerImage($file)
    {
    return $this->getAssetsUrl().'/images/'.$file;
    }

    2. Example of calling the css and images in modules/admin/layouts/main.php

    代码
    //calling the css
    <?php echo Yii::app()->controller->module->registerCss('main.css');?>

    //calling the images
    <?php echo CHtml::image(Yii::app()->controller->module->registerImage('logo.png'), "logo");?>

    Have fun with Yii!

  • 相关阅读:
    fork 入门
    java 注解 @Retention @interface 元数据
    JAVA泛型简析
    http数据流 gzip解压方法分析
    gdb调试提示 Missing separate debuginfos
    Vue2.x响应式原理
    观察者模式
    优秀博客收集
    切换npm源的方式
    前端模块化之ES Module
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1833005.html
Copyright © 2011-2022 走看看