Fecshop theme js and css

Fecshop如何添加js和css - 在layouts中添加css和js文件。

在layout.php文件的頂部可以看到代碼，譬如：譬如：@fecshop/app/appfront/theme/base/front/layouts/home.php



<?php
$jsOptions =[ # js的配置部分
    [
        # js options ，來定義位置，條件等
        'options' => [
            'position' =>  'POS_END',
            'condition'=> 'lt IE 9',
        ],
        # 在當(dāng)前options下的js文件
        'js'    =>[
            'js/jquery-3.0.0.min.js',
            'js/js.js',
        ],
    ],
    # 另外一個(gè)js配置
    [
        # 定義另外一個(gè)options下的js文件
        'options' => [
            'condition'=> 'lt IE 9',
        ],
        'js'    =>[
            'js/ie9js.js'
        ],
    ],
];


$cssOptions = [
    # css配置
    [
        'css'   =>[
            'css/style.css',
            'css/ie.css',
        ],
    ],

    
    # 另外一個(gè)css配置
    [
        # 這個(gè)css配置，有一定的條件
        'options' => [
            'condition'=> 'lt IE 9',
        ],
        # css文件
        'css'   =>[
            'css/ltie9.css',
        ],
    ],
];

    
\Yii::$service->page->asset->jsOptions     = $jsOptions;
\Yii::$service->page->asset->cssOptions = $cssOptions;             
\Yii::$service->page->asset->register($this);
?>

每一個(gè)layout文件，都可以自定義當(dāng)前的js和css文件 ,js和css的文件是放到模板路徑下的assets文件夾下面.

對(duì)于css中使用的image，一定要和css在一個(gè)模板路徑里面，否則會(huì)找不到文件。

Fecshop如何添加js和css - 在配置文件中添加

在配置文件 @fecshop/config/services/Page.php 中可以看到如下代碼：

'asset' => [
    'class' =>  'fecshop\services\page\Asset',
    # 在js后面加一個(gè)v參數(shù)，修改js后，更改v參數(shù)，否則，瀏覽器會(huì)使用緩存。
    # /assets/dbdba3fa/js/js.js?v=2
    'jsVersion'     => 1,
    # /assets/dbdba3fa/css/owl.carousel.css?v=2
    'cssVersion'    => 1,
    /* js and css config example:
    'jsOptions' => [
        # js config 1
        [
            'options' => [
                'position' =>  'POS_END',
            //  'condition'=> 'lt IE 9',
            ],
            'js'    =>[
                'js/jquery-3.0.0.min.js',
                'js/js.js',
            ],
        ],
        # js config 2
        [
            'options' => [
                'condition'=> 'lt IE 9',
            ],
            'js'    =>[
                'js/ie9js.js'
            ],
        ],
    ],
    # css config
    'cssOptions'    => [
        # css config 1.
        [
            'css'   =>[
                'css/style.css',
                'css/ie.css',
            ],
        ],

        
        # css config 2.
        [
            'options' => [
                'condition'=> 'lt IE 9',
            ],
            'css'   =>[
                'css/ltie9.css',
            ],
        ],
    ],
    */
],

您可以按照Yii2的語法方式，在里面添加js和css文件?？梢蕴砑觕ss和js 加載的條件

js和css 設(shè)置域名

為了更好的加載，一般，js和css使用和網(wǎng)站不同的子域名，這樣做是為了加載，原因可以參看文章：網(wǎng)站的圖片，css，js 為什么要和網(wǎng)站的域名不一樣

您可以在 @appfront/config/fecshop_local_services/Page.php 中配置：

'asset' => [
    'class' =>  'fecshop\services\page\Asset',
    # 在js后面加一個(gè)v參數(shù)，修改js后，更改v參數(shù)，否則，瀏覽器會(huì)使用緩存。
    # /assets/dbdba3fa/js/js.js?v=2
    'jsVersion'     => 1,
    'cssVersion'    => 1,
    # js和css的域名，如果不設(shè)置，則使用網(wǎng)站的域名。
    # 'jsCssDomain'   => '',
],

在 jsCssDomain 中填寫 js 和 css 域名即可。

js和css 瀏覽器緩存和版本

為了加速，我們需要使用瀏覽器緩存，但是我們?nèi)绻?jí)，怎么告訴瀏覽器，我們的js和css更改了呢？我們需要用到版本參數(shù)的方式，也就是在后面加一個(gè)v參數(shù)，當(dāng)js和css更改后，我們把 v參數(shù)的值+1即可。譬如：

/assets/dbdba3fa/js/js.js?v=2

您可以在 @appfront/config/fecshop_local_services/Page.php 中配置：

'asset' => [
    'class' =>  'fecshop\services\page\Asset',
    # 在js后面加一個(gè)v參數(shù)，修改js后，更改v參數(shù)，否則，瀏覽器會(huì)使用緩存。
    # /assets/dbdba3fa/js/js.js?v=2
    'jsVersion'     => 1,
    'cssVersion'    => 1,
    # js和css的域名，如果不設(shè)置，則使用網(wǎng)站的域名。
    # 'jsCssDomain'   => '',
],

當(dāng)您的css和js更改后，將 jsVersion 和 cssVersion的值+1即可。

重寫css或者js：

js 和 css 的重寫和view ，layout類似，也是通過模板路徑的優(yōu)先級(jí)，來完成重寫。如果要重寫css或者js，只需要在高優(yōu)先級(jí)的模板路徑下創(chuàng)建js或者css文件即可。

譬如：我想要重寫 js文件：@fecshop/app/appfront/theme/base/front/assets/js/js.js

如果本地模板路徑為：@appfront/theme/terry/theme01，那么，新建文件 @appfront/theme/terry/theme01/assets/js/js.js 即可，在加載js的文件，就會(huì)加載 @appfront/theme/terry/theme01/assets/js/js.js，這樣就完成了js文件的重寫。

重寫css和js的原理參看： yii2 多模板路徑優(yōu)先級(jí)加載view方式下- js和css 的解決

CDN

如果您使用的是cdn，那么您把web下面的assets里面的文件上傳到csn，然后設(shè)置jscss域名，把這個(gè)域名指向CDN即可。

Fecshop js css img